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.
Learn how to create a simple multi-page app with basic navigation directly from Figma using the Buzzy plugin.
Screens & nav
Forms & fields
Learn how to create a simple live form (with working fields, submit and success actions) directly from Figma using the Buzzy plugin.
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
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
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
Watch a basic introduction to the Buzzy plugin, and follow the creation of a simple 'hello world' example app.
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.
Responsive vs fixed layout modes
Explains the difference between 'fixed' (or 'static') and 'responsive' layout modes when publishing screens from Buzzy.
Automated screen & navigation scanning
If you already have a Figma prototype defined, Buzzy can automatically pull in your screen definitions and navigation links.
Using flex wrapping in autolayouts
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
A quick demo of how to integrate the app you generated from Figma and Google Analytics.
Removing the Intercom widget
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
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
More than just modals or alerts - use them for sidebar navigation, alternate screen layouts, tooltips and popover menus.
Quick workaround to clear Buzzy markup
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
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
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
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
Learn how to sort and filter your results and menus using the Buzzy Figma plugin.
Using filtered views for conditional rendering
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
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
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
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
A quick demo of setting up a Buzzy app with a simple login flow using Buzzy's passwordless login tokens.
Search and filter demo
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
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
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
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.)
Getting started with Buzzy
Mark up your design and publish a live app straight from Figma.