Figma Make

Figma Make is strongest when your product idea already has a Figma frame or design system behind it. It can build working web apps with two documented backend options, but the backend you choose now affects whether you can continue through GitHub. Choose it to validate a designed experience; choose the engineering path before you commit customer data.

Public capabilities and AI credit allowances verified on 15 October 2026. This review evaluates live product documentation, workflow continuity and handoff constraints. The walkthrough is an illustrative brief you can follow, not a signed-in test or a claim about measured output quality.

What is Figma Make?

Figma Make turns prompts and design references into an interface backed by editable code. That makes it useful for trying a search interaction, filling out a form or navigating a product flow, beyond viewing a static mockup. It can also publish web apps and connect them to stored data. Figma Design remains the canvas for designing interfaces; Figma Sites is a separate website-building surface. Make is the place to ask how the design should behave and generate that behavior. Start at Figma Make; its creation guide documents the prompt-to-preview workflow.

Who should use it, and which Figma Make alternatives fit better?

Figma Make makes the strongest case for a designer or PM whose starting point is an approved interface, shared components and colleagues who already review work in Figma. A founder with a rough idea can use it too, but starting from an empty prompt gives up much of that advantage.

The comparison below turns on the starting material, the next editor and the deployment path. It is a workflow assessment, not a ranking of how attractive each tool's first generation looks.

The backend and code distinctions are documented in Figma's backend guide, Lovable Cloud, v0's full-stack guide and Claude Design.

Lovable: choose it when the app comes before the design file

Lovable is an app builder with managed hosting, a database, authentication and storage. It is a sensible shortlist choice for a founder starting with “customers need to submit requests and staff need to manage them.” Its GitHub integration supports changes flowing back from the active repository branch, which matters when a developer joins the project.

The tradeoff is operational ownership. Lovable's Cloud documentation says moving to your own Supabase requires exporting data and rebuilding the schema in a new project. Choose it because that managed setup suits your launch, then decide who would own a later migration.

v0 by Vercel: choose it when code is the continuing workspace

v0 by Vercel builds full-stack applications and defaults to Next.js, a web framework that combines interface code with server-side functionality. Its docs cover backend endpoints and database connections. It also imports Figma context, so accepting a Figma design is not an exclusive Make advantage.

Prefer v0 when an engineer will maintain the resulting application and wants that framework-oriented starting point. Skip it as the default choice when the immediate deliverable is a design review and nobody is ready to own the application code. The distinction is what happens after the preview gets approved.

Claude Design: choose it when exploration spans more than product UI

Claude Design creates mockups and other visual work, can use design-system context from code and design files, and connects with Claude Code. Its current product page also documents PDF, PowerPoint and HTML exports. That breadth fits a founder who needs a prototype and the materials to explain it.

Choose it when the creative brief starts in conversation and the next work happens in Claude or an exported artifact. For a team whose review process revolves around existing Figma frames, Make offers a more direct starting context. An HTML export alone does not settle who maintains accounts, data and deployment.

For the wider shortlist, use our AI design tools list.

How to use Figma Make

Figma Make is most useful when the first prompt describes a bounded interaction. “Build my startup” leaves the model to invent both the product and its interface. A designed booking flow gives you something concrete to accept or correct.

Figma Make tutorial: turn a booking frame into a prototype

Use an illustrative brief: a visitor chooses a service, selects an available appointment and submits a request. Begin with sample content and no customer accounts. The initial question is whether someone understands the flow, before you decide how to store bookings.

1. 1

   Prepare the frame

   Select the Figma Design frame containing the booking interface. Include meaningful button labels and the selected, unavailable and error states you want the prototype to express. Copy the frame itself. Figma recommends structured frames over screenshots when the model needs exact design context.

2. 2

   Create the Make file and attach the reference

   In the file browser, open Drafts and click Make. Paste the copied frame into the prompt. Alternatively, use Add context to attach a design or frame link through the attachment modal. Use the actual frame as context rather than relying on a bare URL in the conversation.

3. 3

   Describe behavior and boundaries

   Ask Make to preserve the attached design, let the visitor choose a service and an available appointment, validate required fields, and show a confirmation. Explicitly request sample data and no backend for this first version. Click Send to generate the preview.

4. 4

   Walk the failure paths

   Try submitting without a required field, selecting an unavailable appointment, changing the service after choosing a time, and returning from confirmation. Judge whether the interface explains what happened. A button that responds is only useful if it responds correctly.

5. 5

   Correct the smallest failing area

   In a new Make file, use Edit to select an element, change its properties and click Apply, or annotate a specific defect. Keep a behavior correction separate from a broad visual redesign so you can tell whether the intended issue was fixed.

These controls follow Figma's creation instructions, attachment guide and editing guide. Older Make files may retain the previous editing interface.

Figma Make prompt examples for the same brief

Initial prompt: “Use the attached booking frame as the visual reference. Build the visitor flow for choosing a service and an available appointment, entering required contact details, and seeing confirmation. Use fictional sample content. Keep the frame's hierarchy and component styling. Do not connect a backend yet. Explain what is simulated.”

Correction prompt: “When the selected service changes, clear the previous appointment selection and require a new choice. Preserve the layout and visual styling. Show an inline explanation beside the appointment control.”

This is a before-and-after specification, not a reported generation result. If the first version carries an incompatible appointment into the next service, the correction targets a state-management failure: the application must update what it remembers when an earlier choice changes.

The craft bar is equally concrete. Check text wrapping, keyboard focus, unavailable states, long service names and the narrow layout. An attractive screenshot cannot demonstrate any of these. The prototype earns its place when a reviewer can complete the task and understand why an action is blocked.

Figma Make design system: preserve more than the colors

Figma Make becomes more useful when it can work from your system's components and rules, not just imitate a finished screen. A design token is a named value for something such as color or spacing; a component is a reusable interface element with defined behavior. Matching a token does not automatically mean using the right component.

Figma Make kits

Figma Make kits can combine npm packages, published library styles and variables, and written guidelines. An npm package distributes reusable code, so a kit can supply implementation context as well as visual references. The documented workflow is Settings → Create a kit → Assemble your kit, then add the assets, write guidelines, test and publish it for colleagues. Kits require a Full seat on a paid plan. Figma's Make kits guide

In the app's prompt area, click Select a Make kit and choose the published kit before generating the flow. For the booking brief, include the approved button, input and appointment-selector components where available. Then explain when to use them: the primary button submits a valid request; unavailable appointments remain recognizable but cannot be selected; validation stays beside the field that needs attention.

These rules matter more than “make it on brand.” A generated purple rectangle can resemble your primary button while missing its disabled state, focus treatment or accessible label. Review component usage and interaction semantics, not just whether the accent looks familiar.

There is setup work. Figma's package requirements say the package must work with the build environment and must not depend on the surrounding workspace being present. Ask an engineer to prepare the package if your components currently rely on private modules scattered through a larger repository.

Library extraction is not full token preservation. The Make kits guide says it extracts a subset of variables into simplified CSS with raw values; exact variable syntax is not retained. Document state rules in guidelines and inspect the generated styles before assuming the prototype carries your system intact.

Figma Make templates

Figma Make templates suit repeated starting experiences, while a kit supplies reusable system context. Build a reviewed booking foundation once, then let colleagues start variants from it. Figma documents templates alongside its other sharing and reuse options.

Use guidelines for standing project rules and custom skills for a repeatable review you explicitly invoke. For teams with an established system, our Figma Make custom skills design-system pack provides a starting structure. Adapt the instructions to your own tokens and components; the review still needs a human decision.

Build a web app that remembers what happened

Figma Make now documents Payload, an application backend and content-management system, and Supabase, a database and backend service. A backend stores information and performs work behind the visible interface. This is the difference between showing a booking confirmation and having a request that staff can retrieve after the visitor closes the browser.

With Payload, you describe the app, confirm backend creation, and manage records through the CMS tab, its content-management screen. Figma hosts the app and data. Connect Supabase separately under Make settings → Integrations → Supabase; its Make setup uses key-value stores, simple saved entries, rather than creating a full database schema of linked tables. Figma backend documentation

Continue the same brief with: “Add a Payload backend for services and appointment requests. Visitors can submit requests; staff can manage them. Separate public service information from private contact details. Explain the access rules before implementing them.”

Then inspect a saved request through the administrative view. Refresh the visitor experience and confirm that it reads the intended stored information. Review whether an unauthenticated visitor can reach staff-only records. These are acceptance checks for your implementation, not assurances that generation has already satisfied them.

Requesting an appointment and guaranteeing a reservation are different products. A request can wait for staff approval. A reservation needs rules for conflicting submissions, cancellations and availability changes. If the business requires a guaranteed slot, involve an engineer before calling the workflow finished.

The practical advantage is that you can validate the interface and the record-management task together. The boundary is ownership: someone must decide the data model, permissions and recovery process. A generated administration screen does not make those business decisions for you.

Publish the experience and choose its continuing owner

Figma Make can publish directly; moving through Figma Sites is not a prerequisite. In Make, click Publish, set the title and publish the app. A dedicated URL is provided, and you can configure a custom domain. Subsequent changes need an update to the published version. Make publishing guide

For the booking prototype, choose whether the audience is reviewers or prospective customers. Reviewers need an honest account of simulated behavior. Customers need a complete service: clear confirmation, a way to correct mistakes and someone responding to submitted requests. Use the deployed URL for the final review so you inspect what visitors receive.

When Figma Sites is the better publishing surface

Figma Sites fits a visually maintained marketing site. Its documented route is to copy a Figma Design frame into a Sites breakpoint, adjust the responsive layouts and publish. A breakpoint is a layout prepared for a particular viewport range. This route is useful when the main work is arranging and updating pages. Move designs into Figma Sites

Use Make for the booking interaction and consider Sites for the surrounding marketing website if that editing model suits its owner. Do not assume the products have identical exit routes: Figma's Sites publishing documentation says site code cannot currently be exported for external publishing.

What an engineering handoff should contain

Figma Make's code editor can provide a ZIP download. Its current Git workflow documentation also describes cloning an authorized GitHub repository, working in branches and creating a pull request. A pull request lets engineering review changes before they enter the shared application. These are different starting paths, with different requirements.

Hand over the intended behavior, known simulated features, data ownership, access rules and unresolved defects alongside the code. For the booking flow, explicitly say whether an appointment is a request or a confirmed reservation. Otherwise, engineering can inherit a polished implementation of the wrong business rule.

Figma Make AI credits

For shared design-system work, choose a Professional Full seat: it includes 3,000 AI credits/month, versus Starter's 500/month with a 150/day limit; Make draws on the shared AI allowance at variable rates based on model, task and context, and seat credits reset monthly without rollover. Check How Figma AI credits work and Figma pricing before committing; an allowance is not a promised number of finished prototypes.

The limitations that should change your decision

Figma Make's limits depend on the workflow you select. “It cannot build a backend” and “it handles the whole product” are both poor buying assumptions.

A hosted Payload app currently gives up Git continuation

Figma Make's Payload backend documentation says GitHub integration and local-codebase workflows are not yet available for Payload-backed apps. It also places current Payload hosting in the eastern United States. Treat those as selection constraints, not details to discover after building the app. Payload limitations

If engineering must continue the same project through its repository immediately, validate a compatible route before selecting Payload. A promise that a feature is coming does not satisfy a handoff scheduled now.

Figma Make to Figma Design is not automatically a live round trip

Figma Make's standard Copy design action creates editable layers from the current preview. Those layers are static, disconnected from the Make file and not automatically linked to the design system, though available variables can be matched. Copy design documentation

Use the copy for critique and visual exploration. If you change the appointment selector on the canvas, explicitly decide how that change returns to the working app. Otherwise, the design review and the prototype can quietly describe different products.

Git features are not interchangeable

Figma Make's separate Push to GitHub feature creates its own repository and pushes one way; later pushes can overwrite edits made outside Make. That limitation must not be applied to the newer repository-cloning workflow described above.

The local-codebase workflow is another distinct option, documented as a limited closed beta using the Figma Beta desktop app for Mac and an admitted account. It needs repository setup. Confirm which path your team can use before promising that designers can edit the existing production app directly.

A published-app password does not protect every sharing link

Figma Make's password protection applies to the published app; the preview follows file-sharing permissions. Review both before sending a confidential concept outside the team. Publishing and sharing are separate access decisions. Publishing and access settings

Generated behavior still needs acceptance criteria

Figma Make can make a flow appear complete before the difficult business cases are resolved. For the booking example, assess competing requests, canceled appointments, inaccessible controls and misleading confirmations. These are review requirements, not defects observed in a test here.

The useful definition of ship-ready is “the intended user can complete the task, and the owner can support the outcome.” A realistic mockup alone clears neither condition.

Verdict: choose Make for design-led validation, then choose the operating path

Figma Make is a strong choice for founders, PMs and designers who already have Figma assets and want to evaluate a working product experience. Its kits, targeted editing and backend options let the discussion move beyond how a screen looks.

The decision flips when the next owner cannot continue through the workflow you selected. A hosted Payload app can suit a content or request-management use case, but its current Git limitation matters for an immediate engineering handoff. Prefer Lovable for a managed app-first start with Git sync, v0 for a developer-owned Next.js direction, or Claude Design for broader visual exploration and Claude continuation.

Next week, take a representative frame, build the smallest complete interaction and ask its eventual owner to review the continuation path. Approve the prototype and its handoff together. That is a more useful milestone than generating more screens.

Frequently asked questions

What do you create with Figma?

For this workflow, use Figma Design to shape the interface, Make to generate working interactions and apps, and Sites when you want a visual website-building surface. Pick the deliverable before picking the surface.

How do I create a new file in Figma?

For a Make file, open Drafts in the file browser and click Make. Attach your frame and describe the behavior you want. The walkthrough above follows Figma's documented creation flow.

Is Figma a UI or UX tool?

Both apply to the work. UI concerns the interface people see and operate; UX concerns their experience completing a task. Make can help you examine a working flow, but the research and judgment about whether it solves the right problem remain yours.

What is the difference between Figma design and Figma Make?

Figma Design is the design canvas; Make generates a working interface backed by code. The standard Copy design action brings a static view back as editable layers, without automatically synchronizing future changes.

Is there anything better than Figma Make?

For some jobs. Lovable is a strong alternative for a managed app and backend, v0 for a Next.js-oriented engineering workflow, and Claude Design for visual exploration across formats. Make's strongest case is starting from your existing Figma designs and system.

Are people leaving Figma?

This review does not measure customer migration. Individual complaints or examples of switching cannot establish an overall trend. For your decision, identify the specific design or handoff task that your current workflow cannot complete.

Why is Figma falling?

That question could mean its share price, adoption or someone's opinion of the product. None establishes whether Make fits your workflow. This review makes no market-performance claim; it evaluates the documented design, backend and handoff paths.

Who is Figma's biggest competitor?

There is no single competitor that answers every Make use case. For this buying decision, shortlist Lovable for an app-first build, v0 for code continuation and Claude Design for conversational visual work. Compare against the task you actually need to finish.

Which is better, Canva or Figma?

For the product-interface workflow covered here, choose Figma. If you need marketing assets, use the broader AI design tools comparison linked above to choose by deliverable. This review does not rank Canva's output quality against Figma's.

Is Figma Make free?

You can try Make on Starter. The documented restrictions include no team-library style context and public-web publishing tied to publishing in the Figma Community. For confidential shared product work, assess the paid Full-seat workflow. See Figma Make access and the credit allowance above.

Use the AI business workflow audit checklist to name the prototype's owner, required data and handoff before committing to the workflow.