M
MCP Directory CURATED DIRECTORY
911 MCP servers indexed
中文
← Back to directory
F

Figma MCP Server

Official
Bring Figma design context and code generation into your AI coding workflow.
How to install ↓ Compare GitHub source repository ↗
Category
Dev Tools #60 of 438
Stars
★ 2.2k Very popular
Transport
Streamable HTTP
Runtime
Hosted (no local runtime)
Credentials
Optional API key
Last commit
Tools
4
64FMRS · C

An officially Figma-maintained remote MCP server that pipes design context into AI coding tools over Streamable HTTP, supporting code generation, variable/token extraction, and (remote-only) canvas writes; requires Figma account auth, enforces plan/seat-based rate limits on read calls, and runs as a hosted service rather than locally.

Strongest · Documentation 17/20 Weakest · Reliability 7/20

Reliability
7/20
Security and permissions
12/20
Maintenance
14/20
Documentation
17/20
Setup experience
14/20
Why each score
Reliability 7/20
This repository is a usage guide, not the server's source code; the actual MCP service runs on Figma's hosted remote endpoint (https://mcp.figma.com/mcp). There is no test suite or CI workflow in the repo to verify that declared tools (get_design_context, get_variable_defs, etc.) match real behavior. The tool descriptions in the README are internally consistent and server.json validates against the schema, but per the static calibration rule, reliability cannot exceed 12 without real CI plus committed tests covering key paths — scored 7 to reflect a plausible-but-unverifiable happy path.
Security and permissions 12/20
The service requires account-level auth (e.g., OAuth) to reach a user's Figma account; no plaintext secrets or tokens appear in any example, so there is no red-line violation. Rate limits are disclosed, showing some awareness of resource boundaries. However, the 'write to canvas' feature can directly create/modify Figma file content — a side-effecting operation — and the guide does not describe any protocol-level confirmation step or permission scoping for it. Least-privilege and data-flow disclosure (design data moving between client and Figma's servers) are incomplete, so this is capped at 12 rather than full marks.
Maintenance 14/20
The repo is officially maintained by Figma, is not archived, has only 7 open issues relative to a large star count, and the manifest version (2.2.90) suggests an actively, frequently iterated backend service with clear ownership. However, the license is unknown and no explicit security-response channel is documented in the repo, preventing a top score.
Documentation 17/20
The README is thorough, covering setup for VS Code, Cursor, Claude Code, and Gemini CLI with concrete config examples, prompting best practices, and custom rule templates, and it clearly discloses rate limits and pricing/cost information (free during beta, potentially paid later). It also links out to official developer docs for the full tool list. Gaps: authoritative tool parameter documentation lives outside the repo, and some features (e.g., web-to-design generation) are explicitly marked as still rolling out, so it falls short of a perfect score.
Setup experience 14/20
Clear, step-by-step connection instructions and config examples are provided for multiple mainstream clients (VS Code mcp.json, Cursor settings, Claude Code CLI, Gemini CLI), and since this is a remote HTTP service, no complex local runtime is required. Per the static calibration rule, setup is capped at 15 without executable verification evidence (real CI and tests), and some steps depend on external conditions like account plan/seat type, so it is scored 14.

Static review · not runListed 2026-08-06

Read the FMRS scoring method →

Fit and risk

What it can accessUses the networkChanges third-party account data

Best for

  • Product and frontend teams with paid Figma seats (Dev/Full) who frequently generate code from designs
  • Teams with well-structured design systems using components, variables, and Auto Layout
  • Teams using Code Connect to keep generated code consistent with real components

Not for

  • Use cases requiring an offline or local stdio MCP server (this server is remote Streamable HTTP only)
  • Starter plan users or View/Collab seat holders, who are capped at 6 tool calls per month
  • Scenarios needing direct local filesystem access (this server provides Figma design data, not filesystem access)

Required permissions

  • Requires Figma account authentication (e.g. `/mcp auth figma` in Gemini CLI) to access files the user has permission to view
  • The remote server can read design data (layers, variables, styles, screenshots) for selected Figma nodes
  • The write-to-canvas feature (remote server only) can create/modify frames, components, variables, and Auto Layout in Figma files

Risks and side effects

  • Design data is processed through Figma's officially hosted remote server and your AI client, not run locally
  • Write-to-canvas access could unintentionally modify real Figma files if an agent follows a bad instruction
  • Read-type tool calls are rate limited per Figma plan/seat; Starter and View/Collab seat users are capped at just 6 calls per month
  • Write-to-canvas is currently free during beta but is expected to become a usage-based paid feature

Setup

Before you start

Runtime：Hosted (no local runtime)

1) VS Code: run 'MCP: Add Server' → choose HTTP → enter https://mcp.figma.com/mcp → set server ID 'figma' (requires GitHub Copilot enabled). 2) Cursor: run /add-plugin figma in Agent chat to install the Figma plugin (bundles MCP config and skills), or manually add {"mcpServers":{"figma":{"url":"https://mcp.figma.com/mcp"}}} under Settings → MCP. 3) Claude Code: run claude plugin install figma@claude-plugins-official, or manually claude mcp add --transport http figma https://mcp.figma.com/mcp. 4) Gemini CLI: run gemini extensions install https://github.com/figma/mcp-server-guide, then authenticate with /mcp auth figma inside the CLI. 5) Other editors supporting Streamable HTTP can add the same URL manually.

.cursor/mcp.json 
{"mcpServers": {"figma": {"url": "https://mcp.figma.com/mcp"}}}

Shown for Cursor. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json
{
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal
claude mcp add --transport http figma https://mcp.figma.com/mcp

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

Open the chat toolbar in VS Code and type #get_design_context to confirm the Figma MCP server tools appear in the available tools list; if none are listed, restart VS Code.

Troubleshooting

  1. Verify the MCP client is configured with the remote URL https://mcp.figma.com/mcp using Streamable HTTP transport
  2. Type `#get_design_context` (or equivalent) in the client to confirm tools are listed; restart the editor if none appear
  3. VS Code users must have GitHub Copilot enabled, or MCP will not function
  4. If output is too large or truncated, call get_metadata first, then re-fetch only the needed node(s) with get_design_context
  5. If tool calls fail or are blocked, check whether the account's plan/seat type is hitting the monthly rate limit
  6. Gemini CLI users should confirm `/mcp auth figma` was run to complete authentication

Things to try

Once connected, you can ask your AI assistant things like:

  • Generate iOS SwiftUI code from this frame using this Figma link
  • Get the variable names and values used in this frame (colors, spacing, typography)
  • Generate code for this layout using Chakra UI and reuse components from src/components/ui
  • Take a screenshot of this node as a visual reference, then implement the design

Tools 4

get_design_context read-only
Returns a structured React + Tailwind representation of the selected Figma node(s), meant as a starting point the AI assistant can translate into any framework or code style.
get_variable_defs read-only
Extracts the variables and styles used in the selection (color, spacing, typography, etc.) so generated code can reference design tokens directly.
get_metadata read-only
Returns a high-level node map when a response is too large or truncated, so only the needed node(s) are re-fetched with get_design_context.
get_screenshot read-only
Fetches a visual screenshot reference of the node/variant being implemented, for comparing against the code output.

Use cases

Select a Figma frame and generate corresponding frontend code (React, SwiftUI, etc., depending on the prompt)
Extract variables, components, and layout data for design-system and component-based workflows
Use Code Connect to reuse real codebase components for more consistent generated output
Create or modify native Figma canvas content directly from a supported client (remote server only)
Generate Figma designs from web pages (rolling out feature)

Supported clients

VS Code
Cursor
Claude Code
Gemini CLI

Listed from the project's documentation, not tested by this site.

Overview

The Figma MCP server is officially maintained by Figma and exposes Figma design context over a remote Streamable HTTP connection (https://mcp.figma.com/mcp) to AI coding clients. It lets agents pull structured design data (layers, variables, styles, layout) from selected frames to generate code, extract design tokens, and, via the remote server, create or modify native content directly on the Figma canvas. This repository itself is a setup guide and bundled skills, not the server implementation, which Figma hosts and operates.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 64.2k · Tools 2 Compare with this →
Compare with other MCP servers

Source revision 19be8d51c6a2 Data synced 2026-11-05 Read the FMRS scoring method