For Designers
Are you collaborating with a designer to customize the design of your app? The following resources provide more information on the default specifications of Canvas page templates and blocks.
Last updated
Was this helpful?
Are you collaborating with a designer to customize the design of your app? The following resources provide more information on the default specifications of Canvas page templates and blocks.
Last updated
Was this helpful?
The contains full-page previews and descriptions of all page templates and blocks within the Canvas design system.
The contains all of the typography and color styles used throughout Canvas design system. The example components’ dimensions and padding are consistent with Canvas block and page templates’ dimensions and padding. These components can serve as a base to create additional components, though this is completely optional.
Access the read-only copy of the file here:
At the top of the page, click on the file name, and select “Duplicate” from the dropdown. Figma will copy the file to your Figma account’s Drafts folder.
Navigate to the copied file in your Drafts folder and edit it in any way to begin creating your custom designs.
Modify all of the color styles to fit your app's branding requirements.
Utilize the example components and/or create brand new components on this components page.
Create a new page for your project and start building your app's designs.
To create a new design in Figma, based on a Canvas design, you can:
Select the “Full Page” preview option to open that design in a new tab.
This plugin requires that you define an import width. Most page templates have a 1220px width on desktop, and that should equal the size of all Figma frames used for desktop pages. The following page templates have slightly larger widths by default -- please import them at these widths:
2-Column Menu Tabs Page: 1410px width
Floating Map Search Page: 2600px width
Profile Tabs Page: 1410px width
Standard Multi-Step Page with Sidebar: 1410px width
Vertical Multi-Step Page: 1410px width
All Canvas designs are imported into the Bubble editor at desktop page widths by default. All designs are responsive for mobile but are modified in the Bubble editor at desktop page widths. If you plan to create a new design by modifying imported Canvas components (instead of creating them from scratch in the Bubble editor), it is best also to create desktop mockups, even if a page will primarily be used on mobile.
1220px width for most pages.
Exceptions:
2-Column Menu Tabs Page: 1410px width
Floating Map Search Page: 2600px width
Profile Tabs Page: 1410px width
Standard Multi-Step Page with Sidebar: 1410px width
Vertical Multi-Step Page: 1410px width
Desktop: 860px width
40px of padding on all sides
Mobile: 300px width
20px of padding on all sides
Canvas will automatically add 40px of space between each block on a page.
Standard: 680px width
30px of padding on all sides
Small: 360px width
30px of padding on all sides
Size 44: Large Title (for CTA Page Titles)
Size 30: Medium Title (for Standard Page Titles)
Size 23: Small Title (for RG and Group Headers)
Size 19: Subheading, Large Body
Size 15: Body, Buttons, Tabs (default)
Size 13: Microcopy, Metadata, Overline
Inter Bold - Weight: 600
Inter Semibold - Weight: 500
Inter Standard - Weight: 400 (default)
45px height for CTA buttons and marketing page buttons with 19pt font
40px height for standard buttons with size 15pt font (default)
28px height for smaller buttons above repeating groups with size 15pt font
45px height, with Inter Standard (Black) 19pt text and light grey borders, for CTA and marketing pages
40px height, with Inter Standard (Black) 15pt text and light grey borders, for standard app pages (default)
Canvas uses the feather icons library for most icons. Bubble supports Google Material icons and Ionic icons as well.
Canvas contains the following map styles by default:
Apple Maps (default)
Neutral Blue
Dark Mode
Just Places
Bubble supports custom Google map styles as well.
The Bubble responsive engine is slightly different from other visual development platforms such as Webflow. Bubble doesn’t yet support the following responsive settings:
Elements that collapse in width conditionally based on data (e.g., displaying a sidebar for some Users on a page and collapsing that same sidebar for other Users on that same page).
Exception:
Bubble can collapse elements in width based on the Current Page width.
Variable font sizes from desktop to mobile.
Overlapping elements of different sizes (e.g., image elements that must scale proportionally as the page is resized, with text elements on top of it.)
Exceptions:
It is possible to set an image as the background image of a group with text on top of the image. However, the image will not scale proportionally as the page is resized.
It is possible to have elements overlap if the elements remain the same size on all screen sizes.
Elements that change in size on hover.
Elements that dynamically change in width, height, and position based on viewport height and width.
Click on any page template or block that meets your use case within the .
Use a Chrome Extension such as to inspect the elements’ design properties.
In Figma, you can build these components from scratch or use the import plugin to import a Canvas design into Figma by pasting the URL of the full page preview into Figma.
