12 Prompt Patterns for UI/UX Design: Figma, Prototypes, and Component Systems
Introduction
The gap between a designer's vision and the final rendered interface often comes down to how well you can communicate intent. In 2026, prompting has become a core design skill—not just for generating images, but for structuring Figma components, setting up Auto Layout constraints, and creating interactive prototypes. Yet most designers still use generic prompts like "make a landing page" and get generic results.
This article compiles 12 battle-tested prompt patterns I use daily in production workflows. Each pattern includes a real usage example, the exact prompt text, and the outcome. No fluff, no theory—just prompts that work with current tools in mid-2026.
Why Prompt Engineering Matters for UI/UX
Before diving into prompts, understand the mechanics. Modern design tools (Figma, Sketch, Framer) and AI copilots (Galileo AI, Visily, Uizard) all accept natural language input. However, they interpret prompts differently:
- Component generators (e.g., Figma's AI plugins) need structural cues: layout type, spacing, breakpoints.
- Prototype builders need flow logic: triggers, transitions, edge cases.
- Visual generators need style constraints: color system, typography scale, component states.
A well-crafted prompt reduces iterations from 10+ to 2–3. According to a 2025 survey by UX Tools, teams that adopted structured prompting cut design-to-dev handoff time by 40% (source: UX Tools State of Design Tools 2025 report).
The 12 Prompt Patterns
Pattern 1: The Component Spec Prompt
When to use: Generating a new Figma component from scratch.
Template:
Create a [component type] with [key properties].
- States: [list states]
- Auto Layout: [horizontal/vertical, padding, gap]
- Resizing: [fill/fixed/hug]
- Variants: [list variant axes]
Real example:
Create a primary button component with label and left icon.
- States: default, hover, pressed, disabled, loading
- Auto Layout: horizontal, padding 12px horizontal, 8px vertical, gap 8px
- Resizing: label = hug, icon = fixed 20x20, button = hug
- Variants: size = {sm, md, lg}, color = {blue, red, green}
Outcome: A fully structured button component with 15 variants (3 sizes × 5 states) in under 30 seconds.
Pattern 2: The Layout Constraint Prompt
When to use: When Auto Layout is misbehaving or you need precise alignment.
Template:
Apply Auto Layout: direction=[horizontal|vertical], padding=[top right bottom left], gap=[value], alignment=[min|center|max|space between], distribution=[packed|fill]
Real example:
Apply Auto Layout to this card: direction vertical, padding 16px all sides, gap 12px, alignment min (left), distribution packed. Inside container: set image to fill width fixed height 200px, title to hug, description to fill width, action row to horizontal with space between.
Outcome: A perfectly constrained card that resizes correctly at any breakpoint.
Pattern 3: The Responsive Breakpoint Prompt
When to use: Generating responsive variants for mobile, tablet, desktop.
Template:
Create breakpoint variants for [component name]:
- Desktop (1440px): [layout description]
- Tablet (768px): [layout description]
- Mobile (375px): [layout description]
- Key changes: [list specific layout shifts]
Real example:
Create breakpoint variants for the navigation bar:
- Desktop (1440px): horizontal layout, logo left, nav links center, CTA right
- Tablet (768px): horizontal layout, logo left, hamburger menu right
- Mobile (375px): vertical layout, full width, hamburger menu top right
- Key changes: nav links collapse to hamburger on tablet, CTA becomes second button on tablet
Outcome: Three responsive variants with correct auto layout, no manual rework.
Pattern 4: The Prototype Flow Prompt
When to use: Creating interactive prototypes with smart animate.
Template:
Create prototype connections:
- Trigger: [on click | on hover | on drag | after delay]
- Action: [navigate to | swap with | open overlay | back]
- Animation: [smart animate | dissolve | move in/out | push]
- Easing: [ease-in-out | spring | custom cubic bezier]
- Duration: [ms]
Real example:
Create prototype connections for the onboarding flow:
1. Screen 1: "Get Started" button → on click → navigate to Screen 2 → smart animate → 300ms → ease-in-out
2. Screen 2: "Skip" link → on click → navigate to Dashboard → move in from right → 400ms
3. Screen 2: "Next" button → on click → navigate to Screen 3 → slide up → 300ms → spring (mass=1, stiffness=200, damping=20)
4. Screen 3: "Finish" button → on click → navigate to Dashboard → dissolve → 200ms
Outcome: A fully connected prototype with polished animations, no manual connection drawing.
Pattern 5: The Design System Token Prompt
When to use: Generating consistent color, typography, and spacing tokens.
Template:
Generate design tokens:
- Colors: [primary, secondary, success, warning, error, neutral] with light/dark variants
- Typography: [headings h1-h6, body, caption, overline] with font family, weight, size, line height
- Spacing: [4px base scale] up to [64px]
- Border radius: [none, sm, md, lg, full]
- Shadows: [elevation levels 1-5]
Real example:
Generate design tokens for a fintech app:
- Colors: primary #1A73E8, secondary #34A853, success #34A853, warning #FBBC04, error #EA4335, neutral #202124
- Typography: Inter font, h1 bold 32px/40px, h2 bold 24px/32px, h3 semibold 20px/28px, body regular 16px/24px, caption regular 12px/16px
- Spacing: 4px base, scale: 4, 8, 12, 16, 24, 32, 48, 64
- Border radius: none 0px, sm 4px, md 8px, lg 12px, full 999px
- Shadows: level 1 0px 1px 3px rgba(0,0,0,0.12), level 2 0px 4px 6px rgba(0,0,0,0.15), level 3 0px 10px 20px rgba(0,0,0,0.19)
Outcome: A complete token set ready to import into Figma variables or export as CSS custom properties.
Pattern 6: The Component Library Prompt
When to use: Generating an entire component library from a prompt.
Template:
Create a [type] component library with:
- Base components: [list]
- Composite components: [list]
- Each component should have: [states, variants, responsive behavior]
- Naming convention: [pattern]
Real example:
Create an e-commerce component library with:
- Base components: button, input, select, checkbox, radio, toggle, badge, chip, avatar
- Composite components: product card, cart item, review card, filter panel, search bar, navigation bar, footer
- Each component should have: default, hover, active, disabled, error states; sm/md/lg size variants; dark mode support
- Naming convention: [category]/[component]/[variant]/[state]
Outcome: A structured library with 9 base components and 7 composites, each with proper variant hierarchy.
Pattern 7: The Interaction Pattern Prompt
When to use: Designing complex micro-interactions (not just page transitions).
Template:
Design interaction for [element]:
- Trigger: [specific user action]
- Feedback: [visual/audio/haptic]
- Duration: [ms]
- Easing: [curve]
- Edge cases: [list]
Real example:
Design interaction for the "Add to Cart" button:
- Trigger: tap on button
- Feedback: button scales to 0.95 → icon changes to checkmark → button text changes to "Added!" → after 1.5s reverts to original state
- Duration: scale 100ms, icon swap 200ms, text change 300ms, revert 1.5s delay then 300ms
- Easing: scale spring (mass=0.5, stiffness=300, damping=15), text change ease-in-out
- Edge cases: button disabled if item out of stock, button shows error state if API fails
Outcome: A detailed interaction spec that developers can implement directly.
Pattern 8: The Accessibility Prompt
When to use: Ensuring components meet WCAG 2.2 standards.
Template:
Make [component] accessible:
- Color contrast: [ratio minimum]
- Focus indicators: [style]
- Screen reader labels: [pattern]
- Keyboard navigation: [order]
- Touch targets: [minimum size]
Real example:
Make the card component accessible:
- Color contrast: all text/background combos ≥ 4.5:1 for normal text, ≥ 3:1 for large text
- Focus indicators: 2px solid outline with 2px offset, contrast ratio ≥ 3:1 against adjacent colors
- Screen reader labels: aria-label on card = card title + card subtitle, role="article"
- Keyboard navigation: Tab order = image first → title → description → CTA button
- Touch targets: all interactive elements ≥ 44x44px
Outcome: WCAG-compliant components with built-in accessibility considerations.
Pattern 9: The Design Review Prompt
When to use: Getting AI feedback on your design decisions.
Template:
Review this [design type] for:
- Consistency: [token usage, spacing, typography]
- Usability: [Fitts's law, Hick's law, Jakob's law]
- Accessibility: [color contrast, focus order, labels]
- Responsiveness: [breakpoint behavior]
- Provide specific recommendations with before/after examples.
Real example:
Review this checkout flow design for:
- Consistency: Are button styles, spacing, and typography consistent across all 4 screens?
- Usability: Is the primary action ("Place Order") the most prominent? Are secondary actions less visible?
- Accessibility: Is the error message for invalid card number announced to screen readers?
- Responsiveness: Does the two-column layout collapse properly on tablet?
- Provide specific recommendations with before/after examples.
Outcome: Actionable design critique with concrete fixes.
Pattern 10: The Data Visualization Prompt
When to use: Creating charts, dashboards, or data-heavy interfaces.
Template:
Create [chart/dashboard type] for [data context]:
- Chart type: [bar, line, pie, scatter, etc.]
- Data points: [number]
- Color coding: [category colors]
- Interactive elements: [hover tooltips, drill-down, filters]
- Responsive behavior: [how chart adapts]
Real example:
Create a sales dashboard widget for monthly revenue:
- Chart type: combination bar (revenue) + line (growth %)
- Data points: 12 months
- Color coding: revenue bars in primary blue, growth line in green, negative growth in red
- Interactive elements: hover tooltip showing exact revenue + growth %, click on bar to see daily breakdown
- Responsive behavior: on mobile, remove growth line, show only revenue bars with simplified tooltips
Outcome: A production-ready data visualization component.
Pattern 11: The Motion Design Prompt
When to use: Defining animation principles for your design system.
Template:
Define motion tokens for [system name]:
- Duration: [micro, short, medium, long]
- Easing: [standard, decelerate, accelerate, spring]
- Properties: [opacity, transform, filter]
- Stagger: [delay per item]
Real example:
Define motion tokens for the mobile app:
- Duration: micro 100ms (press feedback), short 200ms (tooltip), medium 350ms (page transitions), long 500ms (overlays)
- Easing: standard cubic-bezier(0.4, 0, 0.2, 1), decelerate cubic-bezier(0, 0, 0.2, 1), accelerate cubic-bezier(0.4, 0, 1, 1), spring (mass=1, stiffness=200, damping=20)
- Properties: opacity, transform (translate, scale, rotate)
- Stagger: 50ms delay between items in a list, max 300ms total
Outcome: Consistent motion language across all components.
Pattern 12: The Handoff Documentation Prompt
When to use: Generating developer-ready specs from your designs.
Template:
Generate handoff documentation for [component/screen]:
- Dimensions: [width, height, breakpoints]
- Spacing: [padding, margin, gap]
- Typography: [font, size, weight, line height, letter spacing]
- Colors: [hex values, opacity]
- States: [list with visual specs]
- Interactions: [triggers, animations, transitions]
- Assets: [icons, images with formats and sizes]
Real example:
Generate handoff documentation for the login screen:
- Dimensions: 375x812px (mobile), 1440x1024px (desktop)
- Spacing: container padding 24px horizontal, 32px top, 48px bottom; between fields 16px; between last field and button 24px
- Typography: title Inter bold 24px/32px #202124; label Inter medium 14px/20px #5F6368; input text Inter regular 16px/24px #202124; error Inter regular 12px/16px #EA4335
- Colors: background #FFFFFF, input border #DADCE0, input border focus #1A73E8, error #EA4335, primary button #1A73E8
- States: input default (border #DADCE0, bg #FFFFFF), input focus (border #1A73E8, bg #F8F9FA), input error (border #EA4335, bg #FCE8E6), input disabled (border #E8EAED, bg #F1F3F4)
- Interactions: button disabled until email & password valid, on submit button shows loading spinner, on error shake animation
- Assets: logo.svg (120x40px), eye-icon.svg (24x24px, toggle visibility)
Outcome: Complete developer handoff with no ambiguity.
Real-World Case Study: Fintech Dashboard Redesign
Problem: A fintech startup's dashboard had inconsistent components—buttons with different padding, cards with mismatched spacing, and a prototype that didn't reflect the final product.
Solution: We implemented the Component Library Prompt (Pattern 6) and Design System Token Prompt (Pattern 5) to generate a unified library. Then used the Prototype Flow Prompt (Pattern 4) to rebuild the interactive prototype.
Results:
- Component count reduced from 47 to 23 (reusable variants)
- Design-to-dev handoff time dropped from 3 days to 1 day
- Prototype fidelity increased—stakeholders approved on first review
Tool used: Figma with AI plugins (Magician, Visily). ASI Biont supports connecting to Figma and other design tools through its API for automated token export—find out more at asibiont.com/courses.
Conclusion
Prompting for UI/UX design isn't about replacing creativity—it's about removing friction. The 12 patterns above cover 90% of my daily design workflow: from generating components and applying constraints to creating prototypes and documenting handoffs. Start with Patterns 1 and 2 if you're new, then gradually add Patterns 6 and 12 for system-level work. The key is specificity: the more constraints you provide, the less you'll need to manually fix later.
In 2026, the best designers aren't the ones who can draw the most beautiful screens—they're the ones who can communicate intent with such precision that the output is production-ready on first pass. These prompts are your communication toolkit.
Comments