MCP server · Code and developer tools
Figma MCP server
Gives a coding assistant design context from Figma files, such as layout, variables and components, and can write back to the canvas.
- Maintainer
- Figma (official)
- Licence
- Not published (hosted service)
- Runs
- Remote (URL)
- Sign-in
- OAuth sign-in in the app
- Registry version
- 1.0.3 (updated 2025-10-16)
- Last activity
- 2026-10-13
- Source
- Official docs
Overview
What it does
Figma’s remote MCP server at mcp.figma.com passes design information from your Figma files to AI agents that generate code. You add the URL to your client and sign in with your Figma account. Figma also offers plugins for Claude Code and Cursor that bundle the server settings with agent skills. The public figma/mcp-server-guide repository holds setup instructions and skills, not the server code.
Use it when you build interfaces from Figma designs and want the assistant to see the real frames, variables and components rather than a screenshot. Code Connect maps design components to the components in your codebase so generated code reuses them. The remote server can also write to the canvas, creating frames, components, variables and auto layout; Figma says this is free during the beta but will later become a usage-based paid feature. Tools that read data are rate limited by plan and seat.
Tools
What the assistant can do
- Get design context and code for selected frames (get_design_context)
- Read variables, metadata and screenshots of nodes
- Map design components to code with Code Connect
- Search design system libraries
- Write to the canvas with use_figma (remote server, beta)
- Generate Figma designs from web pages (rolling out)
- Create FigJam diagrams (generate_diagram)
Install
Install Figma MCP server in your app
You need:
- A Figma account
- A Dev or Full seat on a Professional, Organisation or Enterprise plan for regular use; Starter plans and View or Collab seats are limited to 6 tool calls a month
- An MCP client with remote server and OAuth support
Run in your project. --scope local keeps the servers private to you in this project; use user for every project.
claude mcp add --scope local --transport http figma https://mcp.figma.com/mcp
- figma: sign in when the app asks (run /mcp in Claude Code).
Project root. Commit it to share the servers with your team; each person sets the variables in their own shell.
{
"mcpServers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}
- figma: sign in when the app asks (run /mcp in Claude Code).
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json (Settings → Developer → Edit Config). Restart Claude after saving.
{
"mcpServers": {}
}
- figma is a remote server: add it as a custom connector (Customize → Connectors → + Add → Add custom connector; on Team and Enterprise plans an owner adds it under Organization settings → Connectors), with the URL https://mcp.figma.com/mcp.
In your project, or ~/.cursor/mcp.json for every project.
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}
- figma: sign in when the app asks.
In your workspace. VS Code asks for each secret the first time a server starts and stores it securely.
{
"servers": {
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}
- figma: sign in when the app asks.
macOS/Linux: ~/.config/devin/mcp_config.json · Windows: %APPDATA%\devin\mcp_config.json. Read by the default Devin Local agent and by the legacy Cascade agent.
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}
- figma: sign in when the app asks.
- Figma only accepts apps listed in its MCP catalog, and Devin Desktop isn’t listed today.
Want it alongside other servers? Open Figma MCP server in the MCP config generator and add the rest; it writes one file per app. The snippets follow the setup in the server’s README, checked on 2026-10-14.
Before you install
- Write tools can create and change frames, components and variables in files you can edit.
- generate_image spends Figma AI credits. Figma’s guide says agents should ask permission and disclose credit use first.
- A remote server sees whatever the assistant sends it. Sign in with the narrowest access the service offers. See how to choose a safe server.
Why it’s listed
Why we list it
The vendor’s own bridge between design files and code generation, with Code Connect support that keeps generated code aligned with your components.
Related
More MCP servers
- GitHub MCP ServerLets an assistant read code, manage issues and pull requests, and check Actions runs in the GitHub repositories you can access.
- GitLab MCP serverGives an assistant access to GitLab projects, issues, merge requests, pipelines and search through an MCP endpoint built into GitLab.
- Sentry MCPLets a coding assistant search Sentry errors, traces and logs, triage issues and read Sentry docs while you debug.
- Semgrep MCP serverLets an assistant scan code for security issues with Semgrep, write custom rules and pull findings from Semgrep AppSec Platform.
- SonarQube MCP ServerConnects an assistant to SonarQube Cloud or Server to analyse code, review issues and hotspots, and check quality gates.
- Postman MCP ServerConnects an assistant to your Postman workspaces, collections, specs and environments, and can generate client code from APIs.
All MCP serversMCP config generatorGuide: MCP servers in Claude CodeGuide: what is MCP?