Introduction
The UI/UX design world has been supercharged by AI. Tools like ChatGPT, Claude, and specialized Figma plugins can now handle tedious tasks—writing component descriptions, generating design tokens, or auditing accessibility—so you can focus on creative problem-solving. But the output quality depends entirely on the prompt you give. A vague prompt like "make it look good" yields vague results.
This guide collects 10 battle-tested prompts that I use daily in my Figma workflow. They cover the three pillars of modern design: auto layout for responsive interfaces, component libraries for scalability, and prototypes for user testing. Each prompt includes a copy-paste template, a practical example, and expert tips. No fluff, just working prompts.
Why These Prompts Work
The prompts listed below are built on two core principles: specificity and context. When you feed an AI model a well-structured instruction with constraints (like WCAG contrast ratios or Nielsen heuristics), it produces actionable output instead of generic suggestions. In my experience, teams that adopt prompt-based design workflows reduce Figma file setup time dramatically. You can verify the underlying methods from reputable sources: Nielsen Norman Group for usability heuristics, W3C/WAI for accessibility guidelines, and Figma's official Auto Layout documentation.
1. Usability Heuristic Audit
Description:
This prompt transforms your AI assistant into a UX researcher that evaluates your interface based on Nielsen Norman Group’s 10 Usability Heuristics. It helps spot navigation issues, confusing labels, or missing error states before you commit to user testing.
Prompt:
Act as a senior UX researcher at a design agency. I'll give you a detailed description of a UI screen.
Your task is to audit the design against Nielsen Norman Group's 10 usability heuristics:
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
For each heuristic, provide:
- A specific issue found in my design (or say "OK" if none).
- Why it's a problem, referencing the heuristic.
- A concrete fix suggestion (preferably with auto layout or component changes).
- Priority: High / Medium / Low.
Finally, list the top 5 most critical changes, sorted by impact.
[Describe your screen here, e.g., a mobile checkout flow with 3 form fields and a payment button]
Usage example:
Imagine you've designed a multi-step checkout. Paste the prompt and describe the screen: "A two-column checkout with billing address on the left, order summary on the right, and a 'Place Order' button that is not disabled when fields are empty." The AI will pop out with concrete improvements, like changing the disabled button to a tooltip or adding a progress indicator.
Source: Nielsen Norman Group's 10 Usability Heuristics
2. Component Library Structure Generator
Description:
Building a design system in Figma is overwhelming. This prompt helps you define a scalable component hierarchy, including names, variants, and auto layout nesting. Use it as a blueprint before you start creating frames.
Prompt:
Act as a design systems architect. I need to build a component library in Figma for a SaaS product.
Generate a complete component tree with the following levels:
- Base-level components (buttons, inputs, icon boxes)
- Composite components (input with label, dropdown, tooltip)
- Layout patterns (card, table row, modal)
For each component, specify:
- Name (following Figma's naming convention: type/name/variant)
- Auto layout direction (horizontal/vertical)
- Padding, gap, and corner radius values
- Variants (e.g., Button has primary/secondary/ghost sizes)
- Light and dark theme appearance
Use standard design tokens (spacing: 4px grid; color: primitives + semantic tokens).
Format the output as a markdown table.
[Describe your product's UI type, e.g., a B2B analytics dashboard with many data tables and charts]
Usage example:
Paste this prompt into ChatGPT before you open Figma. The AI will output a structured table showing "Buttons" → "PrimaryLarge" → "auto: horizontal, padding 16/24, radius 8". You can recreate it in 15 minutes instead of spending a full day on hierarchy.
Source: Figma Best Practices for Components
3. Auto Layout Responsive Rule Generator
Description:
Auto Layout is powerful, but it's easy to create a layout that breaks on smaller screens. This prompt generates behavior rules for your Figma frames—how they should stretch, wrap, or reorder when resized.
Prompt:
Act as a Figma auto layout expert. I have a design component with the following structure:
[Describe component, e.g., a header with a logo, navigation menu, and a CTA button]
Define responsive behavior rules for it:
- Container width: fixed vs. fill vs. hug
- Child alignment: top, center, bottom
- Sizing: fixed size, fill container, or hug contents
- Gap and padding adjustments for breakpoints (desktop: 1440, tablet: 768, mobile: 390)
- Which children should wrap or collapse
Also provide two alternative layouts:
1. Default breakpoint
2. Mobile (hamburger menu hidden under a toggle)
Format your answer as a bulleted specification sheet.
[Describe your component or paste a screenshot description]
Usage example:
You have a navbar that looks great on desktop but crowds on mobile. Run this prompt with the description "logo on left, 5 links center, CTA right". The AI suggests that links become "fill" at mobile width, the CTA drops below, and padding reduces from 24px to 16px. You apply these rules to your auto layout frame, and it just works.
Source: Figma Auto Layout Documentation
4. Prototype Flow Builder Prompt
Description:
Crafting a user journey for a prototype is often where designers get stuck. This prompt helps you define the states, interactions, and hotspots for your Figma prototype, ensuring a logical flow.
Prompt:
Act as a senior UX designer specializing in prototyping. I'm building an interactive prototype in Figma for the following feature:
[Describe feature, e.g., a user profile editing screen]
Help me design the interaction flow step by step:
1. List all necessary screens/states (default, edit, validation error, success).
2. For each screen, specify the hotspots (clickable areas) and their navigation targets.
3. Describe the micro-interactions between screens (e.g., fade, slide, modal popup).
4. Define prototype settings: start frame, scrolling behavior, and smart animate triggers.
5. Suggest error scenarios and how to represent them visually.
Output as a markdown flowchart with arrows (e.g., Screen A --> Screen B on condition X).
Usage example:
For a login screen, this prompt produces a flow: LoginScreen → SuccessfulLogin (Dashboard) / FailedLogin (ErrorState) → ForgotPassword. It also gives you the hotspot coordinates and Smart Animate parameters, saving you hours of clicking around in Figma.
Source: Figma Prototyping Documentation
5. Color Palette Generator with Contrast Checked
Description:
Choosing accessible colors is crucial. This prompt generates a full palette—base, hover, active, and disabled—while automatically checking against WCAG 2.1 contrast ratios. It works best when you provide a brand color or a hex value.
Prompt:
Act as a color theorist and accessibility auditor. I need a complete UI color palette for [describe product], starting from a brand color: [hex value].
Generate:
- 50/100/200/300/400/500/600/700/800/900 shades for the primary color
- 3 neutral colors (background, surface, text)
- A success/error/warning notification set
For each color pair (text on background, button on surface, etc.), calculate the WCAG contrast ratio and say "Pass" (AA) or "Fail". If it fails, suggest a darker or lighter alternative.
Then provide the colors in a table format:
| Token name | Hex | Usage | Contrast | Pass/Fail |
Usage example:
Paste your brand blue (#0066FF) into the prompt. The AI returns a tonal ramp with exact hex values, plus a warning that #0066FF on white is 4.5:1 (barely AA), recommending #0052CC for body text. You create semantic color styles in Figma with confidence.
Source: WebAIM Contrast Checker
6. Design Tokens Generator for Figma
Description:
Design tokens are the single source of truth for your design system. This prompt extracts a token list from your existing design or from a component description, formatted for tools like Tokens Studio, Style Dictionary, or even plain JSON.
Prompt:
Act as a systems thinker and token architect. Based on the following description of my design components, generate a design token set.
[Paste component descriptions, e.g., "buttons with 8px radius, 16px padding, brand blue background, white text"]
Output in JSON format with three namespaces:
- Type: { fonts, sizes, weights, lineHeights }
- Color: { primitives (hex) and semantic (bg, surface, text, border, focus) }
- Spacing: { 4px scale, 8px scale }
For each token, include a comment explaining its intended use. Also give the Figma variable equivalent notation (e.g., $color.primary.500).
Usage example:
Run this prompt on a few screens with hardcoded values. You get a clean JSON token list that you can import into Figma Variables or Tokens Studio, and then apply to auto layout for consistency.
Source: W3C Design Tokens Community Group
7. Typography Scale Builder
Description:
A good typographic scale is the backbone of UI design. This prompt creates a modular scale based on your brand feeling, plus the corresponding text styles for Figma (including line heights, letter spacing, and responsive behavior).
Prompt:
Act as a typography expert for digital products. Design a cohesive type scale for [describe UI type, e.g., a mobile app for tracking fitness].
Requirements:
- Base size: 16px, scale ratio 1.25 (Major Third) or justify another ratio
- Generate 8 styles: Display, H1, H2, H3, Body-Large, Body, Caption, Overline
- For each, specify: font size, line height, weight, letter spacing, and margin-bottom
- Provide two font choices: one for headings (e.g., Inter or Sora) and one for body (e.g., Roboto)
- Describe how it should scale on mobile vs desktop (clamp or media query)
Format as a table with a Figma text style name and CSS equivalent.
Usage example:
For a content-heavy dashboard, the prompt gives you a harmonious scale, preventing you from using 10 different font sizes. You then create text styles in Figma, and the AI's responsive suggestions help you adjust for tablet.
Source: Material Design Type Scale
8. Micro-Interaction and Motion Mockup Prompt
Description:
Micro-interactions add polish. This prompt helps you describe button states, hover effects, and load animations in a way that the Figma "Smart Animate" can replicate. It's also useful for creating Lottie animation specs.
Prompt:
Act as a motion designer for UI. I want a micro-interaction for [describe element, e.g., a like button on a social media post].
Describe:
- Idle state (visual style)
- Hover state (scale, color, shadow)
- Press/active state (translate, easing)
- Feedback animation (icon change, confetti, pulse)
- Success animation (e.g., checkmark bounce)
- Error animation (shake)
Include exact values: duration (ms), easing (ease-in-out, cubic-bezier), transform values, and opacity.
Also tell me how to build this with Figma's Smart Animate (which properties to animate, trigger settings, and component variants).
Usage example:
You want a playful like button. The prompt returns a detailed spec—scale up to 1.2, a burst of particles, and a 150ms ease-out bounce. You create two component variants (default and active) and connect them with Smart Animate.
Source: Figma Smart Animate Documentation
9. Responsive Breakpoint Strategy Prompt
Description:
Figma's auto layout often works at one size, but real products need responsive behavior. This prompt helps you define breakpoint strategies (mobile-first vs desktop-first), including how components should re-flow, hide, or collide across screens.
Prompt:
Act as a responsive design consultant. I offer a Figma component/system with the following structure:
[Describe, e.g., an admin dashboard with sidebar, top nav, table, and filters]
Define a breakpoint strategy:
- Breakpoints: 390, 768, 1024, 1440
- For each breakpoint, specify:
- Layout grid columns and gutters
- Component visibility (hide/show)
- Auto layout wrap direction
- Font size scaling (clamp values)
- Prioritize mobile-first vs desktop-first and justify your choice
Give the result as a table with a short explanation per breakpoint.
Usage example:
For a dashboard, the AI suggests that the sidebar collapses into an overlay at 1024px and filters move below the table at 768px. You can then build those variants using Figma's component properties and breakpoint constraints.
Source: Figma Constraints and Responsive Design
10. Usability Copy & Empty State Prompt
Description:
Empty states, error messages, and onboarding copy often get overlooked. This prompt writes clear, concise, and human-sounding UX copy that complements your Figma mockups.
Prompt:
Act as a UX writer and conversational strategist. I need copy for the following UI states:
[Describe state, e.g., a user has no saved items in a wishlist]
For each state, write:
- A headline (max 6 words)
- Supporting body copy (max 15 words)
- A call-to-action button label
- Optional tone: friendly and professional
- Also suggest an icon or illustration concept.
Provide two alternatives: one concise (for small screens) and one explanatory (for first-time usage).
Usage example:
For an empty inbox, the prompt outputs: Headline: "Your inbox is clear" Body: "New messages will appear here." CTA: "Explore feed" and an icon suggestion (a paper plane with swoosh). This saves you from writing dry "No items found."
Source: Figma's Guide to Better UX Copy
Advanced Prompting Tips
To get the best results from these prompts, follow these practices:
- Provide context: Include a text description of your screen, component, or color palette. The AI can't see your Figma file unless you paste an image or detailed spec.
- Ask for structured output: Request tables, JSON, or bullet lists. This makes it easy to convert AI responses into Figma variables, tokens, or documentation.
- Iterate: If the first output is too generic, refine the prompt. Add constraints like "mobile-first"
mobile-first
Comments