mcpField
F
Framelink Figma MCP Server

Framelink Figma MCP Server

Local
github.com/UDILGUMedia & Design0Updated 78w ago
Repository

About Framelink Figma MCP Server

Framelink Figma MCP Server gives coding agents access to Figma file data for implementing designs. It filters and condenses API responses to emphasize layout and styling context.

Key features

  1. 01Fetch Figma file, frame, and group data
  2. 02Condense API responses for relevant context
  3. 03Support design implementation in coding tools
  4. 04Configure with a Figma access token

Use cases

  1. 01Implement a Figma frame in an IDE
  2. 02Give a coding agent layout and styling context

MCP support

The server exposes Figma design data to MCP clients. Clients can provide a Figma link and use the returned metadata as context for code generation.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "MCP-server-with-image": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}
Run commandnpx -y figma-developer-mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmfigma-developer-mcp

Tools

2

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
fileKeystringYesThe key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/...
nodeIdstringNoThe ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided. Use format '1234:5678' for a standard node, or 'I5666:180910;1:10515;1:10336' for a deeply nested instance node (the semicolon-joined path represents the instance override chain — it's still a single node ID, not multiple nodes).
depthnumberNoOPTIONAL. Do NOT use unless explicitly requested by the user. Controls how many levels deep to traverse the node tree.

Details

From the project 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

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.