Two Figma AI Plugins Every Designer Should Know
Unlocking Design Potential with a Deep Dive into Figma AI Plugins Wireframe Designer & Magician
There is one phrase that I have heard many times in the last six months, and it is:
“The AI will not replace you, but the people who know how to use AI will replace you.”
We cannot predict what will happen with AI or how it will precisely change how we design products.
However, we will increasingly see AI integrated into our tools to facilitate our work, especially for repetitive tasks and fast inspiration that AI can surely help us.
In this blog post, I would like to delve deep into two Figma plugins that utilize AI to enhance our productivity at work. The first Figma plugin is Wireframe Designer, and the second is Magician. Let’s begin.
The AI plugins will do some work but not all of the work
One important thing to know about AI tools is that they can only do some work for us.
Almost any AI tool can do good work for us, but we cannot trust them to execute work and provide results we can copy and paste.
In most cases, we must make changes and tweak the results to fit our needs. So, even though AI is a powerful technology, you cannot just copy and paste the results; you need to review the results and work on them before delivering them.
If you don’t, the company doesn’t need you. Anyone can ask the machine to work, but a designer’s role is to critique and improve the AI’s work.
Wireframe Designer
What this AI plugin does
It helps users create wireframes directly from text prompts.
How does the Wireframe Designer plugin work?
Opening the Plugin: Start by opening it from the resources on Figma’s top bar, click on it, and run it. You can also open it from the Figma community.
Settings & Customization: Before jumping into design generation, you can define your settings for better accuracy.
This includes choosing the platform (mobile or desktop) and providing context. An example context might be: “The application is a mobile app
designed to manage the finances of young students. The target users are college and university students.”
Writing Prompts: You can write your prompts on the main screen. A prompt might look like this: “Please design a dashboard page
that allows users to monitor their monthly income and keep track of their expenses.”
Generating the Wireframe: Once you have written your prompt, click ‘design.’ The plugin will provide a wireframe in less than 10 seconds.
However, it’s essential to remember this generated wireframe serves as an inspiration point. Always consider it a starting point rather than a final output. The generated wireframe requires tweaks to align with your design vision.
Post-generation Edits: The tool does not create individual components, color tokens, or styles for you. You’ll have to set them up manually.
Pricing for the Wireframe Designer plugin
Initial Free Usage: You’ll have ten free wireframe generations upon your first engagement with the plugin. This is an excellent opportunity to test the plugin, understand its capabilities, and decide if it aligns with your design needs.
Subscription Model: If you find the plugin beneficial and wish to continue using it after the initial free ten generations. You can get unlimited generations and better results for $5 a month.
Bottom line
The Wireframe Designer is an excellent tool for designers who need a starting point or quick inspiration to create wireframes quickly. It speeds up the initial stages of the design process.
Magician
What Does the Magician plugin do?
The Magician is a comprehensive AI Figma plugin to streamline the design process. It understands user prompts and can generate assets such as icons, copies, layer names, and images.
This means less manual work for designers and a faster turnaround in creating mock-ups, prototypes, or final designs. Whether you need a catchy headline, a unique icon, or a placeholder image, Magician is your go-to tool within Figma.
How does the Magician plugin work?
Opening the plugin
Click it in the resources on Figma’s top bar, go to the plugin tab, search, and run it.
The plugin has four different tools
Magic Icon
This icon tool can create icons based on a prompt. You can add a simple prompt like “car,” but you can also add some instructions on the style. For example, if you want to create an outlined car icon, simply type “car in outline style,” click generate, and it’s done! You now have your icon.
From the tests I conducted it doesn’t give 100% accurate results, but it’s a quick way to get design inspirations or draft options.
Magic Copy
The Magic Copy tool is an AI text generator for your design. It includes two options. First, you can write a prompt and get some results.
For example, you can ask it to write a CTA for a button you will use on your donut shop website. But the more exciting option is to select a text layer and ask for alternatives.
You select a text layer and choose from 5 options: alternatives, Translate, Fix grammar, Summarize, and Explain like I’m 5.
Click on edit, and The app will generate the results for you. Once you find a good result, click on the result, and it will add the selected suggestion to the text layer. It is a great tool to improve the UX writing in your app.
Magic Rename
With Magic Rename, you can rename your layers in a fast manner. This allows you to change generic names like “Frame 1” or “Frame 2” into more accurate ones with just one click.
It’s important to note that selecting too many layers together can make it difficult for the plugin to rename them all. Therefore, choosing fewer layers and running the plugin is recommended.
While it is true that renaming layers is not necessary anymore, there are times when it can be helpful, especially when creating components.
Magic Image
As the name suggests, this feature generates images based on prompts. While it might only sometimes produce the best image for every prompt, it’s a quick way to get placeholders or design inspirations without leaving Figma.
Pricing for the Magician plugin
One of the benefits of the Magician plugin is that it is free, allowing designers to experience the plugin.
More Info About the Plugin
Figma announced in Config 2023 that they acquired Diagram, the company behind the Magician plugin.
In addition to the Magician plugin, Diagram has three more AI Figma plugins.
- Automator: As the name suggests, Automator is all about efficiency. It allows designers to execute design-related tasks in Figma using just a single click.
- Genius: This design tool is still in development but promises to produce fully-editable UI designs from just a basic product description.
- UI-AI: This plugin integrates AI with design, harnessing advanced AI and creative prompts to produce design assets. However, this plugin is not yet available to the public.
Bottom line
The Magician is a great plugin for every designer because it covers many aspects of the design process, including copy, icon creation, Figma design file organization, and image generation.
As I always mention, remember to use it as a helper in your design process rather than as the final result.
To summarize
In this article, I deeply explored the world of Figma AI plugins, specifically spotlighting Wireframe Designer and Magician.
Through hands-on exploration, I demonstrated these AI-powered Figma plugins’ unique features and capabilities. But beyond just features, I delved into real-world applications, showing how these plugins can change the design workflow for product and user experience designers.
👉 Want to take your Figma skills to the next level?
Get one-on-one tutoring with me! Whether you’re a beginner or looking to refine your skills, I’ll work with you to help you gain confidence and improve your Figma skills.
Ready to take the first step? Let’s get started!
Thank you for reading the article. I hope this article showed you how to use Figma AI plugins to speed up your design workflow. 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.
