Figma Make is a new AI-powered design tool that allows you to turn your text prompt into a real design. In this guide, I will show you how to use this tool and explain its strengths and weaknesses.
How it works
All you need to do is to write a prompt and submit it to Figma Make AI assistant. It will analyze your prompt and generate a design for you.
Figma Make uses Claude Sonnet 4, the most sophisticated LLM for code generation at this moment. And this model also works pretty well for design generation.
I found 3 ways to generate design:
1. Prompt + visual reference
You can write a prompt that explains what you want to see and attach a screenshot of a page you want Figma Make to use as a reference or an image of a product/service you want the tool to integrate into your design. In the example below, I provide an example of a prompt that asks an AI assistant to use it in design of a landing page.
This approach works best for early design exploration when you are still exploring different options and want AI to generate various ideas. Below is an example of the UI that Figma Make generated for this prompt.
2. Detailed prompt
When you have a clear idea of what you want to build, you can provide a detailed prompt for Figma Make. Detailed prompts typically cover five areas — Context, Description, Platform, Visual Style, and UI Components. I’ve explained how to write such prompts in this article:
How to write better prompts for AI design & code generators
Here is an example of a prompt for a landing page for a well-being service.
Below, you can see a preview of the design that Figma Make generated for this prompt (hero section). The hero section aligns with the instructions provided in the prompt.
3. Attach design generated in Figma
Lastly, you can attach the design generated in Figma. This approach is great when you want to turn your Figma design into code or want to introduce changes to the layout (such as adding new UI elements) & turn design into code.
Click on this option, and Figma will open a dialog window that will allow you to select your design.
Once you select your design, you can provide a prompt such as the one that I have in example below (add new UI element).
The great thing about this approach is that Figma uses all visual styles and layout properties when turning your design into code. So the output generated by Figma Make will be quite close to your original Figma design.
Figma Make advantages
Utilizes design attributes
The major advantage of Figma Make is that it can utilize all visual attributes from Figma file when turning design into code. Not only typography and colors but also spacing (and especially auto-layout) are used to create a nearly identical copy of your design.
Can create complex interactions
The design that Figma Make generates always has interactivity. In the examples that I’ve shared above, Figma Make adds hover effects. But it’s possible to use Figma Make to generate advanced web prototypes such as 3D Fantasy Games (sharing the link below)
Figma Make limitations
Visual defects
Figma Make is in beta, so it’s expected to see some minor issues when using it. One of the most common problems that I’ve encountered was a problem of visual defects (such as incorrect contrast ratio). For example, in my first example, you can notice that there is not enough contrast for the secondary label. Many times, you can fix such defects by writing a follow-up prompt to an AI assistant.
Memory problem
When iterating your design, Figma can easily override previous design decisions. For example, when you fix a color contrast for the button label in one prompt and in a second prompt, you will ask Figma Make to introduce a change to the design (i.e., add a new section), it can introduce this change, but override the previous fix.
Figma Make generates only web design
Any attempts to generate a mobile design with Figma Make will lead to the generation of a hybrid design (something in between desktop and mobile design). For example, below, you can see an output of Figma Make for generating a mobile design for well-being service.
Figma Make: Complete Guide was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.