Difficulty: Intermediate · Last updated: November 21, 2026 · By Mantlr Editorial
A practical guide to writing Figma Make prompts that produce shippable work — with real examples of what to do and what to avoid.
Key takeaways
Six things to know about Figma Make prompts before you start:
1. Your first prompt determines roughly 60% of the output quality — front-load context
2. Strong prompts include 5 elements: what, who, structure, style, interactions
3. Single-change follow-up prompts beat multi-change prompts every time
4. Specific examples ("vermillion #c0392b") beat abstract terms ("warm color")
5. Make runs on Claude Sonnet 4.5 by default — Anthropic's prompting best practices apply
6. The Point-and-Edit tool is faster than text prompts for element-specific changes
On this page
- Why prompting matters more than you think
- The 5-part prompt framework
- Weak prompts vs strong prompts (real examples)
- The iteration patterns that work
- Prompt patterns for common use cases
- Patterns to avoid
- Prompting with images and Figma imports
- Switching models for different tasks
- Common mistakes designers make with prompts
- Frequently asked questions
- Related articles
Prompting is the bottleneck. Most designers using Figma Make hit a wall not because the tool is limited, but because they're describing what they want badly. The same Make file produces wildly different results depending on prompt quality. This isn't a tool problem — it's a craft problem. And the craft is learnable.
This guide covers prompt engineering specifically for Figma Make. We've used Make on prototypes, MVPs, and internal tools for the past year, and the difference between "frustrated by AI" and "shipping fast" comes down to a handful of prompt patterns. The patterns are simple. Most designers ignore them.
If you're new to Figma Make entirely, read What Is Figma Make? first. If you've used Make a few times and want to get serious about it, this is the guide.
Quick wins
1. Your first prompt should be a paragraph, not a sentence. Cover what, who, structure, style, and interactions.
2. Use specific values: hex codes for colors, pixel values for spacing, named fonts. Abstract terms produce abstract output.
3. Save your best prompts in a personal library. Recycle the structure across projects.
Why prompting matters more than you think
Make runs on Claude Sonnet 4.5 by default. Same model behind Anthropic's Claude products. The model is good — really good. But good models still need clear instructions.
Here's the math: when you write a vague prompt, Make has to make hundreds of decisions about what you meant. What style? What layout? What colors? What interactions? What content tone? Each decision is a coin flip away from what you actually wanted. Vague prompts compound those coin flips into output that's plausible but generic.
A well-structured prompt removes the coin flips. Make doesn't have to guess your style — you specified it. It doesn't have to guess your structure — you described it. It doesn't have to guess your interactions — you listed them. With the guesses removed, Make focuses on execution. That's where the quality jump comes from.
This is why Anthropic publishes prompting best practices — and why those practices apply directly to Make. Be clear. Be specific. Use examples. Tell the model what NOT to do. Front-load context.
The five-part framework below is the version of those practices that works specifically for design generation.
The 5-part prompt framework
Every strong Make prompt includes five elements. Skip any one and you'll fight the output.
1. What you're building
The product type. Be specific. "A SaaS pricing page" is better than "a pricing page." "A habit-tracking mobile app for new parents" is better than "a habit-tracking app."
The more specific you are, the more useful patterns Make can draw on from its training. "SaaS pricing page" has well-known conventions Make can apply. "A pricing page" forces Make to guess context.
2. Who it's for
The target user. Adds personality and tone that generic prompts miss. "For developer tools" suggests a different aesthetic than "for parents" or "for enterprise procurement teams."
This single sentence shifts the visual style, copy tone, and feature set Make assumes. It costs five words and saves hours of iteration.
3. The structure
The layout. List the sections in order. "Hero section, three pricing tier cards in a row, comparison table, FAQ section, footer." Make follows this structure faithfully — much more reliably than it would invent one.
The more architectural your description, the more controlled the output. Don't describe pages abstractly. Describe them like a wireframe in words.
4. The visual style
The aesthetic direction. Two ways to specify:
- Reference styles by name: "Clean Vercel-style modern design." "Editorial brutalism aesthetic with vermillion accents." "Bento-grid layout with soft shadows."
- Describe concretely: "Cream background (#fff9e8), vermillion accents (#c0392b), Plus Jakarta Sans for body text, Cormorant Garamond for headers."
The combination works best. Reference a known style + provide specific values for colors, fonts, and spacing.
Abstract style descriptions ("make it look professional") produce generic output. Specific values produce controlled output.
5. The interactions
What should be clickable, what should respond, what should animate. "The CTA button should open a modal asking for email. The pricing toggle should switch between monthly and annual pricing with smooth animation. The FAQ items should expand on click."
Without this, Make builds static layouts. With this, Make builds working interactions. This is the difference between a screenshot in a browser and a working prototype.
Weak prompts vs strong prompts (real examples)
The framework above sounds abstract. Here are concrete before/afters.
Example 1: SaaS pricing page
Weak prompt:
Build me a SaaS pricing page.
Strong prompt:
Build a SaaS pricing page for a habit-tracking app called HabitFlow, aimed at new parents balancing work and family. Structure: hero with headline "Tiny habits, big change" and a primary CTA "Start free," three pricing tier cards in a row (Free with limited tracking, Pro at $9/month with unlimited habits and partner sharing, Team at $29/month with up to 5 family members), monthly/annual pricing toggle above the cards, comparison table below the cards, FAQ section with 6 questions, footer with company info. Visual style: clean modern with a soft cream background (#fff9e8) and vermillion accents (#c0392b), Plus Jakarta Sans for body, Cormorant Garamond for headers, generous whitespace. Copy tone: warm and confident, no corporate jargon, no exclamation points. Interactions: pricing toggle switches between monthly and annual prices with subtle animation, FAQ items expand on click, primary CTA opens a modal asking for email.
The weak prompt produces a generic pricing page that looks like every other AI-generated SaaS template. The strong prompt produces a near-shippable HabitFlow page.
Example 2: Mobile app onboarding flow
Weak prompt:
Design a mobile app onboarding flow.
Strong prompt:
Design a 4-screen mobile onboarding flow for a meditation app called Stillpoint, aimed at busy professionals. Structure: Screen 1 welcome with brand logo and "Skip" / "Get started" CTAs, Screen 2 short value prop with 3 benefit points and an illustration, Screen 3 personalization (pick a goal: less stress, better sleep, more focus, daily mindfulness), Screen 4 free trial offer with "Start 7-day trial" CTA and "Maybe later" secondary action. Visual style: minimal premium aesthetic, soft white background (#fafafa), deep blue accent (#1e3a5f), thin sans-serif type (Inter), subtle gradients. Copy tone: calm and intentional, short sentences, no urgency or hype. Interactions: smooth slide transitions between screens, progress dots at bottom, "Skip" available on every screen except the trial offer.
The weak prompt produces 4 generic onboarding screens. The strong prompt produces a Stillpoint-specific flow that already feels like a real product.
Example 3: Internal admin dashboard
Weak prompt:
Build me an admin dashboard.
Strong prompt:
Build an internal admin dashboard for a marketplace operations team managing seller onboarding. Structure: left sidebar navigation (Pending sellers, Approved, Flagged, Settings), main content area with a tabbed table view (Pending sellers as default), table columns (Name, Business type, Submitted date, Documents complete, KYC status, Actions), each row with quick-action buttons (Approve, Reject, Request more info, View profile), filters above the table (status, business type, submission date range), summary cards at the top showing counts. Visual style: data-dense but readable, neutral palette (white background, gray borders), one accent color for primary actions (deep green #047857), Inter font, table-first layout. Copy tone: direct and procedural, no friendly fluff. Interactions: row click opens a side panel with full seller details, Approve/Reject buttons show confirmation modals before action, filter changes update the table without page reload.
The weak prompt produces a generic dashboard. The strong prompt produces a marketplace-operations-specific tool that an actual ops team could use.
The iteration patterns that work
Strong first prompts get you 60% of the way. The remaining 40% is iteration. Here are the patterns that actually work.
Pattern 1: Single-change follow-ups
Each follow-up prompt should make one change. "Make the hero section more compact." "Increase the spacing between sections." "Change the primary CTA color to a deeper red."
Multi-change prompts ("Make the hero compact, increase spacing, and change the CTA") produce mixed results. Single-change prompts compound into clean iterations.
Pattern 2: Specific before vague
"Reduce the hero padding from 80px to 48px" works better than "make the hero less padded." If you know the value you want, give the value.
Pattern 3: Visual references via Point-and-Edit
For changes to specific elements, the Point-and-Edit tool beats text prompts every time. Hover over the element, click, type your change. Make focuses on that element instead of the whole page.
Pattern 4: Rewind when iteration goes backwards
Sometimes Make degrades the design with each iteration. When this happens, use the rewind feature to return to a previous version that worked, then try a different iteration path.
Pattern 5: Reference what already worked
"Keep the hero exactly as it is. Change only the pricing section." Anchoring changes with explicit "keep" instructions prevents Make from rewriting parts you liked.
Prompt patterns for common use cases
Use these as starting points for common project types.
Landing pages
Build a [product type] landing page for [target audience]. Structure: hero with headline and CTA, [section 2], [section 3], FAQ, footer. Visual style: [style reference], [specific colors and fonts]. Copy tone: [tone]. Interactions: [list].
Dashboards
Build an admin dashboard for [team type] managing [workflow type]. Structure: [sidebar contents], main area with [table/chart layout], [filter/control patterns]. Visual style: data-dense but readable, [palette], [font]. Copy tone: [tone]. Interactions: [list].
Mobile app flows
Design a [N-screen] mobile [type] flow for [audience]. Structure: Screen 1 [description], Screen 2 [description], ... Visual style: [style], [colors], [fonts]. Copy tone: [tone]. Interactions: [transitions, progress indicators, skip behavior].
Marketing pages
Build a marketing page for [product/event/feature]. Structure: hero, [content sections], social proof section, CTA section, footer. Visual style: [reference]. Copy tone: [tone]. Interactions: [list].
Internal tools
Build an internal tool for [team type] to [perform task]. Structure: [navigation], [main interface], [secondary panels]. Visual style: utilitarian and data-dense, [palette]. Copy tone: direct, no marketing language. Interactions: [list].
These templates aren't magic — they're just structured starting points. Adapt to your specifics.
Patterns to avoid
Five anti-patterns that consistently produce bad output:
Anti-pattern 1: "Make it look modern"
"Modern" means nothing. Reference specific styles, foundries, or design systems. "Vercel-style minimal" or "Notion-inspired" gives Make actual direction.
Anti-pattern 2: "Like Apple but different"
Comparative prompts confuse Make. It tries to combine references in ways that fail. Reference one style; describe specifics.
Anti-pattern 3: "Add some animation"
Vague animation prompts produce inappropriate motion. Specify: "Add a subtle fade-in animation to the hero section when the page loads." Or use Point-and-Edit on the specific element you want animated.
Anti-pattern 4: "Make it accessible"
Make produces something that looks accessible at a glance. Real WCAG compliance needs explicit accessibility prompts: "Ensure all interactive elements have proper ARIA labels, focus indicators, and 4.5:1 color contrast." Even then, audit manually.
Anti-pattern 5: Mega-prompts trying to specify everything
You can't fit everything into one prompt. Start with structure, style, and core interactions. Iterate the rest. Mega-prompts overwhelm Make and produce muddled output.
Prompting with images and Figma imports
Make accepts visual context — images, Figma frames, screenshots — as part of prompts.
For images: drop or paste images into the chat. Make uses them as visual reference. Caveat: Make can't extract exact colors from images. If you reference an image for color, also specify the hex codes explicitly.
For Figma imports: click the + button, choose "Import from Figma," and select frames. Make uses your real Figma designs as the visual baseline. This produces higher fidelity than image-based prompts.
For brand references: attach screenshots of your existing brand or product. Combined with explicit style descriptions, this anchors Make to your brand quickly.
The pattern that works best: text prompt for structure + image attachment for style + explicit hex codes for colors.
Switching models for different tasks
The 2026 model picker in Make lets you switch between Claude Sonnet 4.5 (default), Gemini, and GPT. Different models cut differently.
Claude Sonnet 4.5: Best at structured, nuanced work. Use for: complex layouts, design system fidelity, clean summarization. The default for most Make work.
Gemini: Fast on narrow tasks. Use for: simple component generation, single-screen designs, quick iterations.
GPT: Generalist. Use for: exploring multiple stylistic directions when you're not sure what you want.
Most designers leave Make on the default and miss the model picker entirely. For specific tasks, switching models speeds up iteration significantly.
Get the next article in your inbox
Mantlr publishes one practical, no-fluff article like this every Saturday. Free design resources, evaluation guides, and editorial takes on what's worth using.
Subscribe to Mantlr Editorial →
5,400+ designers and founders. No spam. Unsubscribe anytime.
Common mistakes designers make with prompts
After watching designers learn Make prompting, five mistakes show up most often:
Mistake 1: Vague first prompts. "Build me a [thing]" without structure, style, or interactions wastes your first generation. Front-load context every time.
Mistake 2: Treating Make like a search engine. Designers type short keyword-like prompts. Make works better with full paragraph descriptions, not keyword strings.
Mistake 3: Not using Point-and-Edit. Text prompts in the main chat are slower than Point-and-Edit for element-specific changes. Many designers stick to text prompts and burn iteration time.
Mistake 4: Multi-change follow-ups. Combining five changes into one follow-up produces mixed results. Single-change iterations compound cleanly.
Mistake 5: No prompt library. Every project starts from scratch. Saving and recycling your best prompts compounds your speed over time.
Frequently asked questions
How do I write a good Figma Make prompt?
Use the 5-part framework: what you're building, who it's for, the structure (sections in order), the visual style (with specific colors and fonts), and the interactions you expect. Each element removes guesses from Make's output. Skip any element and you'll fight the output through iteration.
What's the best length for a Figma Make prompt?
Your first prompt should be a paragraph — typically 80-150 words. Follow-ups should be single-change prompts of 5-25 words. Multi-change follow-ups produce muddled results.
Can Figma Make use my brand colors?
Yes, but only if you specify them. Make can't extract exact colors from reference images. Always include hex codes explicitly: "Use #2563eb as the primary accent color." For full brand fidelity, set up Make kits so your design system is built into Make.
Should I write one big prompt or iterate?
A focused first prompt (paragraph) followed by single-change iterations (short prompts). Mega-prompts trying to specify everything produce muddled output. Front-load context, then iterate.
How do I get Figma Make to match a specific design style?
Reference the style by name ("Vercel-style minimal," "Notion-inspired") AND specify concrete values (colors, fonts, spacing). The combination anchors Make. Reference alone is vague; values alone lack character.
Can I attach images to Figma Make prompts?
Yes. Drop or paste images into the chat as visual reference. Caveat: Make can't extract exact colors from images. Always include hex codes explicitly for any color you want matched.
Does Figma Make use Anthropic's Claude?
Yes, by default. Make runs on Claude Sonnet 4.5 unless you switch via the model picker. Anthropic's prompting best practices apply directly to Make.
How do I make Figma Make generate accessible designs?
Specify accessibility explicitly in your prompt: "Ensure all interactive elements have proper ARIA labels, focus indicators, and 4.5:1 color contrast." Even with this prompt, manually audit the output — Make produces visually-accessible work but doesn't guarantee full WCAG compliance.
What if my Figma Make prompts aren't working?
Three things to check: (1) Is your first prompt specific enough? Add more context. (2) Are you using multi-change follow-ups? Switch to single-change. (3) Are you fighting accumulated iteration drift? Rewind to a working version and try a different path.
Where can I find more Figma Make prompt examples?
Mantlr publishes Figma Make tutorials and prompt examples regularly. See our How to Use Figma Make workflow guide and Figma Make Examples showcase for more starting points.
Build with Mantlr's curated library
You know the prompt framework. The next step is connecting your design system so Make produces output that matches your brand exactly.
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 using Figma Make seriously, these articles deepen the workflow:
- What Is Figma Make? — The foundational article on Make.
- How to Use Figma Make — Full workflow from blank file to published app.
- How to Use Make Kits in Figma Make — Design system integration that fixes generic styling.
- Figma Make Limitations — What Make can't do, and when to use something else.
- 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 21, 2026. Article reviewed quarterly for accuracy.