# Figma Make

> Prompt-to-app inside Figma. Generate and refine functional prototypes or web apps, apply your design system’s styles, connect a Supabase backend, and publish via Figma Sites.

**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.

## Features
- Prompt-to-app generation for prototypes and web apps
- Style context import from Figma Design libraries
- Guideline-constrained generation (guidelines docs supported)
- Edit and fine-tune generated UI (copy, images, spacing)
- Supabase integration for auth, data, storage, and private APIs
- Works with Figma Sites for frame customization and publishing
- Code view with generated project structure (e.g., styles/globals.css)
- Seat-based AI credit system; higher limits on Full seats

## Integrations
Supabase, Figma Sites, Figma Design Libraries

## Platforms
WEB, MACOS, WINDOWS

## Pricing
Subscription-based

## Links
- Website: https://www.figma.com/make/
- Documentation: https://help.figma.com/hc/en-us/categories/31304285531543-Figma-Make
- EveryDev.ai: https://www.everydev.ai/tools/figma-make