Discover Buzzy: The AI-Enhanced no code Figma Design Plugin That Transforms Text into Apps

I usually write in my Medium blog weekly about product design (especially about Figma, design systems, and AI). This time I wanted to test something different and write here in Linkedin a blog post.

Six months ago, I started delving more deeply into AI tools. Despite having used these tools for more than 2.5 years, in the last six months, I have been exploring how they can be integrated into my daily job.

Because I am searching for how designers will work in the future and I aim to enhance my design workflow and efficiency, I decided to test various apps, Chrome extensions, and the best Figma plugins powered by AI.

While there are many tools for writing text (ChatGPT, Wordtune) and creating images (stable diffusion, Midjourney, Dale-e), it's hard to find ones that make screens.

As part of my search, I found a? Figma plugin called Buzzy. It has caught my attention because it combines many AI options I could not find in other apps.

I got an invitation after registering on the waitlist, and in this article, I share my viewpoints and experiences with Buzzy. I will highlight how this AI-Figma design plugin works and how it streamlines our UX design process.

You will find a full video at the end of the article that shows all the processes.

Let's take a closer look at it.

Here's what Buzzy is and how you can use it.

Buzzy is an AI Figma plugin that allows product designers to transform text into fully functional applications without coding knowledge quickly.

Because of this ability, designers can easily create full applications, visual screens, and live prototypes based on a UI design kit!

So you make your UI kit in a Figma file, and the plugin takes the text styles, color styles, and components and turns them into a functional app.

Honestly, it's amazing.

What are the benefits of working with Buzzy For Figma users?

• Create a brief with the AI: The plugin allows you to type what you need in the chat and generate a brief. Before generating the screens, you can adjust and fine-tune the brief to fit your requirements.

• Direct integration with the design system: The plugin transforms your entire design system UI kit into a real app, bridging the gap between design and development. This ensures the design work is very close to the final result, making iterations and adjustments much more efficient. Additionally, every design system UI kit change is automatically reflected in the app. This eliminates the need for manual updates and reduces the risk of inconsistencies between design and development.

• No more prototypes to test the real product: In the past, we needed to create wireframes or high-fidelity prototypes in Figma and manually connect screens, which only gave us something representing the final product. Now, with Buzzy, this is no longer the case. The plugin creates a functional app for you, allowing you to test the actual product and rendering traditional prototypes obsolete.

• No coding is required, just logic building: you can build the app functionality without coding knowledge. Although it might take some time to understand the logic-building process initially, you can work quickly after understanding it.

How to use the plugin

1. Connect Buzzy to Figma

First, you need to connect Buzzy to Figma. To do so, follow these steps:

1. Run the plugin: You must open the Buzzy plugin from the Figma resources tab and follow the on-screen instructions to connect.
2. Add your OpenAI API key: You need an OpenAI API key. You can generate it from the OpenAI website if you don't already have one. After you have the API key, enter it into the settings in the plugin. Once pasted, you can begin working.

2. Copy a design system UI kit for the buzzy page in the Figma community

Buzzy simplifies the design process for your app by leveraging the UI design from the Figma UI kit. This approach makes generating designs easy because the tool understands how to construct the design directly from Figma.

The easiest way is to copy a Figma component UI kit from the Buzzy page in the Figma community.

To do so, navigate to the Buzzy page on the Figma community and copy one of the UI kits available. Then, open the copied file and run the plugin.

Be aware that you can change the styles in the UI kit to fit the UI design of your app.

3. Generate a brief

To explain to the plugin what app we want to create, we should write a brief, exactly how we do it in our job today. You can write the brief manually from the brief tab in the app, or you can open the chat, provide it with some instructions, and ask it to generate the brief for you.

If you work with the AI chat, you can save time. You can review the generated brief and add additional instructions if necessary.

Here is how to generate a brief from the chat:

1. Open the Buzzy plugin within Figma and navigate to the chat section.
2. Type a detailed description of the application you want to create. For example, Imagine you're going to design a menu app for a coffee shop and provide information about the sections, types of food and drinks, sub-categories, and any other relevant details. Be specific about user roles, such as viewer and editor, and their respective functions within the app. As with all AI tools, the results will be better if the prompt is more accurate.
3. Copy and paste your brief into the chat window and hit "Send." The AI will analyze the provided information and generate a brief based on your input.
4. Review the generated brief and make any necessary adjustments to ensure it meets your requirements.

Here is a sample prompt you can use.

"Write a brief for an app that works as a menu for a coffee shop.

Include this information:

The app has five main sections for the types of food and drinks it offers (toast, Bagels, Bowls, Coffee, and Fresh fruit juice).?
Two different sub-categories: one for food (toast, Bagels, Bowls) and one for drinks (Fresh fruit juice).?
In the sub-category, the app shows the drink name and price?
In the sub-category of food, the app shows the dish name, more information, price, and extras.?
The app has two types of users viewer and editor."?        

4. Review the description and generate a data model

Once you review the description, you are ready to generate the data model for your app.?

The data model step is essential when you decide how your data will be organized in the app. A data model shows how different pieces of information relate to each other and the rules for how they work together.

Once the brief is ready, navigate to the Model section and click "Generate data model." You can fine-tune the structure manually after the plugin generates all the structure.

If you have never built an app with a no-code tool, this step might be new to you, and you will need to study it. It is not difficult, but you need to understand how to make it work.

5. Review the markup and generate the screens

After generating the data model, move to the markup section and review all the information you created; you can make any necessary adjustments to ensure it meets your requirements. For example, you can change the responsive design information (Min width, Max width).

Once satisfied with the markup, you can generate the app's screens by clicking the "Generate Screens" button. This process uses your UI kit and applies the design system directly to the screens, ensuring consistency and accuracy in the design and the real app.

6. Look over the generated screens and publish the app

After successfully generating the screens, look at the Figma interface and witness the magic. All the screens are generated effortlessly, allowing you to test them quickly.?

Now it's time to publish the app. With Buzzy, traditional prototypes are unnecessary, as you can directly test the real app.

To publish your app, copy the link to the Figma page, navigate to the Publish tab, paste the URL, and click the 'Publish' button in the plugin interface.?

Once the app has been generated, click 'Generate sample data' to populate it with real data. Now you are ready to test it.?

Click on 'View in live mode' and experience the live product!

7. Make adjustments

When using the app, you will notice that you may need to make adjustments and fix issues in some places, as always in creating everything, to achieve great results.

Fine-tuning is necessary, and you may need to change colors, typography, or play with logic. So remember it may be needed.

How Buzzy plugin can help you in the design process

After looking at how the plugin works, I want to give some ideas about how it can help you.

Building an affordable MVP

Entrepreneurs often struggle with the costs of hiring developers to create a Minimum Viable Product (MVP) for testing their assumptions. Buzzy offers a solution to this problem by allowing users to build a functional, no-code app without developer assistance. This cost-effective approach can help entrepreneurs test their ideas and gather valuable user feedback with minimal investment.

Making traditional prototypes obsolete

With the plugin, designers can create real, functional apps that render traditional prototypes unnecessary. The plugin allows designers to work on actual products, ensuring a seamless transition from design to development. This saves time and effort spent creating and connecting screens in Figma and provides a more accurate representation of the final product.

Creating and selling products

Buzzy also enables designers to create and sell products, such as a menu app for restaurants or coffee shops. You can quickly generate functional apps tailored to specific industries or niches by leveraging the plugin's capabilities. This offers new opportunities for generating revenue and showcasing design skills, especially in today's economy, when many designers are laid off. For example, you can create a menu app with the tool and sell it to all the restaurants in your city.

Two more Points to Mention

Before summarizing this article, I want to mention two significant points.

• You need to understand the technical aspects: To maximize the Buzzy plugin's benefits, studying its technical aspects is essential. While you don't need coding knowledge, you'll need to configure the logic behind the app's functionality. Learning the logic-building process will help you create more sophisticated applications and use the plugin's features more effectively.

• Access through wishlist registration: Access to this plugin is only open to some, and you must register for the waitlist.

Check out this video tutorial

Here is a video tutorial that shows you how to do all the process

To summarize

In this article, I explained Buzzy, a Figma AI plugin that helps you create a functional app fast and easily.

I talked about the plugin's benefits, such as streamlined design workflows, direct design system integration, and the lack of relevance of traditional prototypes when working with it. I also provided a detailed, step-by-step guide on using Buzzy to create an app. I explored various use cases for the plugin, including building affordable MVPs and creating and selling niche products.

Ultimately, we reviewed important points to consider when working with it and watched a video showing the app-creating process.

?? Learn AI for Product Design: Enroll in my Upcoming Course

In this context, I would like to mention that I plan to launch a workshop in the near future showcasing different uses for AI writing and image generator tools.

If you’re interested, please enter here.

Thank you for reading the article. I hope the article helped you understand how to work with the Buzzy plugin and how it can help you. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.

If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.