Two Must-Have Figma AI Plugins to Transform Your Figma Workflow
Streamlining Your Design Workflow with Musho and UX Pilot in Figma
AI technology, especially AI-powered tools, is changing our design process. Chatbots like ChatGPT, Gemini, and Claude help us work more efficiently and allow us to think outside the box and come up with creative solutions.
Apart from these chatbots, many people and companies release customized products for specific tasks based on the generative AI models of these chats.
One effective way to see AI innovation is to use small AI tools and applications designed by individuals and small businesses rather than using known chats.
Because Figma has an excellent platform to run small software (or, in the most common words, plugins), the ability to see and touch this innovation is quite in the hands of every designer that works on Figma, so we can use these plugins from the Figma community to improve our workflow.
In addition, we can see how these products work and study from them how we can design AI experiences, which, from my point of view, will be the main user experience issues in the coming years.
In this article, I will discuss two Figma plugins, Musho and UX Pilot, that can assist in creating wireframes and screens with effective ux writing that meet your requirements so you can use them and streamline your workflow.
I will explain the plugins and, in addition, the tests I did with them so you can have a better understanding of their capabilities.
Musho
What the Musho plugin does
This AI plugin creates for your needs with GPT4 AI model 2 types of content: landing pages and social media material. In addition, it has an experimental section where you can create anything.
How does Musho work
Open it from the Figma plugins section, log in, and that is all; you are ready to work with it.
Select the output format (landing page, social media, or the experimental mode), write a prompt for the input text, and run it. Wait until the plugin finishes the work and you get what you requested.
Additionally, you can share the results with others because it creates a webpage with the results.
One test I did with it
I asked the plugin to generate a landing page for a Neapolitan Pizza.
This is the prompt:
Create a home page website for an Italian Neapolitan pizzaHere is the result:
Once the landing page is ready, you can iterate the UI design with the plugin. Select a part in the interface and ask to generate it.
You can ask to generate a new AI copy and a new image. In this example, I asked the plugin to change the title with the prompt:
Change the title to say we're the best Neapolitan pizza in town.
Here is the result:
I wanted to change the hero section with more specific requirements.
Here is the prompt I used.
Redesign the hero section with these requirements:
-The hero section must include an image, a title, and a button.
-The image must be the background of all the hero section.
-The title and the buttons must be on the left side of the hero, above the image.Here is the result:
I thought it followed my requirements so I could be more specific and get better results, but it did not meet my requirements, as you can see from the results in the image above. I also asked the plugin for a hero section using the experimental mode, but I got the same results.
More functions the plugin has
- Historial: It saves the prompts you asked for.
- Creates styles and variables: You can ask the plugin to create styles and variables during the process so that you can iterate faster.
- Easy share results: The plugin creates a web page for sharing the results after it generates the page.
Things I liked about this plugin
- Because It saves your history, returning to your previous prompts is easier.
- The fact that it generates the variables during the creation of the page is excellent because once it generates the variables, the process of making iterations with the results is much faster.
Pricing
- Free plan: 25 generations per month.
- $14.99 per month for unlimited generations (Annual plan).
Bottom line
It is a good design tool that allows you to generate ideas for a landing page for your project.
Still, it needs more configurations, like selecting a design style and making the iteration with the results easier, because writing prompts is not agile.
In addition, the results need to be more accurate to the requirements. I believe I could play with the plugin more and get better results, but from my point of view, the design and development goal here is to make the technology easier to control and much more accurate.
Because the product is very new, it is more than understandable that this is the current stage of it, and I believe it will be much better in the future.
Still, I suggest you use the tool to see how it works because this is how we will work in the near future.
🌟 Master AI Skills (Including ChatGPT) in My Forthcoming Training!
Attend my next online workshop to improve your effectiveness in product design using AI methods (featuring ChatGPT).
UX Pilot
What the UX Pilot plugin does
The Figma plugin UX Pilot is like having a “Swiss pocket knife” AI-powered plugin for product designers.
It has a Figma and FigJam plugin, where you can create diagrams, ask for a UX review, create workshops, synthesize information, cluster information, and more.
In this post, I will focus only on the wireframe feature that is in beta now.
How the wireframe feature in UX PILOT works
Open the plugin from the plugin section and log in.
Once logged in, click on the wireframe section in the plugin, select how many screens you want to generate, and select the AI model you wish to use. Then, write a prompt describing what you want, and the plugin will generate it.
As a general rule with artificial intelligence, it is always better to specify in detail precisely what you want to get more exact results for your needs. For example, if you want to create a hero section, explain that the hero must include a title, image, and a button.
Currently, you can generate only web apps, but soon, you will be able to choose between a web app, mobile app, and landing page.
One test I did with it
Because the plugin generates wireframes and not high-fidelity screens, I wanted to test if I could create an application.
When we talk about apps, it is better to focus on the structure than the details in the first stage, especially in complex apps. Starting with a low-fidelity screen makes the process more focused.
Here is the prompt I used:
Create a recipe-sharing platform: A website where users can discover, share, and save recipes, as well as interact with a community of other food enthusiasts.Here is the result:
It generated three options for me: two were good to start working with, and one could have been better, so I generated another one to have another option, which worked well.
The AI can get confused when it performs a difficult task. It also happens with other AI models I tested, but it will be solved in the future.
I couldn’t copy and paste what it made, but only the fact that it created all the assets can save so much time in “Moving rectangles on the interface,” it is also a great use case for the plugin.
Then, I wanted to discover if it could make a filter section, so I wrote this prompt and asked it to generate one option:
I design a recipe-sharing platform: A website where users can discover, share, and save recipes.
Create for me a filter section. The section must include:
-Cuisine Type Filter: One select component or checkboxes for selecting cuisine types (e.g., Italian, Mexican, Chinese).
-Dietary Restrictions Filter: Filters for vegetarian, vegan, gluten-free, etc.
-Ingredient Exclusion Filter: Text input or selection mechanism to exclude specific ingredients.
-Cooking Time Filter: Slider or one select component for cooking/preparation time ranges.
-Difficulty Level Filter: Selection for recipe difficulty (Easy, Medium, Hard).
-Meal Type Filter: Checkboxes or one select component for meal types (Breakfast, Lunch, Dinner, Snack).
-Calorie Range Filter: Slider or input fields for specifying a calorie range.
-Rating and Popularity Filter: Options to filter by user ratings or popularity.
-Technique or Equipment Filter: Filters for cooking techniques or specific kitchen equipment are required.Here is the result:
The result was what I asked for, with all the input types as I wished, but I made some mistakes in the prompt where I did not specify the exact input type, so it got confused, for example here:
Meal Type Filter: Checkboxes or one select component for meal types (Breakfast, Lunch, Dinner, Snack).It generated input for each type of meal, but I needed to be more accurate and say only checkbox or select component.
I rewrote the prompt, made it more precise, and reran it.
I design a recipe-sharing platform: A website where users can discover, share, and save recipes.
Create for me a filter section.
The section must include:
-Cuisine Type Filter: One select component for selecting cuisine types (e.g., Italian, Mexican, Chinese).
-Dietary Restrictions Filter: One select component for vegetarian, vegan, gluten-free, etc.
-Ingredient Exclusion Filter: Text input to exclude specific ingredients.
-Cooking Time Filter: One slider component for cooking time ranges.
-Difficulty Level Filter: One select component for recipe difficulty (Easy, Medium, Hard).
-Meal Type Filter: Checkboxes for meal types (Breakfast, Lunch, Dinner, Snack).
-Calorie Range Filter: One slider component for specifying a calorie range.
-Rating and Popularity Filter: Checkboxes to filter by user ratings or popularity. Use five levels.
-Technique or Equipment Filter: One select component for filtering cooking techniques.The results were what I asked for, but changing the artboard size was necessary.
I wanted to see if the plugin could be more precise and generate the menu with the exact size that I gave it, so I added to the prompt that the menu must be a side menu and up to 320px in width, and I want to see what it will look like.
I added to the prompt:
-Generate only the filter section.
-The filter section must be 320px in width.Here is the result:
It created the sidebar but not with 320px; I think it is because the default of the web app generation is 1440px, but in any case, in two clicks, I set it to 320px, so it is no big deal.
Things I liked about UX Pilot
- It gives you many ideas in one click, so you can generate more ideas and discover the design faster.
- The fact that it generates wireframes makes the process easy because you can focus only on the screen structure.
- Organize the information I asked for easily. If you know more or less what you need, it is better to ask the plugin to do the job than to waste time moving rectangles in Figma.
- Simple wireframe design. (It is not handwriting style).
- It understands the details well so that you can be specific with it.
Pricing
- Free plan: Generating workshops, Diagrams, Flowcharts, and Stakeholder interviews.
- The paid plan costs $6 per month (yearly subscription) and includes, in addition to the free plan, user interviews, Design review, Unlimited UX templates, 11 AI tools in Figma/FigJam, a wireframe generator, and more.
Bottom line
The plugin is a great choice. Instead of spending hours making wireframes, you can create them quickly with just one click. In addition, you can explore various design ideas to accelerate the UX design process.
Even though it didn’t do everything I wanted it to do perfectly, it came close, and the team will likely fix these problems (after all, it’s still in beta).
Connecting a Figma UI kit to the plugin in the next versions can be a great way to convert wireframes into high-fidelity screens with just one click to accelerate the design workflow.
To summarize
In this article, I showed you how to work with two Figma plugins that generate wireframes and screens with AI.
The first plugin we looked at was Musho, which is more suitable for landing pages and can generate landing pages with images and add text based on a prompt. We used it to create a landing page for Neapolitan pizza and then made several iterations with the results.
Next, we explored UX Pilot, a tool with AI features beneficial for UX designers. We focused on the wireframe feature, showing how it operates and helps in designing complex apps. After creating the recipe app with it, we made several iterations.
Read more about AI from my blog
🚀 Boost Your Efficiency: Uncover AI Techniques (Including ChatGPT) in My Upcoming Course!
Join my upcoming workshop to elevate your productivity as a product designer, learn AI techniques (including ChatGPT), and explore essential AI tools.
Thank you for reading the article. I hope this article helped you understand how to work with Musho and UX Pilot. 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 so you’ll receive an email whenever I post.
You can also follow me on Linkedin, where I share tips several times a week.
