Buzzy Documentation
  • Welcome to Buzzy
  • Getting Started with Buzzy
    • Getting Started Guide
      • 1. Starting with Buzzy AI
      • 2. The Buzzy Workspace
      • 3. Create a new app
      • 4. Preview and edit your app
      • 5. Manage your app
      • 6. Import your app to Figma
      • 7. Using Buzzy with Figma
      • 8. The Buzzy Figma plugin
      • 9. Creating a simple app
      • 10. Screens and navigation
      • 11. Forms, fields and data
      • 12. Data-driven menus & content
      • 13. Data edit and delete
      • 14. Search, sort and filter
      • 15. User login and registration
    • Buzzy AI or Figma first?
  • Working with Buzzy
    • Buzzy AI
      • About Buzzy AI
      • Kickstart with AI
      • Enhance with Figma
      • Extend with Code
      • Example prompts
      • Tips
      • Troubleshooting Buzzy AI
      • AI tokens and pricing
    • Buzzy for Figma
      • About Buzzy for Figma
      • Learning Figma
      • Creating a new app directly in Figma
        • Step by step version
      • Automarkup
      • Responsive layouts
      • Responsive layout checklist
      • Overflow and scrolling
      • Forms and fields
      • Logging users in to your app
      • Theming
      • Troubleshooting Buzzy for Figma
      • Plugin error messages
    • Buzzy Deployment & App Stores
      • Setting up your custom Buzzy app
      • Connecting your own server
      • Apple & Google App Stores
    • Buzzy Marketplace
      • Buzzy Accreditation
    • Buzzy Project Guide
    • Buzzy App Examples
      • Buzzy Templates
      • AI-Powered Chat App
      • AI-Powered Custom T-Shirt App
      • AI-Powered Strategy App
      • AI-Powered Stock Portfolio App
      • Golf Course Finder
      • Personal Finance App with Figma AI
    • FAQs
  • The building blocks
    • Datatables, Fields & Data
      • Introduction to Fields
      • Basic Fields
        • Text
        • Number
        • Date
        • Location
        • Toggle
        • Checkboxes
        • Checklist
        • Selectlist
        • Rating
        • Attachments
        • Images
        • Signature
        • Audio Recording
        • Embedded Link
      • Advanced Fields
        • Formula
        • Sub tables
        • Linked Table field
        • Button
        • Teams
        • Payment
        • Notification
        • Event
        • User Vote
      • Display Fields
        • Header
        • Display Text
        • Image
        • Divider
      • Metadata Fields
        • Author Name
        • Author Phone
        • Submitted
      • Filter Controls
        • Viewers
        • Tags
        • Condition
      • External Fields
        • IBM Connections File
        • Box File
      • Sort Fields
      • Formulas
      • Datatable to Datatable Relationships
      • Security and Access Control
      • Displaying a field based on the values of other fields
      • Hiding a field based on role using a display formula
      • Importing data from a text file
      • Importing data from a URL
      • Import data from Datatable
      • Export data using Chrome
      • Export data in Browser
      • Export data using Safari
      • Datatable Field Type - Cheat Sheet
      • Troubleshooting Fields & Data
    • Code widget (custom code)
      • Code Widget Fields - Advanced Guide
      • New Async API + React HTML Components
      • Examples
        • Image Galley Slideshow
        • Ratings Average and Distribution
        • Event Locations Map
    • Analytics
  • Troubleshooting
    • App Error Codes
      • Action Error
      • App Not Found
      • Component Missing
      • Component Not Set
      • Component Settings Error
      • Datatable Not Found
      • Datatable Not Set
      • Field Not Found
      • Field Not Set
      • No App Selected
      • No Context Name
      • No Screens Found
      • Runtime Exception
      • Screen Not Found
      • Screen Not Set
    • Troubleshooting Buzzy AI
    • Troubleshooting Figma
  • REST API
    • Buzzy REST API
      • Integrating 3rd party applications
      • REST API
        • login
        • createappwithprompt
        • MicroApp Data Operations
          • microappdata
          • microappdata/row
          • insertmicroapprow
          • updatemicroapprow
          • removemicroapprow
          • microappchild
        • User & Organization Operations
          • userid
          • insertteammembers
          • teammembers
          • insertorganization
          • insertteam
        • enforceteammembership
      • Node.js API Client
      • Datatable Rules
      • Datatabledata Tutorial
      • Integrating with Mailchimp
      • Python Access Datatable
  • Advanced Deployment Settings
    • Installation
      • Pre-installation Planning
      • Deployment
        • Introduction to deployment
        • Minikube install guide
        • AWS ECS Fargate install guide
        • HCL Connections install guide
        • Azure AKS install guide
        • Windows container install guide
      • Buzzy settings
      • Whitelabelling Buzzy
      • Certificates
      • Release Management
    • Performance and Reliability
    • Security
      • Platform
      • Users and Roles
      • Datatables
      • Audit Trail
Powered by GitBook
On this page
  • How it works
  • Get a Figma account & login to Figma
  • Basic steps
  • Install the Buzzy Figma plugin
  • Connect to Buzzy
  • Mark up your design in Figma
  • Using the Buzzy plugin
  • Publish your app from Figma
  • External Resources
  • Support
  1. Working with Buzzy
  2. Buzzy for Figma

About Buzzy for Figma

Buzzy includes a Figma plugin that allows you to develop and publish a working Buzzy app straight from Figma.

PreviousBuzzy for FigmaNextLearning Figma

Last updated 3 months ago

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.

Get a Figma account & login to Figma

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.

Basic steps

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.

Overview of the Buzzy plugin

The Buzzy plugin is divided into the following main tabs:

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

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.

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.


External Resources

Support

We really recommend you start with the , and work through the tutorials and video demos there.

To successfully use Buzzy, you should have skills and be able to create high-quality designs using Figma's tools and features. For some hints on best practices please see .

BRIEF: This tab is used only if generating a new app from scratch using the .

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. ()

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 .

Buzzy 'Getting Started' guides
Figma
this article
Buzzy AI
Using Buzzy AI? Start here
article on responsive layouts and design
The Buzzy website (pricing info and more)
The Buzzy Figma plugin
Templates and demo apps
Youtube getting started demos and tutorials
Release notes
Discord community forum
Email support@buzzy.buzz
Install the Buzzy Figma plugin
Connect to Buzzy
Mark up your design in Figma
Publish your app from Figma
LogoFigma: the collaborative interface design tool.Figma
Cover

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.

Cover

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.

Cover

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.

Publish, preview and test, then iterate!
Cover

Get the plugin

Cover

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.

Cover

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.

Buzzy Figma plugin page