Hi, everyone! 
I’m excited to announce the launch of the Canvas Design System Figma file by Airdev! This is the same Figma file we use to create high-fidelity mockups for all client apps, 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: https://docs.airdev.co/canvas/for-designers
This documentation describes the exact purpose of each layer in the file, and notes on 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.
Prior to learning Figma, I primarily designed and built all designs directly in Bubble - or I would use Balsamiq before building designs in Bubble. However, since learning Figma, I have used Figma before starting every project mainly because of how fast it is to adjust styles, populate realistic content/imagery, and make sweeping design changes.
There are times when it might be faster to add designs directly in Bubble first (when making changes to a single page where the design elements are straightforward and unlikely to change), but I usually find that it is 10x faster to design entire apps and flows in Figma first because you don’t need to define element types, data types, fields, and workflows, and can focus exclusively on testing different design requirements before structuring the app and database. Starting from a Figma design system also makes it easier to collaborate with other design teams, because you can send copies of the file to everyone, and everyone is working from the same shared set of components.
We hope you find this useful, but please don’t hesitate to let me know if you have any questions at all! Thank you so much!