Happy slice of mcp pizzaMCP.pizza

Figma-Context-MCP

MCP.Pizza Chef: GLips

Paste a link to a Figma file, frame, or group, and your assistant reads the real layout and styling instead of guessing from a screenshot, then writes the matching code in whatever framework you use. It was built with Cursor in mind and works in other editors that support MCP. Setup is a short config snippet plus a Figma personal access token created in your account settings.

Coding
Images/Design

Use This MCP server To

Turn a Figma frame into working code in one go Match a design's exact spacing, colors, and fonts Rebuild a screen from my designer's file without eyeballing it Check which fonts and colors a design actually uses Implement a whole page from a link I paste in

README

Framelink

Framelink Figma MCP Server

🌐 Available in: ν•œκ΅­μ–΄ (Korean) | ζ—₯本θͺž (Japanese) | δΈ­ζ–‡ (Chinese)

Give your coding agent access to your Figma data.
Implement designs in any framework in one-shot.

weekly downloads MIT License Discord
Twitter

Give Cursor and other AI-powered coding tools access to your Figma files with this Model Context Protocol server.

When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.

See quickstart instructions β†’

Demo

Watch a demo of building a UI in Cursor with Figma design data

Watch the video

How it works

  1. Open your IDE's chat (e.g. agent mode in Cursor).
  2. Paste a link to a Figma file, frame, or group.
  3. Ask Cursor to do something with the Figma fileβ€”e.g. implement the design.
  4. Cursor will fetch the relevant metadata from Figma and use it to write your code.

This MCP server is specifically designed for use with Cursor. Before responding with context from the Figma API, it simplifies and translates the response so only the most relevant layout and styling information is provided to the model.

Reducing the amount of context provided to the model helps make the AI more accurate and the responses more relevant.

Getting Started

Many code editors and other AI clients use a configuration file to manage MCP servers.

The figma-developer-mcp server can be configured by adding the following to your configuration file.

NOTE: You will need to create a Figma access token to use this server. Instructions on how to create a Figma API access token can be found here.

MacOS / Linux

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Or you can set FIGMA_API_KEY and PORT in the env field.

If you need more information on how to configure the Framelink Figma MCP server, see the Framelink docs.

Star History

Star History Chart

Learn More

The Framelink Figma MCP server is simple but powerful. Get the most out of it by learning more at the Framelink site.

Sponsors

πŸ₯‡ Gold Sponsors

Framelink
Framelink

πŸ₯ˆ Silver Sponsors

πŸ₯‰ Bronze Sponsors

😻 Smaller Backers

Figma-Context-MCP FAQ

Do I need a Figma account?
Yes, and you create a personal access token in your Figma settings so the server can read your files.
Which apps does this work in?
It was designed for Cursor, and it works in other editors and assistants that support MCP.
Can I use this to build a page from a design?
Yes. Paste the Figma link and ask your assistant to implement it.
Is it free?
The server is free and open source. You still need whatever Figma plan gives you access to the file.
Why not just paste a screenshot instead?
A screenshot hides the real sizes and colors, while reading the file gives your assistant exact values.
How hard is setup?
A few lines pasted into your editor's config file, with your Figma token filled in.