Figma Make

Figma Make is Figma’s prompt-to-app builder that turns a short description (or referenced frames) into an interactive prototype or working web app — without leaving Figma. As part of Figma AI, it brings AI with Figma directly into your design workflow so designers and developers can explore ideas faster, validate flows, and publish sites when ready.

What you can build with AI in Figma

• Interactive prototypes for user flows you can click, test, and iterate on.
• Working apps that read/write data when you connect Supabase for auth, database, and storage.
• On-brand UIs that follow your design system using style context from a Figma Design library.

How Figma Make works (designer + developer loop)

1. Prompt: Describe what you want (e.g., a team directory with search and filters). Make scaffolds UI, content, and basic behavior.
2. Apply style context: Export your Figma Design library once; Make extracts tokens and CSS so generations match your typography, color, spacing, and radii.
3. Guide the generator: Add rules in Guidelines.md (layout conventions, component usage, naming, tone). Make uses these constraints during generation.
4. Edit and refine: Inspect the generated project in code view, tweak copy, images, spacing, or structure, and re-prompt to iterate.
5. Add a backend (optional): Connect Supabase to enable authentication, tables, storage, and private API calls for realistic data-aware demos or internal tools.
6. Publish or share: Use Figma Sites to customize frames and publish, or share privately for feedback and testing.

Key features (user-facing)

• Prompt-to-app generation with iterative prompting and direct editing.
• Design-system fidelity via style context export; Make writes global CSS you can inspect and adjust (for example, styles/globals.css).
• Guidelines.md for enforceable rules and defaults (responsive layout patterns, component caps, naming).
• Supabase integration for auth, Postgres, storage, and secure APIs.
• Figma Sites support to customize frames and publish a live site.
• Seat-based access with AI credits; Full seats unlock higher limits and publishing.

Access, plans, and AI credits

Figma Make is generally available as part of Figma AI. Access and monthly AI credits vary by seat: Full seats on paid plans get higher limits and publishing; Starter, View, Collaborator, and Dev seats can explore in drafts with lower limits. Credit policies may evolve as paid top-ups roll out.

When to use Figma Make

Use Figma and AI together to quickly prototype, get stakeholder buy-in, and de-risk flows before you invest in detailed design or production code. Community feedback highlights Make’s strength for rapid prototyping and realistic demos; production apps may still require code cleanup and engineering standards outside of Make.