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
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.
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
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
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
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
Watch this first!
VERSION2 CHANGES: Defining and reusing fields in your Figma file should be a lot simpler with the introduction of a new 'Data' tab to contain all your field definitions. This is slightly different to how fields are defined in the demo videos below, but the overall principles and techniques haven't changed.
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.
Automated screen & navigation scanning
Category
If you already have a Figma prototype defined, Buzzy can automatically pull in your screen definitions and navigation links.
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.
Integrating with Google Analytics
Category
A quick demo of how to integrate the app you generated from Figma and Google Analytics.
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.
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.
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.
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.
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.
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.
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.
Sorting and filtering results
Category
Learn how to sort and filter your results and menus using the Buzzy Figma plugin.
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.
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.
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).
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!
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.
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.
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.
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.
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.)
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.
Adding pagination
Category
A quick demo on how to add real working paging of results to your Buzzy app.
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).
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).
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.
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.
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.
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
Supporting many-to-many data relationships
Category
The example shows Project to Users, using a Project Users join table.
More videos...
Getting started with Buzzy
Mark up your design and publish a live app straight from Figma.