Set up the Figma MCP server in Claude Code with the plugin or one manual command, authenticate in two clicks, and see which read and write tools it exposes. Includes the five skills, Code Connect, rate limits by seat and fixes for common failures.
Paste a Figma link into Claude Code and it can read the frame's layout, spacing, colors and components before it writes a single line of code. That is the whole pitch of the Figma MCP server, and the setup takes two commands and one browser click. Everything after that is about picking the right tools, staying inside the rate limits, and giving the agent enough context to stop inventing its own buttons.
This article walks through the exact setup, the tools the server exposes, the skills Figma ships for write workflows, a frame-to-code routine you can copy, and the limits that trip people up. The details come from Figma's developer documentation as it stands in October 2026, so check those pages if a command looks different on your machine.
The Figma MCP server is a bridge. On one side sits your Figma file: layers, variables, components, FigJam boards and Make resources. On the other side sits an MCP client, here Claude Code. In between, a set of tools lets the agent ask questions about a design and, with the right permissions, change it.
Figma's docs describe five jobs. The server can create and modify native Figma content on the canvas, turn selected frames into code, extract design context such as variables, components and layout data, retrieve resources from Make files, and keep code aligned with your design system through Code Connect.
The real change is from screenshots to structure. A screenshot tells a model what a button looks like. Design context tells it the button is an instance of a component, uses a named spacing variable, and sits in an auto-layout row with a fixed gap. Code written from that structure lands much closer to something you can merge.
Figma offers two versions of the server, and the choice matters because some tools exist only on one of them.
| Remote server | Desktop server | |
|---|---|---|
| Connection | Figma's hosted endpoint, https://mcp.figma.com/mcp | Local, through the Figma desktop app |
| Desktop app required | No | Yes |
| Tool selection | Broadest set, including all remote-only tools | Smaller set |
| Best for | Most people | Figma for Government deployments, local-only setups |
Figma calls the remote server the best choice for most users, and that is what the rest of this article uses.
You need a Figma Design, Make or FigJam file, view or edit permission on it, and ideally a Full or Dev seat. Other seat types still connect, but with a far smaller monthly allowance (the numbers are in the limits section below). Only MCP clients listed in Figma's MCP catalog can connect, and Claude Code has its own setup page there.
There are two routes and they end in the same place. Pick the plugin if you also want Figma's skills, and the manual command if you like a minimal config.
claude plugin install figma@claude-plugins-official
Figma recommends this one. The plugin bundles the MCP server settings and the Agent Skills for common workflows, so a single install gives you the server and the instructions that make the write tools behave.
claude mcp add --transport http figma https://mcp.figma.com/mcp
Without a scope flag the server is registered only for the project you are standing in. If you want it everywhere, add --scope user:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
User scope means you do not repeat the install for every repository.
The server uses a browser sign-in, so nothing gets pasted into a config file.
/mcp.Authentication successful. Connected to figma.Run /mcp once more to confirm the server shows as connected. Then ask Claude to call the whoami tool. It returns the authenticated user and plans, which tells you straight away whether you are on a seat with a usable allowance.
💡 Tip: If tools go missing mid-session,
/mcpis the first place to look. It shows connection status and lets you re-authenticate without editing files.
Figma's tools reference lists dozens of tools. You will use a handful daily, so start with those and ignore the rest until a task calls for them.
| Tool | What it does | Remote only |
|---|---|---|
get_design_context | Extracts design context for a layer or selection | No |
get_metadata | Returns a sparse XML outline of a selection | No |
get_screenshot | Captures a screenshot of a selection | No |
get_variable_defs | Retrieves the variables and styles used in a selection | No |
get_code_connect_map | Returns node ID to code component mappings | No |
get_code_connect_suggestions | Suggests component-to-code mappings | No |
get_context_for_code_connect | Provides component metadata for templates | Yes |
search_design_system | Searches libraries for components, variables and styles | Yes |
get_libraries | Lists subscribed and available design libraries | Yes |
get_figjam | Converts FigJam diagrams to XML | No |
get_motion_context | Extracts animation data | No |
download_assets | Downloads exports and original source images | Yes |
Start with get_design_context. It is the workhorse behind "build this frame." Pair it with get_screenshot so the agent has a visual target, and get_variable_defs so colors and spacing come from your tokens instead of guessed hex values. When a frame is huge, get_metadata gives a sparse outline you can use to map the page before pulling detail layer by layer.
| Tool | What it does | Remote only |
|---|---|---|
use_figma | General-purpose tool to create, edit and inspect | Yes |
generate_figma_design | Generates design layers from interfaces | Yes |
generate_diagram | Builds a FigJam diagram from Mermaid | Yes |
create_new_file | Creates a blank Design, FigJam or Slides file | Yes |
generate_image | Generates a downloadable raster image | Yes |
upload_assets | Uploads images into a Figma file | Yes |
add_code_connect_map | Maps a Figma node ID to a code component | No |
send_code_connect_mappings | Confirms suggested component mappings | No |
The server also ships tools for shaders and generative plugins, plus six weave_* tools that run credit-based Weave workflows. Most front-end work never touches them. One prompt is worth knowing by name: create_design_system_rules, which generates a rules file so the agent's context matches your codebase.
Write tools are powerful and easy to misuse. Figma's docs list skills that the agent needs for the matching workflows, and the plugin install brings them along. If you went the manual route, install Figma's skills for your client separately.
| Skill | Used for |
|---|---|
figma-use | Figma Design workflows |
figma-use-figjam | FigJam operations |
figma-use-slides | Figma Slides |
figma-shaders | Creating and updating shaders |
figma-generative-plugins | Creating and updating generative plugins |
If your work is mostly reading designs and writing code, you will barely notice them. They matter the moment you ask Claude Code to build or edit something inside Figma.
Even with perfect tools, the agent does not know your conventions. Run the create_design_system_rules prompt and let it draft a rules file, then trim it to what your team actually enforces and keep it in CLAUDE.md. A short example:
Figma to code rules:
- Reuse components from src/components/ui before creating new ones.
- Map Figma variables to our CSS tokens. Never hardcode hex values.
- Use the project spacing scale, not the pixel values from the frame.
- Treat Figma output as a reference. Match our file structure and naming.
Four lines like these remove most of the "why did it write a new button again" complaints.
get_design_context, and usually get_screenshot and get_variable_defs too.A prompt that works well:
Implement this frame using our existing components and tokens.
Do not add new dependencies. Figma link: <paste link here>
After the first pass, check four things in the diff before you run anything:
💡 Tip: Work one section at a time. A full-page frame produces a mountain of context and a mountain of code, and your read-call allowance drains faster than you expect.
Code Connect is how Figma finds out that its Button component is really src/components/ui/Button.tsx. Once that mapping exists, Claude imports the real component instead of writing fresh markup.
Four tools handle the loop. get_code_connect_map reads existing mappings. get_code_connect_suggestions proposes new ones, send_code_connect_mappings confirms the ones you accept, and add_code_connect_map writes a single mapping directly. The last one is exempt from rate limits, which is handy when you are mapping a whole library.
These figures come from Figma's rate limits and access page at the time of writing. Figma can change them, so confirm on the page before you plan a team rollout.
| Seat type | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View, Collab | Up to 20 per month | Up to 20 per month | Up to 20 per month | Up to 20 per month |
| Dev, Full | Up to 200 per day, 10 per minute | Up to 200 per day, 15 per minute | Up to 600 per day, 20 per minute | Not specified in the table |
The limits apply to tools that read data from Figma. add_code_connect_map, create_new_file and whoami are exempt.
Seats decide the experience. A designer on a View seat can connect and look around, but the daily workflow belongs to developers on Full or Dev seats. If only two people on your team hold those seats, make them the ones who generate code, and have everyone else review the pull requests.
💡 Tip: If Claude calls three read tools per frame, 200 calls per day disappears fast. Ask for one section, and let
get_metadatapick the right layer before you pull full context.
The tools do not show up. Run /mcp. If figma is listed but not connected, choose it and authenticate again. If it is missing entirely, repeat the install command and restart Claude Code.
The output ignores your components. This is a context problem, not a tool problem. Add the rules file to CLAUDE.md, create Code Connect mappings for your top ten components, and tell the prompt to reuse existing components before writing new ones.
You hit the limit mid-task. Narrow the scope, check your seat with whoami, and move heavy work to a Full or Dev seat. A View or Collab seat gives you roughly 20 calls a month, which is a demo, not a workflow.
Most Figma frames ship with gray placeholder rectangles where photography should go, and generated code inherits the blandness. Fill them with real-looking imagery before the handoff and the build looks finished on the first run.
On PicassoIA, the text-to-image catalog includes Seedream 5 Pro, GPT Image 2, Flux 2 Pro, Nano Banana Pro and P Image. Generate a hero photo, then drop it into the frame by hand or ask Claude to push it in with upload_assets. Figma has its own generate_image tool, but a dedicated image model gives you more control over lens, light and composition.
For motion, turn the same still into a short clip with a video model such as Seedance 2.5 Lite, Wan 3, Veo 3.1 Lite, LTX 2.5 Fast or Kling v3 Video. Check each model page for its image input option. A five-second loop behind a headline is often all a landing page needs.
The same platform can also do the thinking. Claude Sonnet 5 runs on PicassoIA as a text model that reads images, which makes it a quick way to draft the rules file from a screenshot of your design system.
low, disables thinking for the fastest and cheapest reply. Use medium or high when the output must reason across many components, and xhigh or max for tricky multi-file work.💡 Tip: Heavier reasoning is available from Claude Fable 5 and Claude Opus 4.7 on the same platform.
You now have the full loop. Connect the server, add a rules file, build one section at a time, and map your components with Code Connect so the output keeps improving.
The part that is easy to skip is the imagery. A finished interface needs real photos and a bit of motion, and Picasso IA gives you the models for both in one place. Pick an image model, describe the hero shot you want, and see how it changes the frame you just built. Then try one of the video models on that same photo and compare the two versions side by side. Open PicassoIA and make your first hero image today.
