Designers who use AI daily stopped treating Figma as a drawing tool and started treating it as a co-pilot. Below is a battle-tested set of prompts — each with a real usage scenario, expected output, and pitfalls. Tested with ChatGPT (GPT-5 class), Claude, and Gemini in Figma workflows; plugin-side tools like Figma AI and third-party assistants vary in availability by plan and region, so verify in-app.
How to use these prompts
Paste the prompt into your AI chat, then attach a screenshot, paste a JSON export from a Figma plugin (e.g., 'Design Tokens' or 'Figma to JSON'), or describe the screen. The AI does not see your canvas unless you give it data. For component work, export the layer tree via a plugin first — that is the single biggest quality boost.
A quick reality check: AI cannot auto-layout your file for you. It can propose structure, naming, tokens, and specs — you still apply them in Figma. Treat every output as a draft, not a deliverable.
1. Moodboard direction from a brand brief
Task: turn a text brief into visual references.
You are a senior brand designer. From the brief below, propose 5 distinct
visual directions. For each: 3 keywords, color mood (describe, don't invent
hex unless you're confident), typography pairings from Google Fonts,
and 3 search queries for Unsplash/Behance.
Brief: [paste]
Example output: direction 'Calm Industrial' → keywords: concrete, graphite, warm light → fonts: Inter + IBM Plex Mono → queries: 'brutalist interior', 'concrete texture macro'. Use it to build a Figma moodboard fast, then refine manually.
2. Screen inventory before wireframing
Task: don't start drawing until the flow is mapped.
Product: [one-liner]. Primary user: [persona].
List every screen needed for the core flow, grouped by state:
empty, loading, error, success, edge cases.
Output as a table: screen name
| purpose | key elements | entry point.
This catches the states designers forget — empty and error — before they cost a day.
3. Information architecture critique
Task: sanity-check a nav structure.
Here is my IA as nested markdown. Critique it against these heuristics:
breadth vs depth, label clarity, user mental model, scalability.
Flag anything deeper than 3 levels. Suggest a revised tree.
[IA]
4. Wireframe copy that doesn't sound like lorem ipsum
Task: real microcopy for prototypes so stakeholders react to meaning, not filler.
For each element below, write UI copy: button label, empty state,
tooltip, error. Tone: [tone]. Max 6 words for labels.
Element: [list].
Real copy changes feedback quality. Stakeholders critique meaning instead of spacing.
5. Auto-layout structure proposal
Task: convert a messy frame into an auto-layout plan.
Here is my layer tree (JSON). Propose an auto-layout structure:
which frames become vertical/horizontal, padding values, gap values,
and which items should be fixed vs fill container.
Justify each choice in one line.
[tree]
You apply it manually, but the reasoning saves trial-and-error. Note: Figma's auto-layout properties are direction, spacing, padding, and resizing — the AI should speak that vocabulary, not invent properties.
6. Component naming and variants
Task: consistent naming before the system rots.
Suggest component names and variant properties following a
[Atomic Design / your convention] scheme. For each: name,
variants (property=value), and when to split into a new component.
Components: [list].
Naming discipline is the cheapest design-system investment you can make.
7. Design tokens from a color palette
Task: turn raw colors into a token set.
From these colors, propose semantic tokens: background, surface,
border, text-primary, text-muted, accent, danger, success.
Map each to light and dark. Output as a table.
Colors: [list].
Tokens are the bridge between Figma and code. Keep names code-friendly (kebab-case, no spaces).
8. Accessibility audit of contrast and labels
Task: pre-check before handoff.
Check these color pairs against WCAG 2.2 contrast requirements
(normal text 4.5:1, large text 3:1). List pass/fail and the fix.
Pairs: [foreground on background].
WCAG 2.2 is the current W3C recommendation (published October 2023). Run the numbers through a real contrast checker too — AI arithmetic is not a calculator.
9. Prototype interaction logic
Task: plan flows before wiring them.
For this flow, list every prototype interaction: trigger, action,
destination, and transition. Output as a table I can wire in Figma.
Flow: [describe].
10. Component documentation
Task: auto-draft docs.
Write documentation for this component: purpose, when to use,
when not to use, props/variants, do/don't examples, accessibility notes.
Component: [describe or paste].
11. Handoff spec sheet
Task: the doc developers actually read.
Generate a handoff spec for these screens: spacing scale, type scale,
component usage, states, assets needed, and open questions.
Screens: [list].
12. Design system health check
Task: find drift.
Review this component list. Flag duplicates, near-duplicates,
inconsistent naming, and missing states. Suggest merges.
[List].
13. Responsive breakpoint plan
Task: stop designing one width.
Propose breakpoints and layout behavior (stack, reflow, hide, collapse)
for this screen across mobile, tablet, desktop.
Screen: [describe].
14. Usability test script
Task: validate before shipping.
Write a 5-task usability test script for this prototype:
task, scenario, success criteria, follow-up question.
Prototype: [describe].
What actually works
| Prompt type | Time saved | Reliability |
|---|---|---|
| Copy & docs | High | High |
| Structure & IA | Medium | Medium |
| Tokens & naming | Medium | High |
| Contrast math | Low | Low — verify |
| Auto-layout logic | Medium | Medium |
The pattern is clear: AI is strongest on language and structure, weakest on anything requiring exact visual judgment. Use it to think faster, not to replace the eye.
Start with prompts 1, 5, and 11 — they cover the three biggest time sinks: starting, structuring, and handing off. Iterate your own versions; the best prompt library is the one you actually reuse.
Comments