Figma Make prompts
Figma Make turns a prompt, or a frame you attach, into a prototype you can click through. Build the screen, then critique it, swap in your components, and check the visual states. When Make needs your brand and tokens, use the design-system prompts under them.
Start here
- UX designFirst prompt for a Figma Make prototypeBrief Make on the task, who it is for, the constraints, and what done looks like.
- UX designFigma Make follow-up deltaAsk for one change, and say what must stay the same.
- UX designAttach a Figma frame: 1:1 build vs style referenceTell Make whether the attached frame is the layout to rebuild or only a style reference.
- Visual designDesign-system context for MakePoint Make at an attached guidelines file or kit, and tell it not to invent tokens.
- Visual designCritique a Figma Make previewReview hierarchy, alignment, type, spacing, contrast, and the generic AI look before you prompt again.
- Visual designReplace a generic component with a library componentSwap Make's default control for one from your library, and match the surrounding type and spacing.
- Visual designVisual states pass on a Make fileAdd hover, focus, pressed, disabled, and selected states, and check contrast.
Lock the design system
Write the brand, tokens, and DESIGN.md first. Then Make has something real to follow.
- ProductAI Tool Prompt OptimizationImprove prompts for AI design tools (like v0, UX Pilot, ChatGPT) to get more consistent and useful results.
- BrandingBrand Style to AI PrototypeCreate AI prompts that generate prototypes matching your exact brand style, colors, typography, and visual identity.
- Visual designDesign System to AI Prompt ConverterConvert design system documentation into AI-friendly prompts for generating prototypes that match your design system exactly.
- AI WorkflowsCreate a DESIGN.md FileWrite a design-system file agents can follow for tokens, components, content, and accessibility.
- Visual designMake my design system LLM-readableSix-step coding-agent prompt: audit hardcoded CSS values, build a three-layer token file, write component specs, add a CI token audit, and point your AI rules at it.
By Hardik Pandya - Visual designAI Prototype Design System ValidationValidate AI-generated prototypes against design system requirements and identify inconsistencies to fix.
Frequently asked questions
What is Figma Make?
Figma Make is an AI-driven, prompt-to-app tool that turns ideas or existing Figma designs into functional prototypes, web apps, and interactive UI. You work in a dedicated Make file: describe what to build in chat, attach frames or images, then iterate in the preview, the edit tools, or the code. Figma's definition: https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make
How do I write a strong first Figma Make prompt?
Treat the first prompt as the brief. Include the task, context, key elements, expected behaviors, constraints, and what done looks like. Be specific enough that Make does not invent extra features. Official Help also suggests plan mode (paid plans) when the build is too complex to scope in one shot.
Should I attach a Figma frame or a screenshot?
Use a frame or component when you need structured, faithful design data. Use a screenshot for looser visual direction. Tell Make whether to rebuild 1:1 or treat the attachment as style inspiration. Don’t paste a Figma file URL; Make will not load the file from that link.
When should I use plan mode, point and edit, or another prompt?
Use plan mode on paid plans to review a structured plan before code. Use point and edit, annotations, or a direct code edit for small visual or value changes — those can avoid a full regeneration and extra credits. Use a follow-up prompt when you need one clearly scoped change, and say what must not change.
Do these prompts work only in Figma Make?
The new prompts in this hub are written for Figma Make’s chat. Related catalog prompts (brand style, design-system converter, prompt optimizer, DESIGN.md) are plain text and also work in ChatGPT, Claude, Cursor, or Claude Code. Cursor “unslop” and UI polish prompts assume a coding agent with files open; don’t treat them as Make-native.
Is there a downloadable Figma Make prompt pack?
No. Copy each prompt from this page. Open the card, then use Copy prompt.
Who can use Figma Make?
Figma’s Help Center lists Starter (with limitations), Professional, Education except K-12, Organization, Government, and Enterprise. Full seats include Make; other seats can try it in drafts with limits. Confirm current plan and seat rules in Figma’s FAQs before you rely on a specific capability (for example plan mode, team-library style context, or copying a preview as Design layers).