Hello everyone! We are extremely excited to announce the public release of the Canvas Design System Figma file! This Figma file is the same file that we use to create high-fidelity mockups for clients at Airdev, and it is now available for everyone to use to create custom designs! The 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 in two minutes:

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/... Related resources - Figma File Documentation: https://docs.airdev.co/canvas/fo... 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 using Bubble, our free Airdev Bootcamp will guide you through the process. We hope you find this useful! If you have any questions, please don't hesitate to let us know! Thank you so much!

Faye Watson

GIF Holiday Card Creator

Maker