Figma Make Hands-On: Strengths, Weaknesses, and Surprises

Summary

In this video, the reviewer explores Figma Make, Figma's new tool for translating designs into functional web applications, competing with vibe coding platforms like Lovable and Bolt. They test importing a Figma frame, generating a fully functional AI chat app using Claude 4, and editing UI elements with prompts. The tool impresses with high design fidelity, code access, and guided backend setup via Superbase. While minor UI tweaks and developer input are still needed, Figma Make offers a strong head start for designers aiming to convert polished designs into web apps, bridging the gap between design and development with notable accuracy and efficiency.

Takeaways

• 😀 Figma has launched Figma Make to compete with vibe coding tools like Lovable and Bolt.
• 😀 Figma Make allows direct import of Figma frames, preserving layout and design accurately.
• 😀 The tool uses Claude 4, providing reliable AI-driven code generation.
• 😀 Figma Make benefits from understanding Figma’s native structure, including auto layout and components.
• 😀 Backend integration prompts, such as setting up Supabase, are proactive and help manage persistent data and authentication.
• 😀 Design fidelity is very high, though minor UI adjustments like borders and text styling may still require manual edits.
• 😀 The tool works best when the design is mostly complete; ongoing edits in Figma are not fully synchronized.
• 😀 Editing capabilities include adjusting properties, styling, and reviewing generated code with reasoning context.
• 😀 Figma Make is more suited for dynamic web applications than static marketing websites.
• 😀 It provides a strong head start for developers, but full integration and functionality still require developer involvement.
• 😀 Designers can use Figma Make to rapidly prototype applications with accurate visual and structural fidelity.
• 😀 Compared to Lovable and Bolt, Figma Make offers better design-to-code conversion and deeper code access.
• 😀 Free plan usage is limited but provides a good introduction to the tool’s capabilities.
• 😀 Overall, Figma Make is impressive for design-centric workflows but has room to grow in automation and real-time updates.

Q & A

What is Figma Make and what tools is it competing with?

Figma Make is Figma's new tool designed to convert Figma designs into functional web applications. It competes with vibe coding tools like Lovable, Bolt, Replet, and Cursor.

How does Figma Make handle importing designs from Figma?

Figma Make allows users to copy frames from Figma and paste them directly into the tool. This integration is smooth, and the tool accurately preserves layout, colors, and styling due to Figma's native understanding of component structures.

Which AI model does Figma Make use for code generation and reasoning?

Figma Make uses Claude 4, an AI model capable of reasoning and generating accurate code based on the imported Figma designs.

How well does Figma Make replicate the original Figma design?

The tool replicates the original Figma design very accurately, including layout, color themes, and spacing. Minor issues, such as overflow or slight UI inconsistencies, may appear but overall it maintains high visual fidelity.

Can Figma Make handle backend integration?

Yes, Figma Make can integrate with Supabase to provide backend functionality such as persistent storage, user authentication, and AI API integration. The tool guides users through the setup process.

What types of projects is Figma Make best suited for?

Figma Make is best suited for dynamic web applications that are complex and interactive, rather than mostly static marketing sites, which are better served by tools like Figma Sites.

What limitations does Figma Make currently have?

Limitations include minor UI/UX inconsistencies, a disconnect between ongoing design updates and reflected changes in Figma Make, and the need for developer input for full integration and complete app functionality.

How does Figma Make compare to other vibe coding tools?

Compared to tools like Lovable and Bolt, Figma Make produces more accurate and visually faithful representations of Figma designs and provides better reasoning about code and backend setup, giving it an edge for designers.

Does Figma Make allow editing elements directly within the tool?

Yes, basic editing features such as changing borders, spacing, hover states, and selecting elements are available. It also provides code reasoning and shows the underlying code for edits.

Who is the primary target audience for Figma Make?

The primary target audience is designers who want to quickly convert Figma designs into functional web apps, providing a head start for developers to handle integration and backend work.

Does Figma Make provide access to design systems or libraries?

Yes, it can bring styling context from component libraries into Figma Make, which helps maintain consistency across multiple products or suites of applications.

What is the role of the AI reasoning data shown in Figma Make?

The AI reasoning data helps users understand how the tool is interpreting design elements, code structure, and backend requirements, providing transparency and insight into generated outputs.