# Getting started with Buzzy AI {% hint style="info" %} The Buzzy AI assistant is currently in closed beta - [learn more about it here, and apply for the waitlist! ](https://www.buzzy.buzz/) {% endhint %} ### Before you start Buzzy works with [Figma](https://www.figma.com/about/), the leading collaborative graphics editing and user interface design app. It is used globally by designers, businesses and large organisations to build better products. 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](https://help.figma.com/hc/en-us) * Watch the [demo and tech preview videos on Buzzy AI available here](https://www.buzzy.buzz/) so you get an idea of what to expect, and how it works * It also helps to have experience using Buzzy itself (the non-AI version), so you have an understanding of [what Buzzy is and how it works with Figma](https://www.buzzycompany.com/getting-started). ### Get the Buzzy Figma plugin If you have not used Buzzy before, you'll need to install and connect the Buzzy Figma plugin. There are several ways to install a Figma plugin - either from a browser, or from the Figma app itself. Here's how to do it from a browser: #### Step 1: Try it out Go to the [Buzzy Figma plugin page](https://www.figma.com/community/plugin/980407395621457657) in the Figma community and click the 'Try it out' button.

The Buzzy plugin is free to try.

#### Step 2: New Figma file opened 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.

Figma won't automatically run the plugin for you!

#### Step 3: 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.

Selecting 'Run' will open the plugin in the file you currently have open.

[Learn more about running Figma plugins here.](https://help.figma.com/hc/en-us/articles/360042532714-Use-plugins-in-files) ### Connect to Buzzy The first time you run the Buzzy Figma plugin, you will need to connect it to your Figma account.

Click connect, then allow access, and return to Figma. Simple.

#### Step 1: Click 'Connect' In Figma, run the Buzzy plugin (see above), and click 'Connect'. You'll only need to do this the first time you run the plugin, unless you sign back out. #### Step 2: Allow Figma access Figma will open a new browser window, asking if you want to all Buzzy access to your Figma files. Buzzy needs this to access your designs and generate your apps, so allow access when prompted. #### Step 3: Return to Figma A success screen will appear. That's it - simply return to Figma and your Buzzy plugin will be connected and running. (Hint: if the plugin appears stuck on a 'processing screen' after you return to Figma, simply close and reopen the plugin). {% hint style="info" %} #### OPTIONAL: Use your own OpenAI key You can speed things up by providing your own ChatGPT-4 enabled OpenAI key. Click the 'Settings' (cog icon) tab in the plugin and go to 'Manage OpenAI API key'. {% endhint %}

You can use your own OpenAI key - this could speed things up for you.

### Get a Buzzy AI-enabled toolkit **Important! 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 and designs automatically, it needs access to the AI-enabled Buzzy Figma toolkit.** These toolkits are available as Figma community files, and contain the framework and customisable Figma UI elements the AI will use to construct your app. There are 3 toolkits currently available at [www.figma.com/@buzzy](http://www.figma.com/@buzzy): [silver](https://www.figma.com/community/file/1237274431499559074), [light](https://www.figma.com/community/file/1237274363539357856) and [dark](https://www.figma.com/community/file/1237274412765124769).

Look for one of these 3 template files at https://www.figma.com/@buzzy

Select one of these toolkits from the [Buzzy Figma community page](https://www.figma.com/@buzzy), and click the 'Open in Figma' button at the top right. This will copy the chosen file into your Figma 'Drafts' folder, and open it for you. ### Using the Buzzy AI Assistant With your copy of a Buzzy AI-enabled toolkit file open, navigate to the page in the file called 'Your App Here' and open (run) the Buzzy plugin. 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.** #### Before you start Make sure you are in the page called 'Your App Here' in a Buzzy AI-enabled toolkit file. This is an empty page, but the file contains all the UI components and themes the AI assistant will use to generate your app. #### 1. Define a brief The app 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, open the Buzzy AI assistant panel. Enter a prompt into the AI chat to begin defining your app brief. The more detailed your prompt, the better the result. The AI assistant will define a brief for you, which will appear in the 'Brief' tab of the plugin. You can review this, and modify it as needed. 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. #### 2. Define your 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.ewwww The AI will attempt to define a 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. #### 3. Define your theme (coming soon) The theme tab is currently a placeholder - this will be where you'll be able to choose a prebuilt theme, or define your visual design parameters. For now, skip this tab. #### 4. Define your app design 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 first prompt the AI to define the app design via a button on this tab. This will determine the screens and interface items required for your app - but not yet render them. #### 5. Generate your screens Once the app design has been defined by the AI, you can generate the app screens via the button in the 'Markup' tab. This is where the AI uses the Figma components of the Buzzy toolkit (on the components page of the current file) 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. #### 6. Publish your app 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'. #### 7. Preview you app 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. #### 8. Optional: Generate sample 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. #### 9. Tweak your design At this point you should have: 1. A Figma file containing your app screen and interface elements, marked up with Buzzy functionality 2. A live, working web app, populated with example content for you to test From here on in, working with your app and the Buzzy plugin follows normal (non-AI) Buzzy patterns: 1. Edit the Figma design as needed - whether that's changing visual styles or design elements, or adding entirely new screens and functionality 2. Use the 'Markup' tab of the Buzzy plugin to define Buzzy elements, functionality and behaviours 3. Use the plugin's 'Publish' tab to re-publish your app {% embed url="" %} {% hint style="info" %} If you haven't already done so, you should work through the [Buzzy 'Getting Started' guides](https://www.buzzycompany.com/getting-started) - these include a simple set of beginner tutorial videos, as well a whole range more advanced videos discussing {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.buzzy.buzz/~/changes/02lTj7NawgoYKwTzc6Qz/buzzy-ai/getting-started-with-buzzy-ai.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.