Claude Code lets designers turn Figma frames into working code, build prototypes that run in a real browser, and send live UI back to Figma as editable layers, mostly through Figma's official MCP server. You describe what you want, Claude reads the design and writes the code, and you check the result against the mockup.
Claude Code is Anthropic's agentic coding tool. It reads and edits files and runs commands in your project. On its own it can work from screenshots. Connected to Figma, it can read your components, variables and layout directly. This guide covers the setup, a design-to-code workflow, prototyping, example prompts, useful skills and the limits.
What can Claude Code do for designers?
- Design to code. Build a screen or component from a selected Figma frame, using your design tokens and, with Code Connect, your real code components.
- Working prototypes. Go past click-through mockups to prototypes with real state, data and transitions that you can put in front of users.
- Visual checks. Open the result in a browser, take a screenshot, compare it with the design and fix the differences.
- Code back to canvas. Capture a running web page into Figma as design layers, or have Claude create and edit frames in your file.
- Edge cases early. Ask Claude to list the error states, empty states and loading states a flow needs before anyone builds it.
Anthropic's own designers work this way. Its post on how Anthropic teams use Claude Code says "Members of the Product Design team would feed Figma design files to Claude Code and then set up autonomous loops where Claude Code writes the code for the new feature, runs tests, and iterates continuously." The same post describes the team "mapping out error states, logic flows, and system statuses to identify edge cases during design rather than discovering them in development."
How do you connect Figma to Claude Code?
Figma's remote server installation guide recommends the plugin from Anthropic's official marketplace:
claude plugin install figma@claude-plugins-official
Restart Claude Code, type /plugin, go to the Installed tab, select the figma server and sign in with your Figma account in the browser. If your organization blocks plugins, add the server by hand:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
Then type /mcp, select figma and choose Authenticate. Leave out --scope user to add it to the current project only. The plugin also installs Figma's skills, such as figma-use and figma-design-to-code, which teach Claude how to call the tools well; the manual setup does not.
The Figma MCP server docs describe two versions. The remote server at https://mcp.figma.com/mcp is the recommended one and has the broadest feature set, with no desktop app needed. The desktop server runs through the Figma desktop app and is meant for specific organization and enterprise needs.
Which Figma MCP tools matter most?
From Figma's tools and prompts page:
| Tool | What it does |
|---|---|
get_design_context |
Code and design context for a layer or selection; the main design-to-code tool |
get_variable_defs |
The variables and styles used in a selection |
get_screenshot |
A screenshot of the selection so Claude can see the design |
get_metadata |
A lightweight outline of layers, useful for large frames |
get_code_connect_map |
Which code components your Figma components map to |
use_figma |
Creates, edits and inspects content in Figma files (remote only) |
generate_figma_design |
Sends a live web UI to Figma as design layers (remote only) |
There is also a create_design_system_rules prompt that writes a rules file so generated code fits your codebase and design system. Run it once per project and keep the file next to your CLAUDE.md.
Writing to the canvas is in beta. Figma's write to canvas page says it is "free to use during the beta period" and "will eventually become a usage-based paid feature." It needs edit access to the file and a Professional, Education, Organization or Enterprise plan.
What does a design-to-code workflow look like?
- Prepare the file. Use components, variables and auto layout, and name layers clearly. Figma's docs have a page on structuring files for better output.
- Generate the rules. Run
create_design_system_rulesso Claude knows your tokens, components and file layout. - Plan first. Paste a frame link and ask for a plan in plan mode: which components it will reuse, which it will create, and where the files go.
- Build one piece at a time. One frame or component per request gives better results than a whole flow at once.
- Check it visually. The Chrome integration lists "Design verification: build a UI from a Figma mock, then open it in the browser to verify it matches" as a core use. In the desktop app, Claude can open your running app in the Browser pane instead.
- Hand off. Have Claude open a pull request so a frontend engineer can review the code.
No Figma file? Drag an image into Claude Code or paste it with Ctrl+V. Anthropic's best practices give this pattern: "[paste screenshot] implement this design. take a screenshot of the result and compare it to the original. list differences and fix them".
Which prompts work well for designers?
These are example prompts written for this guide. Replace the bracketed parts with your own links and paths.
Implement this Figma frame as a React component: [frame link]. Use get_design_context and get_variable_defs, reuse components from src/components/ where they match, and use our tokens instead of raw hex values. Then open it in the browser, compare it with get_screenshot and fix the differences.
Before we design the checkout flow, list every state it needs: empty, loading, error, partial data, slow network, expired session. For each, say what the user sees and what they can do next. Write it to docs/checkout-states.md.
Build a working prototype of the onboarding flow in [frame link] with real form validation and a fake API that returns errors 20 percent of the time. Put it in prototypes/onboarding/ and start it locally.
Build three variations of the pricing table: dense, spacious and comparison-first. Put them side by side on one page so I can compare them, using our existing tokens.
Capture the running settings page at localhost:3000/settings into a new Figma Design file with generate_figma_design so I can annotate it.
The UX writing prompts and Tailwind CSS prompts collections have more starting points.
Which skills help design work?
| Need | Skill | Notes |
|---|---|---|
| Distinctive UI | frontend-design | Anthropic's skill against generic AI-looking pages; /plugin install frontend-design@claude-plugins-official |
| Design taste | design-taste-frontend | Art direction plus a real-browser check |
| Design commands | Impeccable | One /impeccable command with design subcommands |
| UI audit | web-design-guidelines | Vercel's guidelines, reported as file:line |
| Accessibility | accessibility | WCAG 2.2 audits and fixes |
| Components | shadcn | Your shadcn/ui config and composition rules |
| Figma to video | HyperFrames figma | HeyGen's HyperFrames skill, not Figma's: imports Figma assets and tokens into HTML video |
The best design skills page compares more of them, and the frontend guide covers the engineering side.
What are the limits?
- First drafts, not final code. Generated code may not match your design system exactly, especially without Code Connect. Plan for a review pass.
- Rate limits. Figma rate-limits its read tools by seat and plan; see its rate limits page. Starter plans and View or Collab seats get a monthly limit only, and tools that write to Figma are exempt.
- Large frames. Figma's large frames page says big selections can slow the tools, cause errors or return incomplete results. Work on one component or section at a time, or have Claude call
get_metadatafor an outline first. - Captured layers aren't mapped to components. Figma's help center says captured screens "are not automatically mapped to your library components or styles," and asks you to add the library with your variables to the file before you paste.
- Trust what you connect. Anthropic's security docs recommend MCP servers from providers you trust, and say Anthropic "does not security-audit or manage any MCP server."
How do you reuse design prompts and rules?
Prompts like the ones above get sharper with every project, so keep them where you can find them. Kipt keeps prompts and Agent Skills as Markdown in a private GitHub repo you own, with {{name}} blanks for frame links or component names, and can import a skill folder from a GitHub link. To turn a prompt into a skill, the free SKILL.md generator builds the SKILL.md in your browser.