Canvas Design System Figma File
Are you a designer or are you collaborating with a designer to customize the design of your app? Use the Canvas Design System Figma file to create your mockups before you build your app.
Canvas Figma File Link
Get access to the Canvas Figma file here: https://www.figma.com/community/file/1081549601052279283
Tutorials and Resources
Canvas Library with live component previews: build.airdev.co/library
Videos
How to change the cover (30 sec)
How to change the logo elements (2 min)
How to create a signup page (1 min)
File Structure Overview
The Canvas Figma file contains the following sections:
Cover
This layer contains the thumbnail of the library. You can delete this.
App name
This layer will contain the client app's name. You can add the app's name, right-click the frame, and select "Set as new thumbnail" so that the client project is easy to locate within your Figma account.
Styles
The Styles page contains logo, typography, color, image, and shadow styles. Figma styles are dynamic variables that store HEX colors, images, typography, and effect settings, which apply to every element on the Blocks and Page Template pages. You can make sweeping changes to the styling of hundreds of components by adjusting the defined styles on this page. Here's an overview of how to change each style:
Changing color styles: If you'd like to change the app's primary color from blue to purple, you can find that style and edit the style's HEX color to a purple HEX color. Then, navigate to any of the component layers within the file, and that purple color will be used in every place that utilizes the app's primary color. Here is a video that shows how to do this.
Changing image styles: Image styles are similar to color styles in that they both involve modifying the "Fill" setting of a style. The benefit of using image styles is that you can easily change the design system's branding and imagery from its default images to any images that fit the theme of the client's app. For example, if you are building a marketplace that sells cars, you can right-click any image styles and upload pictures of cars in place of the default images. All Canvas components that utilize that image will display the car images by default. Here is a video that shows how to do this.
Changing effect styles: Effect styles control the drop shadow settings on elements. The shadow settings add a very light gray drop shadow to card and tile components by default.
Atomic Components
If you picture the Canvas Design System as a set of different-sized LEGO blocks that you can use to assemble your designs, the Atomic Components are the smallest LEGO blocks within the library. These are individual text elements, buttons, inputs, images, tags, and other elements found within every Block component. Similar to changing Styles, changing any of these atomic components will automatically update every instance where that atomic component is used throughout your file. You will probably not need to modify these components, but you will usually add more instances of them to autolayout groups and other components when assembling custom mockups.
Desktop Page Templates
Desktop Page Templates are the desktop versions of the page templates within the Canvas library. Each Page Template contains different "Page-level elements" (found on the "Atomic Components" page of the file) and an 860px autolayout group with two green placeholders. To use a Page Template for a new mockup, add a new instance of that Page Template to your Figma file. Then, detach the instance of that Page Template so that you can add Blocks within the 860px autolayout group. You may then decide to create a new component of that customized page template.
Desktop Blocks
Desktop Blocks are the desktop versions of the blocks within the Canvas library. Each block contains different Atomic Components within autolayout groups. If you'd like to use and modify a Desktop Block within your design, it's best to add an instance of that block to your Figma file and then detach it to rearrange or add any elements within the autolayout group. You may then decide to create a new component from the customized elements if you plan to use that design multiple times (e.g., creating a master component of a customized list tile repeating group cell, and then adding instances of that list tile to create new rows in your repeating group).
Mobile Page Templates
Mobile Page Templates are the mobile versions of the page templates within the Canvas library. Each Page Template contains different "Page-level elements" (found on the "Atomic Components" page of the file) and an 860px autolayout group with two green placeholders. To use a Page Template for a new mockup, add a new instance of that Page Template to your Figma file. Then, detach the instance of that Page Template so that you can add Blocks within the 860px autolayout group. Alternatively, you can keep the Page Template as a component instance and then swap one of its Placeholder groups for a Block component.
Mobile Blocks
Mobile Blocks are the mobile versions of the blocks within the Canvas library. Each block contains different Atomic Components within autolayout groups. If you'd like to use and modify a Desktop Block within your design, it's best to add an instance of that block to your Figma file and then detach it to rearrange or add any elements within the autolayout group.
How to Create Your Designs
The My Page Designs layer
The "My Page Designs" tab contains a grid layout to help organize your app's headers, page components, and screens. Here is a video that walks through an overview of these updates, as well as a more realistic example Winery app which contains some common example component structures. It's probably easiest to view the video and example file first, but here is an overview of the new sections as well:
My Headers section
By default, the Figma file contains 6 Header navigation variants of a component called “Default Header” for the three default Canvas User types: Logged-in (desktop and mobile variants) Logged-out (desktop and mobile variants) Admin (desktop and mobile variants) You can edit the existing headers, and/or add new header variants within this component in any way to define the app's navigation. It's totally up to you! Any time you want to make changes to the navigation elements across multiple mockups, it's best to change the text and icon elements within this main component’s variants. Then, adjust the variants of the header instances within Page components to quickly switch between which header is displayed on a Page. An instance of the Default Header component is within every instance of the Page Template elements by default, so editing the Default Header will edit the Headers within all of the Page Template components automatically.
My Page Components and My Screens
This column is the intended space to create one main page component for every Page defined in the "Pages" table of the scope doc. A new page component can be created by: Adding an instance of any of the Canvas Page Template components that come with the Figma file. Detaching the Page Template component and detaching any sidebar navigation components within it (e.g., if you add an instance of the Standard Dashboard Page template, you will want to detach both the Standard Dashboard Page Template component and the Sidebar component that comes within that Page Template) Creating a new component from the detached page, and customizing it to match the scope (e.g., "Winery Portal Page" in the video example). Once your new page component is created, that component will be the 'main component' for that page's Screens. In this Winery Portal Page example video, there are 5 tabs (Dashboard, Wines, Experiences, Orders, Bookings). In total, this Dashboard page has around 16 Screens. We want to keep those 16 Screens attached to the main Winery Portal Page component, so that we don't have to individually update 16 Screens if we need to make a change that affects every Screen. By keeping them attached, we can make sweeping changes across tons of mockups in just a few clicks. Since each Screen will contain an instance of the Winery Portal Page component, we can use different overrides and visible elements to show each Screens' UI. We can also swap placeholder components with custom block components that we create (as shown in the video with the Stripe empty state example). Note: When a Screen needs to show a popup, you can combine a Screen instance and a Popup component into a single frame. This preserves the Screen instance while displaying a popup on top of it.
Though the above setup recommends creating a component structure before diving into designing each Screen, it will likely save tons of time when needing to make changes since you can easily update a single Page component once and see those changes reflected in all of the related Screens (instead of needing to manually update many detached Screens). This set up will also make it much easier to update mockups when adding new functionality for future follow-on builds.
Example files:
Tips
All components with a 🟢 emoji are often atomic components or blocks containing variants. All components with a 🔴 emoji are meant to be detached.
Every master component and component instance will have a purple element name and purple borders. Every non-component element will have a blue border. If you find it challenging to change an element, it is probably still attached to a master component. Quickly identify this by seeing if it has a purple border, and click CMD+D to detach it without checking whether it is a component within the layers panel.
Use Figma's "swap component" function to change icons.
Use autolayout to keep consistent spacing between elements.
Use frames instead of groups.
You do not need to detach a component instance if you are only deleting elements not included in that instance's master component. However, you will need to detach any component if you would like to add any element to it or change the order of the elements within it.
Canvas library
The Canvas library contains full-page previews and descriptions of all page templates and blocks within the Canvas design system. Use this library to discover different page templates and blocks, and then add them to your mockups by searching for them within the "Assets" panel of the Figma file.
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
(Please note the below responsive principles apply to the first version of the Bubble responsive engine, and not the Beta responsive engine)
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 overlapping elements if they 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.
Designing in Figma
A common question that Bubblers ask is whether they should create designs in Figma, or design everything directly in Bubble. We almost always recommend using Figma first, because it is easy to make sweeping changes across your designs before architecting them in Bubble. If you are new to Figma, these are the main controls to utilize which save tons of design time:
Main components, component instances, and overrides: In Figma, every element within the file is either a main component or a component instance. You can define a main component (e.g., a Title Group), and include any elements you need in there (title text, results text, sort dropdown, filter dropdown, new button). As you are building your designs, if you realize that all Title Groups need to have a larger font or an additional element, you can add that element within the Title Group main component and all of the Title Group instances will update in your designs immediately. In Bubble, each Title Group would be a standalone group of elements, which may have similar defined styles, but all of them would need to be modified individually.
Main components and components instances are similar to the concept of reusable elements in Bubble, but Figma has 'overrides' which allow us to quickly customize the individual properties within each component instances without breaking the linkage to their main component. In the Canvas Figma file, everything is a component or a component instance, which significantly speeds up the time it takes to create consistent and cohesive designs. In Bubble, there is not currently a way to create that same UI component structure and system.
Color styles: Figma has color styles which allow us to define a color palette for all of the components in a Figma file, and change all of the color palette styles in seconds. In Bubble, colors are nested within each element style, and changed individually and manually.
Typography styles: Figma also has typography styles which allow us to change the font and type scale across all of the components in a few minutes. In Bubble, typography is nested within each element style, and changed individually and manually.
UI Plugins: Figma's plugins are UI focused so it's very easy to populate realistic dummy data and imagery in mockups instead of needing to add these manually as individual app data entries.
Creating Figma Designs in Bubble
In order to successfully recreate your Figma designs in a Bubble app, our best recommendation is to:
Create an app with the Canvas Base Template template
Import the page templates and blocks you need using the Canvas Chrome extension based on your designs
Make modifications within Bubble based on your high-fidelity mockups
Though Bubble has a Figma integration, it doesn't recognize element types, styles, and workflows, so running a 1:1 import from a Figma file to Bubble usually takes more time than adding the blocks through the Canvas extension and making modifications.
We recommend creating high-fidelity mockups in Figma whenever you are creating designs for multiple flows, collaborating with other designers, or working through multiple options, and then build them in Bubble when they're finalized. In Figma, everything is a text element or a shape, so it's very easy to make large and sweeping changes to your designs. In Bubble, we must define the specific element type, visual, and responsive properties for each element, so it is harder and more time-consuming to make large, sweeping changes to designs once they are structured in Bubble.
If the required designs are small, straightforward, and largely unchanged from their default Canvas state (e.g., just a few blocks), then it is sometimes faster to add those blocks directly in Bubble instead of needing to create mockups first. However, for most UI, it usually saves time to design in Figma before building out designs in Bubble.
Last updated