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.

Canvas library

The Canvas library contains full-page previews and descriptions of all page templates and blocks within the Canvas design system.

Canvas Styles and Example Components Figma file

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.

How to customize the Canvas Figma file

• 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:

1. 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.

2. 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.

How to import designs from the Canvas Library into Figma

• 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.

Canvas design system specifications

Page template sizes

• 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

Block sizes (content containers)

• 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.

Popups

• Standard: 680px width

  • 30px of padding on all sides

• Small: 360px width

  • 30px of padding on all sides

Typography scale

• 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

Fonts and weights (for all font sizes)

• Inter Bold - Weight: 600

• Inter Semibold - Weight: 500

• Inter Standard - Weight: 400 (default)

Button sizes

• 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

Inputs, dropdowns, searchboxes

• 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)

Icons

• Canvas uses the feather icons library for most icons. Bubble supports Google Material icons and Ionic icons as well.

Maps

• 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.

Planning for responsiveness

• 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.