How to use Claude with Figma: a practical guide
In brief
Figma is where design lives. Claude helps with everything around the design — copy, specs, handoff notes, design feedback write-ups, and the back-and-forth between design and engineering. Here's what actually works.
Contents
Claude does not see your Figma files — it cannot view screens, analyze visual designs, or read your component tree unless you paste content from them. What it can do is handle all the written work that surrounds design: copy, specs, handoff notes, feedback documentation, and design system documentation.
Most design teams are not bottlenecked by the tools — they are bottlenecked by the writing that design produces downstream. That is where Claude helps.
What Claude and Figma are good for together
Writing UI copy directly in Figma
The cleanest workflow: use a Figma plugin that connects to Claude and lets you generate or rewrite copy in place.
The plugin that works best for this is the "Claude for Figma" community plugin (search in the Figma Community) or use a plugin like "AI Text" that supports custom API endpoints. Set it up once with your Anthropic API key, and you can select any text layer in Figma and ask Claude to rewrite it, shorten it, or generate alternatives.
What this replaces: the round-trip between designer and copywriter for button labels, error messages, empty states, tooltips, and microcopy. The designer can iterate on copy in the same tool as the design.
Writing component documentation
Design systems require documentation. Every component needs a usage note, a list of variants, and guidance on when to use it vs a similar component. This documentation is almost always out of date because writing it is tedious.
How to do it:
- Describe your component to Claude: component name, what it does, its variants, when to use it, and any common misuses you want to document
- Prompt: "Write documentation for a design system component. Sections: Description (1-2 sentences), When to use, When not to use, Variants, Accessibility notes. Plain language, specific."
- Paste into your design system documentation (Notion, Confluence, or a Figma frame)
Writing design specs for engineering handoff
When a design is ready for engineering, the spec that describes interactions, states, and edge cases is often missing or lives only in the designer's head.
How to do it:
- Screenshot your design and paste it into Claude (Claude can read images), or describe the component and its states in text
- Prompt: "Write a spec for engineering handoff. Describe: default state, hover state, active/pressed state, disabled state, loading state, error state, empty state. For each: what it looks like (reference the design), interaction behavior, any animation or transition. Be specific."
- Paste into the Figma file's annotation frame or the handoff doc
Writing design feedback
When reviewing designs, written feedback is more useful than verbal but takes longer to produce. Claude can help structure and sharpen design critique.
How to do it:
- Take a screenshot or describe the design you are reviewing
- Describe your feedback informally: "The primary CTA is too similar to the secondary, the empty state is confusing, the spacing feels off in the table"
- Prompt: "Turn this into structured design feedback. For each issue: (1) the observation, (2) why it is a problem for the user, (3) a suggested direction. Respectful, specific."
- Send as written feedback or paste into FigJam comments
What does not work well
Claude cannot see Figma files by default. Unless you screenshot or paste content, Claude has no visual context. All text-based workflows work; anything requiring visual analysis needs you to provide the screenshot.
Claude cannot generate production-quality UI. It can help draft copy and documentation, but it does not understand your design system's constraints, your brand voice, or the exact visual context unless you tell it.
Copy generated without visual context is often off. If you ask Claude to write microcopy without showing it the design, the length, tone, and character count may not fit the UI. Always include context about where the copy lives (button label, empty state, error message, tooltip) and any character limits.
The workflow designers use most
Screenshot a screen → paste into Claude → "Review this UI for clarity and usability. What is confusing? What copy should be rewritten? What states or edge cases might be missing?"
This is not a replacement for user testing, but it is a fast way to catch obvious issues before a design goes to engineering.
This guide is part of the Claude + Tool series — practical guides for using Claude alongside the tools your team already uses. 14 guides published.
Further reading
- Discover tools that work with Claude — the connectors directory