About Buzzy for Figma
Buzzy includes a Figma plugin that allows you to develop and publish a working Buzzy app straight from Figma.
Last updated
Buzzy includes a Figma plugin that allows you to develop and publish a working Buzzy app straight from Figma.
Last updated
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.
You're going to need a Figma account, so if you don't already have one, go sign up (it's free), then come back here and continue below. Already have a Figma account? Login to Figma and continue.
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.
There are several ways to install and run Figma plugins - for now we just want to run the Buzzy plugin and connect it.
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
The Buzzy Figma plugin works by letting you select elements in Figma, and assigning roles, actions, data and functionality to them.
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!
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.
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.
Connect to Buzzy
In Figma, open the Buzzy plugin, and click Connect. You’ll only need to do this the first time you run the plugin, unless you sign out.
Allow Figma access
A new browser window will open; allow access when prompted. Buzzy needs this to access your Figma files and generate your apps.
Return to Figma
A success screen will appear in the browser. That's it - simply return to Figma and your Buzzy plugin will be connected and running.
Get the plugin
New Figma tab opens
Figma will open a new tab, with a default Buzzy 'start' file - but it won't have opened the plugin for you! It instead shows a tooltip that indicates where you can find and launch the plugin in the Figma workspace.
Run the plugin
Click the Figma button indicated above, and it opens a plugin panel, populated with the Buzzy Figma plugin. Click the 'Run' button to launch the plugin.
Go to the in the Figma community and click the 'Try it out' button.
