Inspect Figma designs, components, and variables from an agent — the widely adopted community server.
- Home
- Top MCPs for Design & Creative
- Figma (official)
Figma (official)
Figma's own MCP server — read design context, generate code, and write back to the canvas.
Quick answer
What it does
Exposes 29 tools in five groups: Design to code, Code to design, Design systems and Code Connect, Generative plugins and shaders, and Account. Reads a selection's design context, variables, metadata and screenshots; writes native Figma content — new files, uploaded images, generated designs and diagrams — through the remote server.
Best for
- Writing native content back into Figma files
- Generating code from a selected frame
- Code Connect component mapping
- Extracting variables and design tokens
Not for
- Starter plans and View/Collab seats (6 calls per month)
- Read-only workflows where a community server suffices
Source: top-mcps.com/mcp/figma-mcp-server — verified Sep 2026
Setup recipe
Pick your client, then follow the three steps.
- 1
Install
claude_desktop_config.jsonjson{ "mcpServers": { "figma-mcp-server": { "command": "Add", "args": [ "https://mcp.figma.com/mcp", "as", "an", "HTTP", "MCP", "server", "in", "your", "client", "(no", "install)" ] } } }Paste under mcpServers. Fully quit and reopen Claude after editing.
CLI or .mcp.jsonshellclaude mcp add figma-mcp-server -- Add https://mcp.figma.com/mcp as an HTTP MCP server in your client (no install)Run from your repo. Commit .mcp.json to share with your team.
.cursor/mcp.jsonjson{ "mcpServers": { "figma-mcp-server": { "command": "Add", "args": [ "https://mcp.figma.com/mcp", "as", "an", "HTTP", "MCP", "server", "in", "your", "client", "(no", "install)" ] } } }Global path: ~/.cursor/mcp.json. Reload window after editing.
.vscode/mcp.jsonjsonc{ "servers": { "figma-mcp-server": { "command": "Add", "args": [ "https://mcp.figma.com/mcp", "as", "an", "HTTP", "MCP", "server", "in", "your", "client", "(no", "install)" ] } } }VS Code uses the "servers" key (not "mcpServers").
~/.codeium/windsurf/mcp_config.jsonjson{ "mcpServers": { "figma-mcp-server": { "command": "Add", "args": [ "https://mcp.figma.com/mcp", "as", "an", "HTTP", "MCP", "server", "in", "your", "client", "(no", "install)" ] } } }Open via Cascade → hammer icon → Configure.
cline_mcp_settings.jsonjson{ "mcpServers": { "figma-mcp-server": { "command": "Add", "args": [ "https://mcp.figma.com/mcp", "as", "an", "HTTP", "MCP", "server", "in", "your", "client", "(no", "install)" ] } } }Open via the Cline sidebar → MCP Servers → Edit.
~/.continue/config.jsonjson{ "experimental": { "modelContextProtocolServers": [ { "transport": { "type": "stdio", "command": "Add", "args": [ "https://mcp.figma.com/mcp", "as", "an", "HTTP", "MCP", "server", "in", "your", "client", "(no", "install)" ] } } ] } }Continue uses modelContextProtocolServers with a transport block.
~/.codex/config.tomlshell# ~/.codex/config.toml [mcp_servers.figma-mcp-server] command = "Add" args = [ "https://mcp.figma.com/mcp", "as", "an", "HTTP", "MCP", "server", "in", "your", "client", "(no", "install)", ]Codex uses TOML. Each server is a [mcp_servers.<name>] subtable.
~/.config/zed/settings.jsonjsonc{ "context_servers": { "figma-mcp-server": { "command": { "path": "Add", "args": [ "https://mcp.figma.com/mcp", "as", "an", "HTTP", "MCP", "server", "in", "your", "client", "(no", "install)" ] } } } }Zed calls them "context_servers". Settings live-reload on save.
ChatGPT → Settings → Connectors (remote URL)json{ "name": "Figma (official)", "transport": "http", "url": "https://mcp.figma.com/mcp" }Paste this into Settings → Connectors → Add custom connector. Requires ChatGPT Pro / Team / Enterprise / Edu with Developer mode enabled. ChatGPT supports remote HTTPS MCP servers only — stdio servers must be hosted on a public HTTPS endpoint first.
- 2
Set required secrets
No credentials required — this MCP runs over stdio without authentication.
- 3
Try a minimum working prompt
Minimum working prompt pending verification. Try any prompt from the MCP’s README once installed.
Tools & permissions
| Tool | Description | Args | Side effects |
|---|---|---|---|
download_assets | Downloads exports and original source images (remote server only). | — | Read |
get_code_connect_map | Retrieves node ID to code component mappings. | — | Read |
get_code_connect_suggestions | Suggests mappings (Figma-prompted). | — | Read |
get_context_for_code_connect | Component metadata for templates (Figma-prompted) (remote server only). | — | Read |
get_design_context | Design context for a layer or selection. | — | Read |
get_figjam | Converts FigJam diagrams to XML. | — | Read |
get_generative_plugin | Reads a generative plugin's source manifest (remote server only). | — | Read |
get_libraries | Lists subscribed and available libraries (remote server only). | — | Read |
get_metadata | Sparse XML outline of a selection. | — | Read |
get_motion_context | Keyframe animation data and code snippets. | — | Read |
get_screenshot | Screenshot of a selection. | — | Read |
get_shader | Reads a shader effect or fill's source manifest. | — | Read |
get_variable_defs | Variables and styles used in a selection. | — | Read |
list_file_shaders | Lists shaders used in a specific file (remote server only). | — | Read |
list_generative_plugins | Lists generative plugins in your library (remote server only). | — | Read |
list_shaders | Lists shader effects and fills in your library. | — | Read |
search_design_system | Searches libraries for components, variables, styles (remote server only). | — | Read |
whoami | Identity and plans of the authenticated user (remote server only). | — | Read |
add_code_connect_map | Maps a Figma node ID to a code component. | — | Write |
create_generative_plugin | Creates a generative plugin scaffold (remote server only). | — | Write |
create_new_file | Creates a blank Design, FigJam, or Slides file (remote server only). | — | Write |
create_shader | Creates a shader fill or effect scaffold (remote server only). | — | Write |
generate_diagram | Generates a FigJam diagram from Mermaid (remote server only). | — | Write |
generate_figma_design | Generates design layers from interfaces (remote server only). | — | Write |
send_code_connect_mappings | Confirms suggested mappings (Figma-prompted). | — | Write |
update_generative_plugin | Replaces a generative plugin's code.ts or ui.html (remote server only). | — | Write |
update_shader | Replaces a shader's main.ts (remote server only). | — | Write |
upload_assets | Uploads images into a Figma file (remote server only). | — | Write |
use_figma | General-purpose create, edit, and inspect (remote server only). | — | Write |
Security & scope
- Access scope
- Network
- Sandbox
- Hosted endpoint at mcp.figma.com/mcp over Streamable HTTP, authorised against your Figma account and seat. No local process runs for the remote server; the trust boundary is the Figma account you authorise and the files it can reach.
- Gotchas
- Eleven of the 29 tools write: they create files, upload images and generate native Figma content. An agent with the full tool set can modify real design files, so scope it to a project you are willing to let it edit.
- Starter plans and View/Collab seats are limited to six tool calls per month — enough to test, not to work. Confirm the seat before adopting.
- Write-to-canvas is free only during the beta and is stated to become usage-based paid later.
- The server is a Beta feature governed by the Figma Developer Terms, so the tool surface can change between releases.
- The linked repository is Figma's guide and skills for the server, not its source — the server itself is closed and hosted, so you cannot audit or self-host it.
Agent prompt pack
— copy into Claude, Cursor, or ChatGPT.Recommend the best MCP servers for [task: e.g. design & creative work] in [client: Claude]. Constraints: - Prefer tools that are [official | open-source | read-only] — pick what matters for my use case. - Exclude MCPs that require [e.g. a paid plan, OAuth-only flows, remote-only transport]. - Return at most 3 picks, ranked. For each pick include: 1. One-sentence rationale. 2. The ready-to-paste install snippet for my client. 3. Any required secrets I need to create before installing. Cross-check the top-mcps.com listing: https://top-mcps.com/top-mcps-for-design-creative
Compare Figma (official) MCP vs [Figma (Framelink) MCP] for the following job: [describe the job, e.g. "let an agent create GitHub issues on bug triage"]. Judge them on: - Setup time and complexity (what a new user hits first). - Auth model (none / API key / OAuth 2.1) and credential risk. - Transport (stdio / Streamable HTTP / SSE) and where the server runs. - Required secrets and the blast radius if they leak. - Operational risk in an unattended agent loop. - Which one is "good enough" for a weekend prototype vs. production. End with one sentence: which should I pick for my scenario, which is: [my scenario]. References: - https://top-mcps.com/mcp/figma-mcp-server - top-mcps.com listing for Figma (Framelink)
Install the Figma (official) MCP server for my [client: Claude] at the default config path for that client. Use the exact install snippet published at https://top-mcps.com/mcp/figma-mcp-server (fetch https://top-mcps.com/mcp/figma-mcp-server.json for the canonical server.json if you can read URLs). Before finishing: 1. Create the required secrets () and put them in the appropriate env block — do not hard-code them. 2. Restart or reload the client so it picks up the new server. 3. Verify the server is connected (green / running state) and at least one tool is listed. 4. If anything fails, read the client's MCP logs and report the exact error — do not silently retry. Confirm when done and list the tools the server now exposes.
Frequently asked questions
What changed
— 2 updates tracked.Refreshed install snippets and fact sheet; verified for 2026.
Initial directory listing.
More Design & Creative MCPs
Other tools in the same category worth evaluating.
Drive a live Blender session from an agent — create objects, set materials, run Python, render.
Compared with Figma (official)
Side-by-side breakdowns for the choices people most often weigh against this MCP.
Exploring Top MCPs for Design & Creative? See all Design & Creative MCPs →
