For Designers
The Canvas library contains full-page previews and descriptions of all page templates and blocks within the Canvas design system.
The Canvas Styles and Example Components Figma file 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: https://bit.ly/3ww9k23
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.
If you would like to customize your app's font, it is recommended that you choose a font that is equal to or slightly smaller than Inter for these reasons:
If the font is larger than Inter, Bubble might show "......" within each text element in the Bubble editor, making it challenging for the designer and developer to know where to click to edit different elements.
If the font is larger than Inter, fixed-width tab and link elements will sometimes break to the next line after making changes to the fonts. With smaller fonts, elements won’t break to the following line.
Note: For completely custom UI elements and designs created from scratch, and not from Canvas, there shouldn't be any challenges starting with a larger font than Inter.
Utilize the example components and/or create brand new components on this components page.
All components with a 🟢emoji contain variants. All components with a 🔴emoji are meant to be detached.
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:
Click on any page template or block that meets your use case within the Canvas library.
Select the “Full Page” preview option to open that design in a new tab.
Use a Chrome Extension such as Prism to inspect the elements’ design properties.
In Figma, you can build these components from scratch or use the HTML → Figma import plugin to import a Canvas design into Figma by pasting the URL of the full page preview into Figma.
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.