Step by step version
The Buzzy Figma plugin now includes an AI assistant that can help you turn an idea into an app design brief, a working data model, an app design from a Figma toolkit, and finally a working app.
Last updated
The Buzzy Figma plugin now includes an AI assistant that can help you turn an idea into an app design brief, a working data model, an app design from a Figma toolkit, and finally a working app.
Last updated
Prefer videos? Here's the same process as some video tutorials.
Having an understanding of what Buzzy AI is and how it works is important to getting the most out of it.
The Buzzy AI assistant begins by getting an app description from you, which it uses to create an app brief.
This brief acts as a functional specification (a list of functions and user roles) that is then used by the Buzzy AI assistant to generate the app's data model (the data tables, fields and data relationships implied by the brief).
The data model is then used by the Buzzy AI assistant to assemble the app screens and user interface design in Figma, using a template system ('toolkit') of prebuilt interface components and layouts.
These Figma screen designs are already marked up with Buzzy tags, and are ready to be published and previewed as a Buzzy app, straight from Figma.
Brand, style and visual specifications are not part of what the AI can handle at the moment. For this, the idea is to use Figma's existing capabilities. The toolkit uses Figma styles for colours and fonts, and Figma components for interface elements - these make it easy for a Figma designer to quickly edit and refine the app design in Figma once it's been generated, and simply republish.
Buzzy AI isn't a magic, automated app creation tool. It still requires collaboration, oversight and input from you, but does give you a massive head start and saves a huge chunk of time in getting to an initial working version of an app, complete with a data model and core functionality. This can then be tested, branded and refined for production via Figma and Buzzy.
Before you start using Buzzy AI, you should:
Have a Figma account, and be able to create high-quality designs using Figma's tools and features
Have installed the Buzzy Figma plugin and worked through the demos and videos on the Getting Started guides and tutorials page.
Watch the demo and tech preview videos of Buzzy AI so you get an idea of what to expect, and how it works
The Buzzy Figma plugin works on whichever current page of a Figma file you are running the plugin on. The Buzzy AI assistant has an extra requirement - to generate your app screens, it needs access to the AI-enabled Buzzy Figma toolkit.
This toolkit is available as a Figma community file, and contains the framework and customisable Figma UI elements the AI will use to construct your app.
Grab the toolkit from the Buzzy Figma community page, and click the 'Open in Figma' button. This will copy the chosen file into your Figma 'Drafts' folder, and open it for you.
With your copy of a Buzzy AI-enabled toolkit file open, navigate to the page in the file called 'Your App Here'. This is an empty page, but the file contains all the UI components and themes the AI assistant will use to generate your app.
Now open (run) the Buzzy plugin.
The AI-enabled Buzzy plugin includes an AI assistant chat panel (open it via the robot icon), and tabs for Brief, Model (ex-Data), Theme, Markup (ex Design), Publish, and Settings (Cog icon). You can minimise the plugin via the arrows icon.
Everything you do with the Buzzy plugin while it is running on a Figma page is associated with that page - so if you generate an app brief, it is saved on this page. Switching to a different page (even in the same file) with the plugin open will change what is displayed in the plugin - for instance, no brief is defined. Switching back to this page will show the brief that was created for this page. In short: one Buzzy app = one Figma page.
You can speed things up by providing your own ChatGPT-4 enabled OpenAI key (learn how to get one here). Click the 'Settings' (cog icon) tab in the plugin and go to 'Manage OpenAI API key'.
Note: ChatGPT access and GPT-4 API access are different. Having access to the GPT-4 models in ChatGPT does NOT necessarily mean you have access to a GPT-4 API key.
The Buzzy AI assistant can help you generate a working app from a basic idea - but to do so it needs to follow a logical sequence of steps, beginning with defining a functional brief, then developing a data model before moving on to generating screen and UI elements in Figma and finally publishing the app.
The Buzzy plugin tabs reflect this sequence of steps in a left to right order - Brief > Model > Design + Markup > Publish.
The brief is a text description of your app - it outlines the basic functionality, and is used to define the data model and eventually the user interface.
In the Buzzy plugin, go to the 'Brief' tab and open the Buzzy AI assistant panel. Enter a prompt into the AI chat to begin defining your app brief. Some points to remember:
The AI handles simpler, granular requests better; like trying to explain to a child.
Brand and visual UI is not part of what the AI can handle at the moment.
The goal for the brief is to describe your app's data relationships and core functionality in simplistic terms, so the AI can generate your data model.
The AI assistant will define a brief for you, which will appear in the 'Brief' tab of the plugin. You can ask the AI assistant to modify the brief for you, or you can manually edit the brief itself.
Once you are happy that the brief describes your app accurately, you can move on to defining the data model.
Switch the plugin to the 'Model' tab. Provided a brief has been defined, you have the option to generate the data model, either via a button on this tab or by asking the AI assistant to generate it via the chat panel.
The AI will attempt to define a the data model (ie the data tables and fields) required for you app. Again, the more detailed the brief, the better the result is likely to be at this point.
You should review the resulting data model and adjust it as needed. For instance, the AI may not have included a product image field in a product table, or it may define an address field as being of type 'text', not 'location'. You can manually modify the fields in the 'Model' tab, or you can prompt the AI assistant to do so via the chat panel.
Open the 'Markup' tab in the plugin. This is where the interface elements (screens, forms, fields and more) are defined. Provided you have a brief and a data model defined, you can get the AI assistant to generate a working app design and set of screens for you. Trigger this either via a chat prompt (eg 'generate app design') or by clicking the button provided.
The AI assistant uses the Figma components of the Buzzy toolkit (on the 'Components' page of the toolkit file you should currently be working within) to automatically generate your app's screens and interface elements. Note this step may take several minutes - the time will vary and depends on your app's complexity.
The page will populate with all the Figma screen designs and UI elements required to build your app. These will have already been marked up by the Buzzy plugin and are ready to publish.
Switch to the 'Publish' tab of the plugin; the app name as defined in the brief you generated above should be pre-populated. Simply hit 'Convert to new Buzzy app'.
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.
When Buzzy has finished publishing your app, you can preview the app. View it in debug mode or a live mode in a browser, or you can use the provided QR code to open the app in a browser on your mobile device.
The plugin also provides a link to manage the app in the Buzzy - this will open the app in the Buzzy workspace (think of it as a CMS). This is where you can configure more advanced settings, view the data tables and manage the app data.
Chances are, your app preview will appear rather empty or devoid of content - sure, the interface is there and working, and the data tables, forms and fields are defined, but there's no data available yet. The Buzzy AI assistant can populate your new app with sample data - return to the Figma and the 'Publish' tab of the Buzzy plugin, and you should have the option to generate sample data for your new app via a simple button click.
Note: This step may take several minutes. If it times out, the Buzzy plugin will alert you to this, and you may need to try again.
On success, return to your app preview - it should now be populated with example content.
At this point you should have:
From here on in, working with your app and the Buzzy plugin follows normal (non-AI) Buzzy patterns:
Edit the Figma design as needed - whether that's changing visual styles or design elements, or adding entirely new screens and functionality
Use the 'Markup' tab of the Buzzy plugin to define Buzzy elements, functionality and behaviours
Use the plugin's 'Publish' tab to re-publish your app
A Figma file containing your app screen and interface elements, marked up with Buzzy functionality
A live, working web app, populated with example content for you to test
