How to Use Figma Make (Step-by-Step Workflow for Designers)

Difficulty: Beginner · Last updated: November 14, 2026 · By Mantlr Editorial

A practical walkthrough for designers using Figma Make — from first prompt to published web app.

Key takeaways

Six things to know before you start your first Figma Make project:

1. Make files are separate from Design files — created via "Make" button in the file browser

2. Your first prompt determines 60% of the output quality. Front-load context.

3. The Point-and-Edit tool is faster than text prompts for targeted changes

4. Iteration through chat works better than rebuilding from scratch

5. Add a backend with a simple prompt when your app needs data, auth, or storage

6. Publish to a *.figma.site URL when ready — shareable, working, real

On this page

• Before you start: what to know
• Step 1: Create your Make file
• Step 2: Write your first prompt
• Step 3: Iterate through conversation
• Step 4: Use the Point-and-Edit tool
• Step 5: Bring in your design system
• Step 6: Add a backend (when needed)
• Step 7: Test and refine
• Step 8: Publish your app
• Common pitfalls during the workflow
• What to do after your first Make project
• Frequently asked questions
• Related articles

Figma Make is conceptually simple: type a prompt, get a working app. In practice, the gap between "first attempt" and "shippable prototype" can take hours of trial and error if you don't know the workflow. This guide is the workflow. Eight steps from blank file to published app, with the specific decisions that separate a useful prototype from a generic one.

This is for designers, founders, and PMs who've heard about Make, opened it once, and want to use it on real work. We've used Make for production prototypes, stakeholder demos, and internal tools over the past year. The steps below are what actually works — not the "click here, then click here" version Figma's docs cover, but the workflow logic underneath.

If you're not sure what Figma Make is yet, read What Is Figma Make? first. Then come back here for the workflow.

Quick wins

1. Your first prompt should include: what you're building, who it's for, the layout structure, and the brand style. Generic prompts produce generic apps.

2. Use the Point-and-Edit tool for changes to specific elements. Text prompts work better for structural changes.

3. Save your best prompts in a personal library. Make works on iteration, and recycling good starts saves hours.

Before you start: what to know

A few things to confirm before you start:

You need a Full seat on a paid plan. Make is available on all plans, but the Starter tier is too limited for real work. Professional or higher is the practical minimum.

Have your project context ready. The single biggest predictor of Make output quality is the clarity of your first prompt. Before opening Make, know: what you're building, who it's for, the rough layout, and the visual style. Vague intent = vague output.

Decide if you need design system fidelity. If you need Make to use your real design system components, you need Make kits set up first. Otherwise Make uses generic styling.

Decide if you need a backend. If your app needs authentication, databases, or file storage, you'll add Supabase backend integration in Step 6. No setup needed before starting — Make handles it.

Step 1: Create your Make file

Open Figma. From the file browser, look at the upper-right corner. You'll see a "Make" button (next to "Design" and "FigJam"). Click it.

This creates a new Make file in your Drafts folder. Make files are a distinct file type — they don't behave like Design files, don't use the Figma agent, and have their own chat-based interface.

The Make interface opens with three panels:

• Left panel: AI chat — where you type prompts
• Center panel: Live preview — where your app renders
• Right panel (collapsible): Code editor — where you can view and edit React + Tailwind code directly

You'll spend most of your time in the chat and preview panels. The code panel is for fine-tuning later.

Step 2: Write your first prompt

This is the highest-leverage step in the entire workflow. Your first prompt determines 60% of what Make generates. Get it right and the rest is iteration. Get it wrong and you'll fight Make for hours.

Front-load these five elements in your first prompt:

1. What you're building. Be specific. "A SaaS pricing page" beats "a pricing page." "A habit tracker for new parents" beats "a habit tracker."

2. The structure. Mention sections and layout. "Hero section with headline and CTA, three pricing tier cards in a row, FAQ section at the bottom."

3. The visual style. Reference styles by name or describe them concretely. "Clean modern style with a soft cream background and vermillion accents" beats "make it look nice."

4. The content tone. Make generates placeholder copy automatically. Steer it: "Use confident, founder-friendly copy. Avoid corporate jargon."

5. The interaction expectations. Tell Make what should be interactive. "The CTA button should open a modal asking for email. The pricing toggle should switch between monthly and annual pricing."

Here's the difference in practice. A weak first prompt:

Build me a SaaS pricing page.

A strong first prompt:

Build a SaaS pricing page for a habit-tracking app called HabitFlow. Structure: hero with headline and email signup CTA, three pricing tier cards (Free, Pro $9/month, Team $29/month), comparison table, FAQ section, footer. Visual style: clean modern with a soft cream background, vermillion accents on CTAs, plenty of whitespace. Copy tone: confident, founder-friendly, no corporate jargon. Interactions: pricing toggle for monthly/annual switching, FAQ accordion that expands on click.

The second prompt produces a near-shippable first draft. The first prompt produces a generic placeholder. Same tool. Different prompts.

For more on prompt engineering specifically for Make, see How to Write Better Figma Make Prompts.

Step 3: Iterate through conversation

Make's strength is conversational iteration. You don't rewrite the prompt — you continue the conversation.

After the first generation, evaluate honestly. What's strong? What's weak? Then give Make focused follow-ups:

• "The hero is too cluttered. Reduce it to headline, subhead, and one CTA button."
• "Make the pricing cards equal height and align the CTAs at the bottom."
• "Increase the spacing between sections — currently feels cramped."
• "The vermillion is too saturated. Use a softer terracotta instead."

One change per prompt. Tiny iterations beat big ones. If you bundle five changes into one prompt, Make often does two of them well and butchers the other three. Single-focus prompts compound into clean results.

If iteration starts going backwards (Make degrading the design with each prompt), use the rewind feature — go back to a previous version that worked, then try a different iteration path.

Step 4: Use the Point-and-Edit tool

For targeted changes to specific elements, text prompts are slower than they need to be. The Point-and-Edit tool fixes this.

In the Make preview, hover over an element. Click. A prompt input appears tied to just that element. Type your change: "Make this button larger and use the primary brand color." Make focuses its update on that element only — without re-rendering the whole page.

Use Point-and-Edit for:

• Resizing or restyling a specific component
• Changing copy on a specific element
• Adjusting spacing or padding for a specific section
• Adding interaction behavior to a specific button

Use text prompts in the main chat for:

• Structural changes (rearranging sections, adding new pages)
• Global style changes (changing the entire color palette)
• Adding entirely new features (auth, database, new functionality)

The combination is fast: structural work via chat, fine-tuning via Point-and-Edit.

Step 5: Bring in your design system

By default, Make uses generic styling. To get your real design system, set up Make kits (released March 26, 2026).

A Make kit includes three things:

• npm packages: Your production React design system, published as a package
• Figma library styles, variables, and tokens: Imported directly from your Figma library
• Guidelines: Markdown files telling Make how to use your design system

Once configured, Make uses your real components instead of generating generic ones. The fidelity jump is substantial — generated apps go from "looks vaguely like our brand" to "uses our actual components."

Make kits setup is a multi-step process. The full walkthrough is in our dedicated guide: How to Use Make Kits in Figma Make.

If you don't have time for Make kits setup but want better fidelity than defaults, the workaround is to mention your design choices explicitly in your prompts — colors, fonts, spacing, component styles. Less elegant than Make kits, but it works.

Step 6: Add a backend (when needed)

Many prototypes don't need a backend. A static marketing page, a portfolio site, a single-page tool — these work fine without one.

But if your app needs:

• User authentication
• Persistent data storage
• File uploads
• Real API integrations

— you need a backend. Make integrates with Supabase to add one.

To add a backend, simply prompt: "Add user authentication" or "Add a database to store user submissions." Make recommends adding a backend automatically when your prompt implies one is needed.

The first time you do this, you'll connect your Supabase account. Make remembers Supabase projects you've connected to so you can reuse them across Make files.

What you get: a real Postgres database (key-value store, not full SQL), authentication flows, secret storage for API keys, and Edge Functions for serverless backend logic.

The Supabase free tier is enough for prototype workloads. Heavy use requires a paid Supabase plan.

Step 7: Test and refine

Before publishing, walk your app end-to-end. Real interaction testing surfaces problems no preview shows.

Test on multiple screen sizes. Use the preview's responsive view to check mobile, tablet, and desktop. Make sometimes generates layouts that work at desktop but break on mobile.

Click every interactive element. Buttons, forms, toggles, modals, dropdowns. Does each one do what you expect?

Test edge cases. Submit empty forms. Try invalid inputs. Click rapidly. Real users do unexpected things; surface failures before they do.

Check copy and content. Make's placeholder content is plausible but bland. Replace generic copy with real product voice.

Audit accessibility quickly. Tab through the app — does focus order make sense? Are interactive elements properly labeled? Does color contrast pass at a glance?

Iteration based on testing usually catches the 80% problems. The 20% requires actual user testing — which you can do with Make's published URL in Step 8.

Step 8: Publish your app

When the prototype is ready to share, publish it.

In the Make file, click the Publish button. Make generates a public *.figma.site URL. Anyone with the URL can access the live, working app.

Use the published URL for:

• Stakeholder demos
• User testing sessions
• Investor or client presentations
• Cross-team alignment around a working prototype

Publishing is reversible. You can unpublish at any time, or re-publish updated versions. Each publish creates a fresh deployment.

For Make apps with backends, the publish URL connects to your live Supabase backend. Real data, real auth, real interactions.

Common pitfalls during the workflow

Five things that trip up designers learning Make:

Pitfall 1: Rebuilding instead of iterating. Designers used to traditional design tools think "start over" when something goes wrong. In Make, iteration is the workflow. Use rewind to go back to a working state, then iterate forward differently.

Pitfall 2: Skipping the design system step. Without Make kits configured, every Make app uses generic styling. Designers wonder why their apps "don't match the brand." Set up Make kits early.

Pitfall 3: Multi-change prompts. Telling Make to "add a footer, change the hero copy, increase the spacing, and make the buttons bigger" produces a mess. Single-change prompts produce clean results.

Pitfall 4: Treating Make as a designer. Make executes intent. It doesn't have intent. Designers who expect Make to make product judgments waste hours waiting for an answer Make can't give.

Pitfall 5: Not using Point-and-Edit. Many designers stick to text prompts for everything. Point-and-Edit is faster for element-specific changes by an order of magnitude. Learn it early.

Skip the trial-and-error

Mantlr lists Figma AI ecosystem guides — including Make tutorials, MCP server setup, design system prep, and skill libraries.

Browse Mantlr →

No signup required. Just curated resources.

What to do after your first Make project

Once you've shipped a Make project, three things compound your speed on the next one:

Save your best prompts. Make works on iteration. The first prompt that worked well for a project is reusable for similar projects. Keep a personal prompt library.

Build a Make kit for your team. If your team uses Make regularly, the Make kits setup pays back fast. Every team member's apps automatically use your design system without re-explaining it in every prompt.

Learn the prompt patterns that worked. What style of prompt produced your best output? What context did you front-load? What iteration patterns helped? Build your own internal "what works" doc.

Frequently asked questions

How do I use Figma Make for the first time?

Open Figma, click "Make" in the upper-right corner of the file browser to create a Make file, then type a focused first prompt describing what you want to build. Include the structure, visual style, and content tone in the first prompt — the quality of your first prompt determines most of the output quality.

What's the best way to write Figma Make prompts?

Front-load context: what you're building, who it's for, the structure, the visual style, the content tone. Iterate with single-change follow-ups instead of multi-change prompts. For deep prompt engineering, see How to Write Better Figma Make Prompts.

Can I import existing Figma designs into Make?

Yes. Click the + button in the chat, choose "Import from Figma," and select the design you want. Make uses the import as visual reference. You can attach multiple designs to give Make more guidance.

How long does it take to build a working app in Figma Make?

A simple working prototype: 30 minutes to a few hours. A polished MVP-quality prototype: 1-2 days. A working app with backend, auth, and database: 2-5 days depending on complexity. Much faster than building from scratch, but not instant.

Can I edit Figma Make's generated code directly?

Yes. The right-side code panel lets you view and edit the React + Tailwind code Make generates. Direct code edits sync to the preview. Useful for fine-tuning details Make handles awkwardly via prompts.

How do I make my Figma Make app match my design system?

Set up Make kits — bring your production React design system into Make as an npm package, plus Figma library styles and tokens, plus written guidelines. See our Make kits guide.

Can I publish a Figma Make app to a real URL?

Yes. Click the Publish button in the Make file to generate a public *.figma.site URL. The published app is a real working web application, not just a screenshot.

Does Figma Make work on mobile?

Make's preview supports mobile, tablet, and desktop views. The generated apps are responsive by default if your prompt specifies responsive behavior. If responsiveness isn't working, prompt: "Make this fully responsive across mobile, tablet, and desktop."

What's the difference between Figma Make and the Figma agent?

Different products. Figma Make is a separate file type that generates working web apps with code. The Figma agent lives inside Figma Design files and edits designs on the canvas. See Figma Agent vs Figma Make vs Figma MCP for the full comparison.

Where can I find more Figma Make resources?

Mantlr publishes Figma Make tutorials, comparison guides, and design system integration walkthroughs. Browse the full library at mantlr.com or subscribe to Mantlr Editorial for weekly guides.

Build with Mantlr's curated library

You've learned the workflow. The next step is using it on real work — and connecting your design system so Make produces output you can actually ship.

Mantlr lists 521 designer-vetted free design resources across 43 categories — every one license-verified, production-tested, free of email walls.

Browse Mantlr → · Subscribe to weekly editorial →

Related articles

If you're learning Figma Make, these articles cover the connected workflow:

• What Is Figma Make? — The foundational article. Read this if you're new to Make.
• How to Write Better Figma Make Prompts — Deep dive on the prompt engineering that separates good output from generic.
• How to Use Make Kits in Figma Make — Design system integration setup.
• How to Add a Backend to Figma Make — Supabase integration walkthrough.
• The Complete Guide to Free Design Resources and AI Tools in 2026 — Mantlr's pillar guide to the full resource library.

About Mantlr Editorial

Mantlr is a free directory of designer-vetted, license-verified design resources. We test every resource before listing. No email walls. No paid placements. No affiliate dressing.

This article was written by Mantlr Editorial, the team behind a curated library of 521 free design resources. We work in production design daily and only recommend resources we'd use ourselves.

Last updated: November 14, 2026. Article reviewed quarterly for accuracy.