Figma-Context-MCP README

The project's README from github.com/GLips/Figma-Context-MCP. As one markdown file: README.md.

Framelink

Framelink MCP for Figma

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 MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "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 MCP for Figma, see the Framelink docs.

Star History

Star History Chart

Learn More

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

Figma-Context-MCP (GLips/Figma-Context-MCP)

Searching Database…

16K ·GitHub
Figma-Context-MCP
这是什么？这是 Framelink MCP 服务器：它让 Cursor 这类 AI 编程助手可以直接访问你的 Figma 文件，这样它们就能根据真实的布局和样式数据一次性实现设计。
它是 Cursor 插件，还是需要单独运行的东西？它是一个单独运行的服务器进程，不是插件。你在编辑器的 MCP 配置文件中注册它，编辑器通过 Model Context Protocol 与它通信；它用 TypeScript 编写，运行在 Node.js 上。
怎么让它在 Cursor 里用起来？把 figma-developer-mcp 条目添加到编辑器的 MCP 配置文件里——README 里有 macOS/Linux 和 Windows 可直接粘贴的 JSON。你的 Figma API 密钥写在配置里，也可以在 env 字段中设置 FIGMA_API_KEY 和 PORT。
我需要 Figma 访问令牌吗？需要——你必须先创建一个 Figma API 访问令牌，这是唯一需要的凭据。服务器本身需要 Node.js 20.20.0 或更新版本。
除了 Cursor，还能配其他工具用吗？它是专门为 Cursor 构建和优化的，但由于 MCP 是标准协议，其他兼容 MCP 的 AI 客户端也可以配置并使用它。
我的 Figma 数据会怎么样——会全部发给模型吗？不会。在返回结果之前，服务器会对 Figma API 的响应做简化处理，只把最相关的布局和样式信息传给模型，这也能让模型的回答更准确。
为什么这比把设计截图粘贴到 Cursor 里更好？因为 AI 助手拿到的是真实的 Figma 布局和样式数值，而不是像素——README 里说，有了 Figma 设计数据，Cursor 一次性准确实现设计的能力远强于基于截图的方式。
配置好之后，使用流程是什么样的？打开 IDE 的 AI 对话窗口，粘贴一个 Figma 文件、画框或分组的链接，然后让它实现这个设计——AI 助手会通过服务器从 Figma 获取相关元数据并编写代码。
使用它要花钱吗？不用——该服务器是基于 MIT 许可证的开源项目。你只需要自己的 Figma 账号来创建它用于身份验证的访问令牌。
What are similar projects?design-extract, Trail-Code, claude-context, lean-ctx, Baize, onlook, context7, headroom
Which topics is it in?design-to-code, figma, context-engineering, ai-coding, model-context-protocol, design, cursor, mcp-server, coding-agent, mcp, frontend, api
Creator
GLips
Size
6.4 MB
Stars
16K
Updated
CommitJun 24Releasev0.13.2Jun 18
Age
1y
Commits · 90 Days