top of page

Interested in using your Figma + Buzzy skills? We're always trying to match skilled, accredited freelancers with creative thinkers who have great app ideas (but not the time or skills to do it all themselves).

NEW TO BUZZY? START HERE

New to Figma? Buzzy builds on a basic familiarity with Figma, so you should start here.

2. Complete these video tutorials!

This series of video lessons will step you through the creation of a simple app - beginning with basic screens and slowly introducing more advanced concepts. Each video has an accompanying example file so you can see how it's done.

LESSON 2

Learn how to create a simple multi-page app with basic navigation directly from Figma using the Buzzy plugin.

​

NEW! Automated screen and navigation scanning now does this for you!

Screens & nav
Figma logo

LESSON 3

Forms & fields

Learn how to create a simple live form (with working fields, submit and success actions) directly from Figma using the Buzzy plugin.

​

BONUS VIDEO: Advanced field settings - placeholder text, default values and more.

Figma logo

LESSON 4

Learn how to add a simple data-based menu to an app directly from your Figma design file - including pagination and a 'load more' action.

 

BONUS VIDEO: Displaying 'no results' messages

Data & menus
Figma logo

LESSON 5

Building on the previous video, we're creating a data-driven content screen that we can link to from our data-driven menu. As a bonus, we'll add some metadata to our content screen on the fly - with only a tiny amount of geekery. 

Data & content
Figma logo

LESSON 6

Adding to our simple data-driven app demo, we're going to enable users to edit and delete the data they've added to our app. Includes adding confirmation dialogs and success messages.

Data edit & delete
Figma logo

LESSON 1

Watch a basic introduction to the Buzzy plugin, and follow the creation of a simple 'hello world' example app.

​

NEW! Fixed layout mode simplifies your basic screen conversions.

Hello World
Figma logo

Changes

  • BRIEF: This tab is used only if generating a new app from scratch using 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.

Buzzy AI   (April 2023)

Buzzy AI saw some more changes to the tab names in the Buzzy plugin; again, this doesn't change the basic principles and concepts outlined in the demo videos below.

​

If you're using Buzzy AI, refer to these docs.

v2 Changes (March 2022)

Version 2 of the Buzzy plugin introduced a new 'Data' tab to contain the data model and field definitions; however, the overall principles and techniques outlined below still apply.

Questions? Feedback? Jump on Discord.

Looking for support, have a question or just wanna give some feedback? Jump onto our Discord server.

Samples? Templates? Visit us in Figma.

Grab example files, templates and demos from our Figma profile page at figma.com/@buzzy

Responsive vs fixed layout modes

Category

Explains the difference between 'fixed' (or 'static') and 'responsive' layout modes when publishing screens from Buzzy.

Watch video

Automated screen & navigation scanning

Category

If you already have a Figma prototype defined,  Buzzy can automatically pull in your screen definitions and navigation links.

Watch video

Using flex wrapping in autolayouts

Category

Turn 'wrapping' on when publishing an autolayout via the Buzzy plugin. Useful for repeating menu items, or dealing with responsive layouts.

Watch video

Integrating with Google Analytics

Category

A quick demo of how to integrate the app you generated from Figma and Google Analytics.

Watch video

Removing the Intercom widget

Category

Hide the widget via the app settings or add your own Intercom credentials as a way of communicating wth your own customers.

Watch video

Components: resolve 'duplicate item' warnings

Category

Resolve potential conflicts by renaming items (so they're treated separately) or define a master/instance relationship by treating duplicates as a 'reference' to an existing item.

Watch video

Using overlays, modals and alerts in Buzzy

Category

More than just modals or alerts - use them for sidebar navigation, alternate screen layouts, tooltips and popover menus.

Watch video

Quick workaround to clear Buzzy markup

Category

A quick hack to easily clear nested Buzzy markup when duplicating entire screens or parts of your design.

Watch video

Buzzy plugin best practice: naming your layers

Category

Naming your layers descriptively as you mark up a design with the plugin makes it easier to understand your app's structure, layout and functionality.

Watch video

Simple form validation using show/hide formulas

Category

Buzzy uses JSONata formulas to conditionally display items - see how you can use this to perform a basic form validation.

Watch video

Using show/hide formulas for conditional rendering

Category

This demo shows how to change an icon and a date display for a task list, based on whether the task has been marked as complete or is overdue.

Watch video

Sorting and filtering results

Category

Learn how to sort and filter your results and menus using the Buzzy Figma plugin.

Watch video

Using filtered views for conditional rendering

Category

As well as using show/hide formulas for conditional rendering, we can also use Buzzy's results views with filtering. In this case, we only display a link to a particular menu if it is not empty.

Watch video

Nested data and the embedded field type

Category

Learn how to nest data and embed menus within other data-driven content by adding a comment list and form to a dynamic portfolio page.

Watch video

HTML and custom code demo file walkthru

Category

A quick walk-through of our custom code demo to demonstrate the Buzzy 'HTML' field type (get the Figma demo file here).

Watch video

Responsive breakpoint workaround

Category

An example technique to swap a header design at different screen breakpoints - without using actual breakpoints. Use this as an inspiration for your own responsive layout hacks! 

Watch video

Simple login for Buzzy apps

Category

A quick demo of setting up a Buzzy app with a simple login flow using Buzzy's passwordless login tokens.

Watch video

Search and filter demo

Category

A quick walk-through of how to create a simple search for your Buzzy app - including how to set up a search across multiple fields.

Watch video

Selective publish to improve performance

Category

You can now selectively publish a sub-set of your design to be updated on the Buzzy server. Select the screens you're working on and publish in seconds.

Watch video

Temporary variables and the 'Update Field' action

Category

A quick demo of a new action type that lets you update field data based on user clicks. Use this with temporary variables to build advanced 'conditional' UI such as 'increment' buttons, accordions and more, or to save a temporary state or context.

Watch video

Figma, Buzzy and working with data

Category

Hear from Adam, Buzzy founder, about some of the base concepts of how data is handled when converting your Figma designs to working websites and native apps with Buzzy. (This a 45 minute session.)

Watch video

Using 'debug mode' 

Category

Debug Mode allows you to easily debug layout, logic and syntax issues. Toggle highlights for Layouts, Components, Actions, Fields and Info items and see warnings and errors.

Watch video

Adding pagination

Category

A quick demo on how to add real working paging of results to your Buzzy app.

Watch video

New roles for 'who can view data'

Category

A quick demo of new capabilities that extend 'Who Can View' data in a Buzzy datatable (aka microapp).

Watch video

New roles for 'who can view data'

Category

A quick demo of new capabilities that extend 'Who Can View' data in a Buzzy datatable (aka microapp).

Watch video

A more detailed login demo

Category

This demo covers a number of scenarios including sending yourself a login link, login with a password, creating new account with a password, changing or resetting a password and inviting users to a private/secure application.

Watch video

Example of a date-based visibility formula

Category

A quick demo on how to show or hide a Buzzy item dynamically based on a date value formula.

Watch video

Create a booking widget using custom HTML

Category

This shows how you can extend Figma and Buzzy when the out of the box components don't work.

Watch video

Integrating with Google Analytics & custom events

Category

Create custom events and attach them to interaction components such as buttons, and use these with Google Analytics to perform detailed usability testing

Watch video

Supporting many-to-many data relationships

Category

The example shows Project to Users, using a Project Users join table.

Watch video

More videos...

Getting started with Buzzy

Mark up your design and publish a live app straight from Figma.

1. Get the Buzzy Figma plugin

The Buzzy plugin is used to mark up and publish your design from within Figma. The first time you run it, you'll need to connect Figma and Buzzy using your Figma ID. It's free, and as simple as possible.

bottom of page