Figma AI Prompts: Turn Dylan Field's Vision into Designs You Can Ship Today
Most designers read about Dylan Field's AI vision and thought, "interesting." Then closed the tab and went back to manually resizing buttons for the fourth time that week.
That's the gap this article closes. Field's stated vision for Figma AI isn't just a roadmap for the product — it's a signal for which capabilities are worth your attention right now. Below you'll find 10 structured prompts, organized by skill level, that put Figma AI to work on day one. Plus a three-step workflow that takes you from blank canvas to validated prototype in a single session.
The prompts are ready to copy. The workflow is ready to run.
What Dylan Field Actually Said (And Why It Changes How You Should Prompt)
Field's core argument isn't that AI will design for you. It's that AI will handle the parts of design that never required creative judgment in the first place — generating component variants, enforcing style rules, scaffolding user flows — so designers can spend more time on the decisions that actually matter.
Three specific signals stand out for anyone building a Figma AI workflow:
- Component generation is one of the biggest time-sinks AI can absorb. Generating five button states manually is not design work. Getting AI to do it in 30 seconds is.
- Brand consistency is a systemic problem he wants AI to solve. Style drift across projects is one of the most expensive invisible costs in design teams. His vision: AI that enforces your design system automatically, not by reminder.
- AI-assisted prototyping exists to validate flows before developers touch them. Not to replace user testing — to front-load the obvious errors so your real research time goes toward the non-obvious ones.
The through-line: AI handles the scaffolding, you handle the strategy. That's also the right mental model for writing Figma AI prompts. You're not asking the tool to design — you're giving it the constraints and asking it to build within them. The more precise your constraints, the less cleanup you do afterward.
The single most important habit shift: Stop prompting with nouns ("make a button") and start prompting with specifications ("generate a primary CTA button: rounded corners, #008080 background, white 16px text, with hover and disabled states"). The noun gets you a guess. The specification gets you something usable.
10 Ready-to-Use Figma AI Prompts (Organized by Skill Level)
These are structured for Figma's current AI feature set. Replace bracketed placeholders with your actual brand values before running.
Beginner: Build the Basics Right
If you're new to Figma's AI tools, start here. These prompts produce single-component outputs with predictable results. They're also good calibration runs — you'll learn fast how much specificity the tool needs before you move to more complex work.
Prompt 1 — Search bar component
Generate a simple search bar for a mobile app. Specs: rounded corners (8px radius), placeholder text "Search...", magnifying glass icon on the left, clear (X) icon on the right. Height: 44px. Background: white. Border: 1px solid #E0E0E0.
Prompt 2 — Brand palette application
Apply the [Brand Name] color palette to all selected elements in this frame. Primary: [hex]. Secondary: [hex]. Accent: [hex]. Preserve existing layout and spacing. Only update fill and stroke colors.
Prompt 3 — Profile card variations
Create 3 variations of a user profile card for a mobile app. Each variation should use a different background color from this palette: [hex1], [hex2], [hex3]. Include: avatar placeholder (40x40px circle), display name (bold, 16px), user handle (regular, 14px, muted color), and a Follow button. Keep layout identical across all three variations.
Intermediate: Add Constraints, Add Complexity
These prompts assume you have a design system or at least a set of brand rules to work from. The goal shifts from "generate a component" to "generate a component that fits into something larger."
Prompt 4 — E-commerce product listing
Generate an e-commerce product listing card for a desktop web layout. Grid: 3-column, 24px gutter. Each card includes: - Image placeholder (aspect ratio 4:3) - Product title (semibold, 16px, max 2 lines) - Price (bold, 18px, [Brand accent color]) - "Add to Cart" button (full-width, primary style) - Star rating row (5 stars, 12px icons) Maintain consistent spacing (16px internal padding) across all cards.
Prompt 5 — Design system refactor
Refactor these existing UI elements into reusable Figma components. Requirements: - Each component must have a defined name following the pattern: [Category/ComponentName] - All instances must reference the master component, not be standalone copies - Apply [Brand Name] design system tokens for color, type, and spacing - Flag any elements that don't map cleanly to existing tokens with a red annotation layer
Prompt 6 — Onboarding screen set
Generate 3 onboarding screen designs for a fitness tracking app.
Each screen introduces one core feature: (1) workout logging, (2) progress tracking, (3) community.
Requirements per screen:
- Hero illustration placeholder (full-width, 240px height)
- Headline (bold, 24px, centered)
- Supporting copy (regular, 16px, max 3 lines, centered)
- Primary CTA button ("Get Started" on screen 3, "Next" on screens 1-2)
- Progress indicator dots (3 dots, active state on current screen)
Tone: energetic but clean. No stock-photo feel.
Prompt 7 — Icon set, Material Design style
Create a set of 8 UI icons in Figma using a Material Design visual style. Icons needed: home, search, notifications, profile, settings, bookmark, share, close. Refer to the official Material Design icon guidelines for artboard size, stroke weight, line caps, and fill rules — apply those specs consistently across all 8 icons. Export-ready: each icon on its own frame, named exactly as listed above.
Power User: Chain Prompts, Build Systems
These aren't one-shot prompts. They're designed to run in sequence, with each output becoming the input for the next. That's where the real speed lives.
Prompt 8 — High-fidelity onboarding prototype
Generate a high-fidelity prototype for a 5-screen user onboarding flow. Include: welcome screen, account creation, email verification, preference selection, dashboard intro. Prototyping requirements: - Define interactions: tap/click triggers for all primary CTAs - Error states: empty form submission, invalid email format, network timeout - Feedback mechanisms: inline validation messages, success animations (specify timing) - Accessibility: meet standard tap target size and color contrast requirements Connect all screens with Figma prototype links before exporting.
Prompt 9 — Component library from brand guidelines
Create a component library in Figma based on these brand guidelines: [paste guidelines or attach file]. Library must include: - Typography styles: H1–H4, body, caption, label (mapped to actual font values) - Color styles: primary, secondary, accent, neutral, semantic (success/warning/error/info) - Base components: button (5 states), input (4 states), card, modal, badge, tag, avatar - Each component must use styles — not hardcoded values — so updating a style updates all instances Document each component with a usage note directly in Figma using a sticky note layer.
Prompt 10 — A/B test hero variations
Generate A/B test variations of a landing page hero section. Variant A (control): benefit-led headline, secondary subheadline, primary CTA button, hero image right-aligned. Variant B: question-led headline, social proof line (e.g., "Trusted by 10,000+ designers"), same CTA, no hero image — use a short feature list instead. Variant C: bold single-line headline (max 6 words), animated CTA button (pulse), minimal copy. All variants: same width (1280px), same background (#FFFFFF), same CTA text. Annotate each variant with its hypothesis (what you expect to perform differently and why).
The Three-Step Workflow: From Blank Canvas to Validated Prototype in One Session
Individual prompts are useful. A repeatable workflow is what actually changes how fast you ship.
Here's the sequence that maps directly to what Field described: AI handles the scaffolding at each step, you make the judgment calls between steps.
Step 1: Rapid Mockup with AI-Generated Components
Start with the screen you need to validate first, not the most interesting one. Use a specific prompt:
Generate a mobile checkout screen with: - Payment options row (credit card, Apple Pay, Google Pay icons) - Shipping address form (name, street, city, zip, country — all fields) - Order summary section (item name, quantity, price, subtotal, tax, total) - "Place Order" primary button (full-width, pinned to bottom) Layout: single-column scroll. 16px horizontal padding. 24px section spacing.
You're not designing here. You're generating a working scaffold that took 30 seconds instead of 30 minutes. The creative decisions — hierarchy, visual weight, where to add friction or reduce it — come in the next two steps.
Step 2: Style Application for Brand Consistency
Once the structure exists, apply your brand layer:
Apply [Brand Name] typography and color palette to the checkout screen. Typography: headlines in [Font, weight, size], body in [Font, weight, size]. Colors: primary actions in [hex], form borders in [hex], background in [hex], error states in [hex]. Do not change layout, spacing, or component structure — style only.
The key constraint in that prompt: "Do not change layout." Without it, AI styling tools often restructure as they restyle, which means you lose the scaffold you just built. Lock the structure, change the surface.
Step 3: User Flow Validation with Prototype Prompts
Now test the flow before it goes anywhere near a developer:
Create a prototype for the checkout flow connecting these screens: cart → shipping → payment → confirmation. Prototype requirements: - Trigger: tap "Checkout" on cart screen - Error handling: what happens if payment fails (show error state, not a dead end) - Success path: order confirmation screen with order number and "Continue Shopping" CTA - Back navigation: all screens except confirmation have a back arrow Flag any dead-end states (screens with no exit) with a red frame outline.
This step doesn't replace user testing. It surfaces the obvious problems — dead ends, missing error states, broken navigation — before they cost anyone else's time. Your energy goes to the flows that aren't obviously broken.
If you want this three-step structure pre-built with brand-specific templates, Ultra Prompt's Design & Creative category has dedicated workflow packs organized exactly this way.
Advanced: Chaining Prompts for Power Users
The single biggest difference between intermediate and power-user Figma AI work isn't the complexity of individual prompts. It's understanding that prompts are sequential, not isolated.
Most people treat each prompt as a standalone command. Power users treat each output as the input for the next prompt. The difference compounds fast.
Here's what a chained login flow looks like in practice:
Chain: Mobile Login Flow
Prompt 1 (Structure):
Generate a mobile login screen. Include: email field, password field, "Forgot password?" link, primary login button, divider with "or", Google SSO button.
Prompt 2 (Brand application — runs on Prompt 1 output):
Apply [Brand Name] primary colors and typography to this login screen. Primary button: [hex]. Input borders active state: [hex]. Links: [hex]. Do not change layout.
Prompt 3 (Flow validation — runs on Prompt 2 output):
Create a prototype for this login screen that includes: successful login path → dashboard, failed login → inline error on password field ("Incorrect password. Try again."), forgot password → email entry modal. Flag any state with no defined exit.
Each prompt is 30-60 seconds of work. The chain delivers a styled, prototyped, error-state-complete login flow in under five minutes. The judgment calls — whether the error copy is right, whether the SSO button should be above or below the divider, whether the brand application actually feels right — those are yours. AI built the scaffold. You own the decisions.
For a deeper look at staying in control of your work as AI handles more of the scaffolding, the piece on AI dependency vs. partnership covers that tension directly.
Two Rules for Brand Constraints in Prompts
Rule 1: Use hex codes, not color names. "Teal" means different things to different models. "#008080" doesn't.
Rule 2: Separate structure from style in every chained sequence. Generate the layout in one prompt. Apply the brand in the next. Doing both at once produces outputs that are harder to correct because errors in structure and errors in style are tangled together.
And one more thing worth flagging: Figma's AI tools will generate plausible-looking outputs that contain real design problems. Wrong contrast ratios. Missing error states. Components that look like your design system but break the token structure underneath. AI gets you 80% of the way there fast. Your job is the 20% that requires actual judgment — and that 20% is where the quality gap between good designers and everyone else shows up.
If you're thinking about how to calibrate that kind of AI-assisted judgment more broadly, 5 Things AI Gets Wrong Every Time is worth reading alongside this one.
FAQ: Figma AI Prompts
How do I write effective prompts for Figma's AI features?
Specificity is the only variable that consistently matters. Every prompt should include: what you want (component type), how it should look (dimensions, colors with hex codes, typography with font name and size), what constraints apply (brand system, spacing rules), and what states to include (hover, disabled, error). A prompt with all four of those elements produces a usable output. A prompt with one or two produces a starting point that needs heavy editing.
What prompts work best with Figma's AI tools?
Component generation prompts with explicit specs (dimensions, colors, states) outperform vague requests every time. The prompts in this article are structured to show exactly what that looks like across beginner, intermediate, and power-user levels.