← Back to directory

Figma MCP Server

Official

Bring Figma design context and code generation into your AI coding workflow.

GitHub source repository ↗

★ 1.9k Stars Category · Dev Tools Very popular

64FMRS · C

Reliability

7/20

Security and permissions

12/20

Maintenance

14/20

Documentation

17/20

Setup experience

14/20

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.

Read the FMRS scoring method →

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.

Tools

get_design_context

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

Extracts the variables and styles used in the selection (color, spacing, typography, etc.) so generated code can reference design tokens directly.

get_metadata

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

Fetches a visual screenshot reference of the node/variant being implemented, for comparing against the code output.

Setup

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.

claude_desktop_config.json

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

Generate and validate client config

Fit and risk

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

Troubleshooting

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

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 CodeFull support

CursorFull support

Claude CodeFull support

Gemini CLIFull support

Related MCP servers

Compare with other MCP servers