DESIGN

figma-mcp

Community-maintained MCP server that reads Figma designs and exports the visual + structural context to LLMs. Read-focused — turns designs into something agents can reason about and code against.

Alive Recommended REVIEWED 2026-05-07
VERDICT

Default for design-to-code workflows. Read-only by design (the right call). The 'Figma is the source of truth, agent translates to code' pattern works.

What it does

Reads Figma designs and exposes them as MCP tools. Tools include get_file (full file structure), get_component, get_node (specific frame or component), get_style_variables, export_image (PNG of a frame). The output is rich enough that a coding agent can translate a design into HTML / React / Tailwind / Flutter etc.

When you actually need it

The headline use case in 2026 is design-to-code with the design as ground truth. Pattern:

  1. Designer ships a frame in Figma.
  2. Coding agent (Claude Code, Cursor) reads the frame via figma-mcp.
  3. Agent translates the layer tree + style variables into code.
  4. Engineer reviews, refines, ships.

This works because Figma’s data model is structured: layers have properties (fills, strokes, layout, auto-layout), components are reusable, style variables are referenced by name. The agent isn’t guessing from a screenshot — it’s reading metadata.

Other use cases:

  • Documentation generation. Agent reads a design system file, generates component docs.
  • Accessibility review. Agent reads contrast pairs, flags anything below WCAG AA.
  • Asset extraction. Agent pulls icons / illustrations as SVG, exports them into a code repo.

Setup

Generate a personal access token at figma.com → Settings → Personal access tokens. The token is account-wide.

"figma": {
  "command": "npx",
  "args": ["-y", "figma-developer-mcp"],
  "env": {
    "FIGMA_API_KEY": "figd_…"
  }
}

Some hosts and forks support newer auth shapes (OAuth-style) — check the README for the version you install.

The catch

The PAT is account-wide. Three implications:

  1. For solo designer-developers: not really a problem. Your access is appropriate.
  2. For small teams: fine if everyone trusts the agent owner. Generate the PAT for one person, agree on the agent’s purpose.
  3. For larger orgs: bot-user pattern. Create a dedicated Figma user, add to specific projects only, generate the PAT as that user. No per-resource scoping is available — you scope by what teams the user is in.

For sensitive design work (unreleased products, competitive features): the agent reads what the user reads. If the agent’s outputs go into code repos, prompts, or tool results that leak more broadly than the original Figma access, that’s a real exposure. Treat figma-mcp output the same way you’d treat the design files themselves.

▸ MCP SECURITY SCORECARD Methodology v1.0 · Confidence MEDIUM · Reviewed 2026-05-07 · Next review due 2026-08-07
METHODOLOGY ↗
ADOPT WITH LIMITS

FOR: Design-to-code workflows that read Figma as the source of truth.

Use it for design-to-code. Read-only by design — that's the right call. For larger orgs, use a dedicated bot Figma user with project-scoped membership rather than a personal PAT. Verify the specific fork you install before deploying.

Maintainer community

Active community project; small maintainer team.

Licence MIT

Community project; verify the licence on whichever fork you install.

Code review partial

Single-maintainer / small-team project. Public PR history. Smaller review surface than corp-maintained MCPs.

Secrets handling scoped

PAT via env.

Sandbox process
Filesystem access scoped

Image exports may write to a configured directory; scope at the host.

Shell access no
Network egress allow-list

api.figma.com only.

OAuth handling broad

Figma personal access tokens are account-wide. No per-team scoping available.

Default permissions broad

PAT inherits user permissions across all Teams. For larger orgs, use a dedicated bot user.

Prompt-injection exposure medium

Layer names, component descriptions, comments can carry user-authored text. Lower exposure than browser MCPs because the structured-data shape constrains what tooling sees.

Supply chain surface low

MCP SDK + Figma's official sdk + a few utility deps. Verify the fork you install — community MCPs vary in dep hygiene.

Dep CVE surface clean
Rate-limit risk medium

Figma API rate limits per token. Large design-file reads can saturate.

Signed releases partial

npm provenance attestations on the upstream fork; check before installing.

Security policy no

Community project — no formal disclosure policy at this time. Open issues for any concerns.

Telemetry none
Data residency cloud

Figma's infrastructure (US, EU options for Enterprise tier).

Credential storage memory

NOT A FORMAL SECURITY AUDIT · Adoption posture based on public-source review · See methodology for what's measured and what isn't