Too much to read
The whole file goes in
Every layer it reads is usage, and a big system is a lot of layers.
Big design system changes stalling, or eating your credits? Connect Figma to Claude, then work in small, checked batches. Five minutes to set up.
01
It’s usually not the tool. It’s one giant job: read everything, change everything, in one go.
One giant prompt“Update the whole design system”
Small, scoped batches“Buttons, batch 1 of 3”
Illustrative, not a benchmark.
Too much to read
Every layer it reads is usage, and a big system is a lot of layers.
Too much at once
The longer a run, the more likely it hits an error and has to start over.
No plan
Without your naming and token rules, it explores, and exploring is slow.
02
The Figma MCP server is a bridge. Claude asks for exactly what it needs, and can write changes back into your file.
Reads
get_metadataget_design_contextget_variable_defssearch_design_systemget_screenshotWrites
use_figmaupload_assetsgenerate_diagram03
Pick where you use Claude. Click any step, or let it play.
Desktop or web. Best if you work in Figma and want to chat.
Claude app
Official remote server. Paste frame links, no installs, works in the browser.
Claude Code
Same official server, plus Figma’s skills. Best when tokens also live in a repo.
Desktop Bridge
Community plugin in Figma Desktop. Works on what you’ve selected, no links needed.
Official guides: Figma MCP setup · limits by plan · Desktop Bridge setup
04
Once it’s set up, the plugin is the bridge. Keep it open while you work. Tap the parts of the window to see what they do.
Figma Desktop Bridge ×
Status strip
Green and READY means Claude can reach your file. CONNECTING means it’s still looking for the server.
Pull every variable
Summarise every variable in this file by collection and mode. Flag any with no value in Dark mode.
uses figma_get_variablesRead component docs
Get the description and properties of the Button component I’ve selected.
uses figma_get_componentCheck your work
Take a screenshot of the Buttons page and tell me what looks inconsistent.
uses figma_take_screenshotDebug a plugin
Show me the latest console errors from the plugin I’m running.
uses figma_get_console_logsUse Figma Desktop, not the browser. Re-import the manifest, then Plugins, Development, Refresh plugin list.
Start Claude so the server is running, keep the plugin open, and press Reconnect.
They’re cached for 5 minutes. Ask Claude to refresh, or re-run the plugin.
Run the plugin in the file you’re asking about. Check Info to see which file it’s bound to.
Old servers are still running. Quit and restart Claude; the badge should show one.
Source and full docs: figma-desktop-bridge on GitHub. A community project, not made by Figma.
05
All read-only. Get a feel for it before it touches anything.
Check the connection
Use the Figma MCP to tell me who I’m signed in as and which plan and seat I have.
Map the system
[link] Give me an outline of this file: pages, component sets and variable collections. Read-only.
Find the mess
[link] List every hard-coded colour on this page and the variable it should probably use.
06
Four moves, repeated per batch. Each one is a short prompt.
Read-only. What’s here, what’s hard-coded, what’s off-pattern?
Split the work into small batches. Wait for my go-ahead.
Do batch 1 only. Touch nothing else.
Screenshot it, list what changed and what you skipped.
Instead of
“Update our design system to the new brand colours.”
Try
“[link] On the Button set only, swap hard-coded fills for our Brand/* variables. 10 at a time. Plan first.”
Here’s my Figma file: [paste link to the frame or page] Work only on the “Button” component set. Don’t touch anything else. Task: Replace hard-coded fills and strokes with the closest matching colour variable from our semantic collection. Don’t create new variables; list anything with no good match. Work in batches of 10 and stop after each batch. Before changing anything, show me the plan and wait for my go-ahead. When a batch is done, take a screenshot and compare it to before. End with a short list: what changed, what you skipped and why. If anything is unclear, ask me one question before you start.
Tight scope, small batches, a check at the end. That’s the whole trick.
07
Right-click, Copy link to selection. Less to read means faster, cheaper runs.
Ask for the metadata first, then full detail only for the parts you’ll change.
Colours in one pass, naming in the next. Mixed jobs are where agents wander.
Long chats carry every earlier result along. Start clean with a one-line summary.
Naming, collections, spacing scale: put them in project instructions or a CLAUDE.md.
Big changes go on a branch or duplicated page. Review, then merge.
New to variables and components? Learn them hands-on in Variables, Components and Variants, free in the browser. Then check your build against the design with Compare Figma design.
08
A Claude plan that supports connectors, and a Figma Full or Dev seat on a paid plan. The Starter plan doesn’t include the MCP server, and View or Collab seats get up to 20 calls a month. Professional seats get 200 calls a day.
Yes. Everything Figma sends back becomes part of the conversation, so a whole file costs far more than one linked frame. Tight scope and small batches are the biggest saving.
Both. Read tools pull structure, variables and screenshots. Write tools like use_figma create and edit layers, components and variables in your file.
Treat it like a new teammate: start read-only, ask for a plan, work on a branch or a duplicated page, and review each batch. Figma’s version history lets you roll back too.
A community plugin (from the figma-console-mcp project, not made by Figma) that connects Figma Desktop to a local MCP server. Claude can work on your current selection and edit variables on any paid plan. It needs Node 18+, Figma Desktop and a personal access token, which you should keep private.
Use the Claude app if you live in Figma and want to chat. Use Claude Code if your tokens or components also live in a codebase, so one change can update both.
No. It’s handy for quick edits inside a file. For sweeping, multi-step system changes, Claude with the MCP gives you more control over the plan, the batch size and the checks.
Our course teaches AI tools from day one, Claude and Figma included, alongside the design judgement that makes them useful.