The Buzzy Figma plugin
Buzzy is a low-code platform used to build web and mobile apps. It includes a Figma plugin that allows you to develop and publish a working Buzzy app straight from Figma.
How it works
The Buzzy Figma plugin works by allowing you to mark up a design in Figma - when you 'publish' your app, Buzzy extracts your screens and designs from the Figma file and converts them into a Buzzy app using your design, coupled with the functionality, data and behaviours you told Buzzy to use via the plugin.
Best of all, you can keep working in Figma. Make changes to your app in Figma, and simply republish via the plugin.
Basic steps
We really recommend you start with the Buzzy 'Getting Started' guides, and work through the tutorials and video demos there.
To successfully use Buzzy, you should have Figma skills and be able to create high-quality designs using Figma's tools and features. For some hints on best practices please see this article.
Install the Buzzy Figma plugin
There are several ways to install and run Figma plugins - for now we just want to run the Buzzy plugin and connect it.
Connect to Buzzy
The first time you run the Buzzy plugin, you'll need to connect to Buzzy using your Figma ID.
Hint: if the plugin appears stuck on a 'processing screen' after you return to Figma, simply close and reopen the plugin
Mark up your design in Figma
The Buzzy Figma plugin works by letting you select elements in Figma, and assigning roles, actions, data and functionality to them.
Video: Introduction to the Buzzy plugin
This was recorded a while ago, and the plugin interface (including tab names) has changed slightly, but the core ideas still apply.
Overview of the Buzzy plugin
The Buzzy plugin is divided into the following main tabs:
BRIEF: This tab is used only if generating a new app from scratch using the Buzzy AI.
MODEL (Previously called 'Data'): This is where you define your app's data model.
MARKUP (Previously called 'Design'): This is where you link your Figma design to functionality, roles, data and behaviour.
PUBLISH: This is where you publish your app to a server for previewing and deployment.
The Buzzy plugin applies to whichever page of a Figma file is currently visible. The markup and Buzzy app definitions are saved to that Figma page. One Figma page equals one Buzzy app. You may have several Buzzy apps defined in one Figma file - for instance a public app and an admin app on separate pages of a single file, sharing a common Figma design library. As you switch between Figma pages while keeping the plugin open, you'll see the plugin reflect the Buzzy markup (and thus app definition) of each page.
If you've opened the Buzzy plugin on a Figma file you've been working on, and it appears the Buzzy markup has gone missing, make sure you're on the right page of your Figma file - ie the one that contains your app screens and designs!
Using the Buzzy plugin
To convert a Figma design into a single Buzzy app, place all your app interface screen designs onto a single Figma page, and open the Buzzy plugin. (Using Buzzy AI? Start here)
Use the plugin 'Model' tab to define your app data model, data tables and field definitions. Once you have a data model defined, you can assign those fields and values to your Figma UI elements via the 'Markup' tab of the plugin.
Use the plugin 'Markup' tab to assign functional roles and behaviours to your Figma screens and elements. Select your Figma layers (via the Figma canvas or in the normal Figma layers panel), and assign functional roles and behaviours to those elements.
Recommended approach: We recommend picking key areas of your app and working on your app section by section, beginning with simple functionality first, and then progressing from there, testing as you go.
For instance, start by defining your app screens and basic navigation actions first, and getting your core layouts working correctly, before working into them with data. For more detailed examples of what this means, see the article on responsive layouts and design.
An iterative approach is best - work on a part of your app, publish and test, then iterate.
Publish your app from Figma
Use the 'Publish' tab of the Figma plugin to publish your app. Simply give your app a name (it will default to the page name) and hit the publish button.
The first time you publish a Buzzy app from a Figma file, you'll need to enter the file key. The Buzzy plugin will prompt you for this. Simply open the 'Share' dialog in Figma, and copy the file link. Paste this into the plugin and hit Next.
Once your app has been published, you can preview it in a browser. There are 3 buttons/links we provide - one to a 'debug' mode preview, which wraps the app in a Buzzy inspector/debugger; one to a 'live' preview of your app, and one to the Buzzy platform, where you can better manage your apps' settings and data. There's also a QR code, which you can use to preview your app in a browser on your mobile device.
NEW! Introducing Buzzy AI
Our new Buzzy AI assistant is designed to help you shortcut some of the steps outlined above and introduces a different way of working; Buzzy AI can generate an app brief, data model and even marked up Figma app screens ready to publish.
pageUsing Buzzy AIExternal Resources
Support
Last updated
