Figma MCP Server
Figma's official MCP server: code from a selected frame, design system variables and components, and writing designs to the canvas
- 2,128 ★ on the repository
- Last commit
Extended access
Why this level
- Can modify Figma file contents
- Gets account access via OAuth
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/figma-mcp-serverDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Can modify Figma file contents
- Gets account access via OAuth
This is third-party code. Review the repository files before installing.
What it does
The repository holds the guide to Figma's official MCP server, a Gemini CLI extension and standalone skills. Given a link to a frame or layer, the agent gets design context: variables, components, layout and assets, and then writes code. With Code Connect the generated code reuses the project's real components. The remote server can create and edit frames, components, variables and auto layout in Figma files. A best practices section explains how to structure files for cleaner code.
Who it is for. For frontend developers and designers who move Figma designs into code and back with an agent.
Good fit when
- You need to build a screen from a specific Figma frame
- You need design system tokens and components pulled into the project
- You want the agent to build or update a design directly in Figma
Not a fit when
- You lack a paid Dev or Full seat: Starter and View or Collab seats get only a few calls a month
- Designs are not in Figma
Example request
Implement this screen from the Figma frame link using our components from src/componentsMCP
- Transport
- http
- Authentication
- OAuth
Limitations
Requires a Figma account with OAuth login. Read tools are rate limited, and the free plan and View or Collab seats get very few calls. Writing to the canvas is free only during the beta, and the skills are in beta too. Figma restricted service for Russian users, so access from Russia without a VPN is not guaranteed.
How to disable. In Claude Code run claude mcp remove figma or uninstall the figma plugin. In Gemini CLI: gemini extensions uninstall figma. In other clients delete the figma block from the MCP config.
FAQ
How do I point the agent to a design?
Copy a link to a frame or layer in Figma and paste it into the request. The agent does not open the page; it extracts the node-id.
Why the plugin rather than manual setup?
Besides server settings, the plugin installs skills for implementing designs, Code Connect and design system rules.
Discussion
No questions or reviews yet.
Related
MCP serversA free, two-way Figma MCP server: turns designs into framework-aware code and pushes code back to the canvas
Figma Console MCP
figma-console-mcp
A two-way Figma MCP server for design systems: reads and writes variables, components and styles and syncs tokens with code
An MCP server that gives the agent simplified Figma layout data from a link so it can build the screen more accurately than from a screenshot
Figma To Code MCP: from Figma layout to code
Figma To Code MCP
Figma to code over MCP: the server gives the agent a layout as compact YAML with CSS property names, resolved variables and SVG exported to disk
The MCP server of the F2C service: from a Figma node link the agent gets HTML, React or Tailwind markup and local images
An MCP server that lets an agent read and edit Figma designs: colors, typography, components and export
README in short
The README opens with per-plan call limits and a feature list. It then gives instructions for VS Code, Cursor, Claude Code, Gemini CLI and other Streamable HTTP clients. It explains how to pass a design link to the agent, which skills live in the repository, and includes a long section of advice on file structure and prompting.