Are you tired of rebuilding buttons and re-checking contrast ratios? In modern UI/UX work, the difference between a decent design and a scalable system often comes down to how clearly you communicate what needs to be done. AI assistants in Figma respond to precise instructions — and a well-written prompt is your shortcut. This collection gives you 10 copy-paste prompts for UI/UX work in Figma: components, auto layout, prototypes, and design-system audits. Every prompt is detailed, and you can adapt it to your own project.
Each prompt below is written as a standalone block. You can paste it into ChatGPT, Claude, Mistral, or any AI assistant with Figma plugin access. If you use Figma's built-in AI features, strip the role-playing part and keep the core instructions — the result will still be accurate.
1. Component Naming Convention
A clean layer panel starts with consistent names. If your team is building a component library, use this prompt to define a naming standard.
Prompt:
Act as a Figma design-system lead. Define a naming convention for components, variants, and properties. Use the pattern ComponentName/State/Property. Provide a Markdown table with examples for buttons, inputs, badges, and cards.
Example: The result should look like this:
| Component | State | Property | Full name |
|---|---|---|---|
| Button | Primary | Default | Button/Primary/Default |
2. Auto-Layout Responsive Card
Auto layout is the backbone of flexible UI in Figma. To get a step-by-step building spec:
Prompt:
Create a guide for building a responsive card with auto layout in Figma. Include exact padding, gap, min/max width and alignment values for mobile, tablet, and desktop.
Example: Use the output to set a card with 16px padding, 12px gap, and a max-width of 480px. For a deeper dive, refer to Figma's official help section on auto layout (help.figma.com).
3. Design Token Audit
Design tokens keep color and typography consistent across files. Run this prompt when your styles start to multiply.
Prompt:
Audit my Figma color styles, text styles, and effects. List duplicates, suggest a normalized naming structure based on a category/type/role pattern, and output a migration table with old and new names.
Example: The table might show that PrimaryBlue and BrandColor both use #0D6EFD — one of them should be removed.
4. User Flow Diagram
Turn a feature description into a structured flow before you prototype.
Prompt:
Act as a UX researcher. Convert this feature into a user flow in Mermaid syntax: 'User signs up with email, verifies code, enters profile data, then lands on the dashboard.'
Example: You get Mermaid code that you can render in Notion, GitHub, or any Markdown viewer.
5. Accessibility Contrast Check
Accessibility is non-negotiable. Check WCAG 2.2 AA compliance directly from your design.
Prompt:
Review my current color palette for WCAG 2.2 AA contrast against white background. For each pair that fails, propose a darker hex value that passes. Also check minimum text sizes.
Example: A fix might be: 'Body text #767676 on white fails, use #5A5A5A instead.' The guidelines are defined by the W3C (w3.org/TR/WCAG22).
6. Micro-Interaction Timing
Great products feel alive because of micro-interactions. Get a precise animation spec:
Prompt:
Generate a micro-interaction spec for a button: hover, active, loading, and success. For each state, provide the duration in seconds and an easing curve with a cubic-bezier value.
Example: 'Hover transitions in 0.15s ease-out; the loading spinner runs a 1.2s loop with linear easing; success uses a 0.3s spring.'
7. Design System Health Audit
A design system is only healthy when people actually use it. This prompt checks for orphaned styles and broken instances.
Prompt:
Analyze the health of my Figma library. Check component usage rate, unused styles, and broken instances. Produce a numbered list of issues with priority labels (High, Medium, Low).
Example: Use the list to plan a cleanup sprint with your design team.
8. Wireframe to High-Fidelity Specification
Move from a rough idea to a codable spec:
Prompt:
Take this wireframe description and produce a high-fidelity spec: a login screen with a centered card, a logo, two inputs, and a primary button. Include an 8pt type scale, 8pt spacing grid, shadow levels, and a component mapping table.
Example: The output gives developers exact typography, spacing, and shadow tokens instead of vague instructions.
9. Variants Matrix
Plan your components so you never miss a combination.
Prompt:
Create a variants matrix for a button component. Use states default, hover, pressed, and disabled, plus sizes sm, md, and lg. Output a Markdown table with property names and visual description for each cell.
Example: The 3 × 4 matrix becomes the foundation for Figma's Variants feature.
10. Usability Test Plan
Before you ship, test your prototype with real users. This prompt produces a research-ready plan:
Prompt:
Act as a UX researcher. Write a 30-minute usability test plan for a shopping-cart prototype. Include 5 tasks, measurable success metrics (task completion, time-on-task), and 5 debrief questions.
Example: One task might be 'Find the checkout button and complete the purchase.' For methodology, see NN/g's classic guide to usability testing (nngroup.com/articles/usability-testing-101).
These 10 prompts cover the full UI/UX loop: structure, build, review, and test. Copy the ones you need, replace the placeholder values with your project data, and you'll save hours every week while keeping consistency high. Which prompt will you try first? Open Figma, find a component that feels messy, and run prompt #2 or #9 today.
Comments