iTranslated by AI
The Era of AI-Generated Design: A Hands-on Review of Figma Make
I finally had the chance to try out Figma Make, which I had been curious about.
Having had the opportunity to use it in a real project, I will summarize my thoughts on the user experience and how it differs from traditional Figma.
What is Figma Make?
Figma Make is an AI-powered design assistant tool provided by Figma.
Other tools in a similar vein include v0 by Vercel.
By inputting prompts (instructions) via an AI chat, it automatically generates UI designs.
Since the generated designs can be exported as code, a key feature is the ability to quickly build prototypes when creating mockups or exploring design directions.
What I Made Individually
I started using it at work, but I also experimented with it for personal use.
I based my experiment on a household account book app that I've been working on recently.
Since the components used in the generated designs are often pre-determined, the output is similar to other AI coding agents. It might be interesting to try out various CSS frameworks in this context.
Impressions After Using It
The first thing I noticed when using Figma Make was that the abstraction level of design instructions is quite high.
There were many instances where inputting abstract prompts resulted in the layout not being generated as intended, or it was difficult to get close to the design I envisioned.
This is because, to control the design in detail, you need to provide specific CSS-like instructions, such as "position this X px to the left" or "use a user icon for this decoration."
In the first place, design belongs to a "domain that is difficult to verbalize," closer to an image in the brain.
Having worked in frontend development for a long time, "mental markup" has become more of a physical sense than mere thought.
It is a feeling where your hands naturally move, thinking, "I would use this property for this layout."
As someone deeply trained in mental markup, I struggled with the verbalization (layout context) required for detailed design control.
While rough design control is possible, giving instructions for fine details felt difficult.
I felt that engineers who have the ability to translate designer intentions into CSS and HTML might find that their sense for prompt engineering is also tested.
Ultimately, I felt that Figma Make is not so much a tool where AI generates designs, but rather a tool to test how well you can convey the design in your head through words.
How to Use It at the Current Stage
Since AI tools are evolving daily, I believe that even if things don't work well now, they will improve eventually.
With that in mind, I have organized my thoughts on how to use Figma Make at its current stage.
At this phase, I get the impression that it is difficult to incorporate it directly into production product design.
I felt that a realistic workflow is: create a mockup to solidify the direction, refine it, convert it into code, and finally perform refactoring.
Also, the generated design is not structured in a hierarchical way like atomic design; it is output in component units.
Therefore, I think the most practical approach is to utilize AI coding agents or similar tools to refactor the code after it has been generated.
Suited for 0→1 New Projects
As you might expect, my impression is that it is difficult to introduce this into products that are already in the maintenance phase.
Even for the process of creating new components or designs, the scenarios where Figma Make can be highly effective seem limited.
For existing products, there are many pre-existing rules such as design systems and guidelines, so I felt that building based on those requirements is difficult with the current version of Figma Make.
On the other hand, it seems to be useful to some extent for generating or verifying individual parts.
However, even in that case, I felt that building by combining existing parts through AI-driven development is more practical and effective.
Instant Idea Generation
A major feature of Figma Make is that it allows you to create prototypes instantly.
I benefited significantly from this.
While AI coding agents offer similar effects, Figma Make's strength lies in its ability to express areas that are difficult to verbalize when communicating with team members, POs, and CS staff through design.
For example, while it usually takes half a day to build a UI, for phase 0 projects, you can generate a fairly well-organized prototype in about an hour, which drastically reduces the workload in terms of speed.
Furthermore, I found it extremely convenient that even idea-level concepts can be instantly turned into a tangible form to receive feedback.
On the Generated Code
The code generated by Figma Make appears to be React-based.
Even when I tried specifying "Next.js" in the prompt, it actually generated a Vite-based React project.
This suggests that, at least for now, code generation based on React is the default specification.
On the other hand, support for other frameworks like Vue feels difficult at the moment.
While this might be achievable in the future through updates or specific prompt instructions, at the very least, I felt that it is realistic to limit its use to "quickly testing functional design mocks."
Utilizing the Publishing Feature
Figma Make has a feature that allows you to publish the generated app directly in the browser.
For one-off projects such as personal development apps or landing pages (LP), I felt that being able to deploy them as-is is extremely effective.
Similar to Studio | No-code Web Production Platform and other no-code tools, the ability to immediately publish AI-generated designs is convenient.
Assuming Refactoring for Product Development
On the other hand, in product development, integration with infrastructure and backends is a prerequisite, so my impression is that it is difficult to use the generated code as-is.
Typically, you need to follow a workflow like this:
- Download the output code
- Adjust it to fit your local environment
- At this stage, it is also possible to ask AI for assistance in organizing files.
- Resolve errors
- Humans must verify necessary fixes, such as adding
use client.
- Humans must verify necessary fixes, such as adding
- Refactor
- At this point, the scope of Figma Make ends
- Therefore, it is realistic to have Figma Make generate in small component-level granularities and combine them in the actual code.
When incorporating it into a product, the steps of adjusting generated code and refactoring are essential.
The Importance of Requirements Definition
When using Figma Make, as with AI-driven development, prior requirements definition is extremely important.
If you don't clearly define what you want to build and the direction of the design rather than just providing a prompt, you will waste time on unnecessary adjustments and design trial and error.
Even at the prototype creation stage, meticulous requirements organization is the key to efficient utilization.
Providing Small Instructions
I found that, like other AI agents, Figma Make works with higher precision when you provide small instructions one by one.
If you give a large instruction at once, the design may break unintentionally.
Therefore, the more smoothly the work is progressing, the more effective it is to build up the generation by providing small instructions, without collapsing the design significantly.
Conclusion
Figma Make is a tool that supports the generation of UI designs and components by leveraging AI.
My impression after using it is that, while it is currently difficult to fully utilize in the maintenance phase of existing products, it is quite effective for new projects and prototype creation.
What was particularly striking is the point that Figma Make is not just a tool for generating designs, but a tool that tests "how well you can verbalize and convey the image in your head."
Having been involved in frontend development for many years, I realized that "brain-level markup" is ingrained in my body, and I found myself giving prompts with a coder's mindset.
Current Best Practices for Utilization
- Suitable for mockup creation at the level of personal development apps or landing pages.
- For product development, it is necessary to download the generated code and adjust and refactor it to fit your local environment.
- A realistic workflow is to have Figma Make generate in small component-level granularities and combine them in the code.
- Just like with AI coding agents, conducting thorough requirements definition is the key to efficient utilization.
As AI tools are expected to continue evolving, it is highly likely that issues encountered this time will be resolved in the future.
At present, I feel that utilizing it in the 0→1 project or prototype creation phase is the most effective approach.
Discussion