[New Release] Canvas Design System Figma File

Hi, everyone! :slight_smile:

We’re excited to announce the launch of the Canvas Design System Figma file! This is the same Figma file we use to create high-fidelity mockups for clients, and it is now available for everyone to use to create custom designs as a free, Figma community file! This file contains copies of every Canvas element, block, and page template, and utilizes a bunch of useful Figma features to make designing mockups fast and easy. Here’s more information on the benefits of using the file:

Create custom mockups in minutes, using modular design and autolayout
The Canvas Figma file utilizes a modular approach to building application UI. Simply drag and drop any number of blocks into page templates and make customizations. Here’s a video that demonstrates how to create a search page:

Make sweeping style changes across hundreds of components in a few clicks
Change color, font, image, and effect styles to meet your application’s branding requirements. With Figma’s swapping features and the Canvas Figma file’s Styles page, you can change styles across hundreds of Canvas components in seconds. Every element within the file is either a component or a component instance, so updating any of the defined Styles here will immediately reflect those changes in all of your components. This allows you to quickly show clients what their app will look like with their unique branding requirements and realistic example data/imagery.

Utilize pre-built desktop and mobile components
All Canvas component specifications match their Bubble specifications. They follow common application UI patterns and responsive principles.

Build your designs in Bubble
When your designs are ready, use the Canvas Chrome extension to assemble your designs and program your app in Bubble.

File link: https://www.figma.com/community/file/1081549601052279283

Related resources:

  • Figma File Documentation: Canvas Design System Figma File - Canvas Manual
    This documentation describes the exact purpose of each layer in the file and the difference between designing in Figma vs. designing directly in Bubble.
  • Airdev bootcamp: https://build.airdev.co/bootcamp
    If you are interested in learning more about how to build your designs with Canvas, this free Airdev bootcamp will guide you through the process.

We hope you find this useful, but please don’t hesitate to let us know if you have any questions at all! Thank you so much! :slight_smile:

2 Likes