Prototyping for beginners.

Figma Make

A practical guide to AI-assisted prototyping for Product Design, Product Management, and Insights teams

For: Product Management, Product Design, Data Science, and User Research Teams

01Purpose

Give the Product org a fast, practical on-ramp to Figma Make so more people can ideate, prototype, and collaborate with AI—while staying aligned to Webflow systems and quality standards.

02Quick Summary

Figma Make = prompt-to-prototype with code (React + Tailwind + shadcn/ui) rendered on canvas. Best for early concepting/ideation, bringing static designs to life, and cross-functional collaboration before handing off to engineers.

Key Points:

  • Technology — React + Tailwind + shadcn/ui powered by Claude Sonnet 4.5
  • Best For — Early concepting, bringing static designs to life, cross-functional collaboration
  • Design Craft — Use your design system, clear guidelines, and good prompting for on-brand results
  • Capabilities — Make from scratch or from Figma frames/images; point-and-edit; code view; export/import tokens; templates; multiplayer; Supabase, Google Analytics, and GitHub integrations

On the Roadmap (from Figma):

  • Bring-Your-Own Design System (styles and components) with sync to Make
  • Codebase ingest via private/public NPM for component mapping
  • MCP client hooks to pull context (PRDs, docs)
  • Commenting and improved prompt assistance
  • Deeper Make↔Design interop

03What is Figma Make?

An AI-assisted prototyping space where PMs, Designers, Researchers, and Engineers can collaborate to build interactive prototypes quickly.

Core Capabilities:

  • Generate Working UIs — From prompts or seeded with Figma frames/images
  • Iterate Visually — Then refine via Point & Edit or the code layer
  • Apply Design Tokens — Use Webflow tokens and (soon) components for brand-true output
  • Publish & Share — Quickly collect feedback and move to code with context

"We see AI as a way to get ideas off the ground earlier… then refine in a continuous experience, on brand, and hand off with full design context." — Figma

04When to Use It

Use Figma Make for:

  • Early concepting and product exploration
  • Replacing parts of a PRD with clickable behavior
  • Rapid experiments and usability validation (GA IDs supported)
  • Enable non-designers to prototype quickly using guardrails

Use an IDE (Cursor/Claude Code) for:

  • Production-ready implementations
  • Complex logic, custom libs, or security-sensitive flows
  • Importing/using external JS packages beyond current Make scope

05Current Capabilities

Generation Sources:

  • Prompt-only — Text description of what you want to build
  • Prompt + Figma frames — Up to 3 well-structured frames (Auto Layout, named layers)
  • Prompt + images — Screenshots or mockups to inspire the output

Technology Stack:

  • Model — Anthropic Claude Sonnet 4.5 (under the hood)
  • Code substrate — React + Tailwind + shadcn/ui (editable in Make)

Editing & Workflow:

  • Point & Edit — Targeted changes with instant feedback
  • Code edits — For immediate, precise tweaks
  • Design tokens — Export Figma Variables → Export to Figma Make (point-in-time)
  • Templates — Publish Make outputs or blank guideline starters as templates
  • Multiplayer — Work together live (Make comments are on roadmap)
  • Interop — Copy Make layers → Figma Design (bi-directional sync on roadmap)

Integrations:

  • Google Analytics — Add GA ID for conversion funnels/tests
  • Supabase — Postgres + serverless functions for secure API/data mocks
  • GitHub — Push/export code to repos for Engineering consumption
  • MCP / Dev Mode — Make can expose design context to MCP-aware IDEs

06Getting Started

1. Start from a Template

Use Wireframe starter template (created by @Kyle Lambert) or a blank template with prefilled Guidelines.

Open make → See more → Find Wireframe in "From Webflow" section → "Use Template"

2. Export Tokens to Make

In Figma Design System → Publish Library → Export to Figma Make to bring variables (colors, type, spacing).

3. Seed Your Prototype

Prompt alone or include up to 3 well-structured frames (Auto Layout, named layers).

4. Prompt Well (TCEBC)

  • Task: Build a responsive [feature/page] for [persona/use case]
  • Context: Brand = Webflow; goal = [outcome]; device targets = [desktop/mobile]
  • Examples: Mirror layout/style of [frame A] and component usage from [frame B]
  • Behavior: Include [states, transitions, validation, a11y]
  • Constraints: Use Webflow tokens for color/typography/spacing

5. Iterate & Refine

Use Point & Edit for targeted changes; use code for precise adjustments; keep prompts focused and incremental (avoid overloading context).

6. Share & Handoff

Multiplayer review; gather notes externally until in-Make comments arrive.

Copy layers back to Figma Design for polish; or export/push code to GitHub and move work into IDE with MCP context.

💡 Pro Tip

Start simple and add complexity incrementally. The AI works best with clear, focused prompts rather than trying to build everything at once.

Ready to Start Prototyping?

Open Figma Make and start building your first prototype today

Learn More About Figma Make