跳到正文
FunCoding

Figma-Context-MCP

官方 MCP Registry 已收录

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

Star
16,174
版本
v0.13.2
许可证
MIT
最近提交
2026年10月27日
Framelink

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.

同类 MCP Server

精选

Metabase

搜索、查询和可视化 Metabase 数据,操作受用户权限控制。

MEmetabase/metabase50k近 7 天新增 156 个 star

精选

next-ai-draw-io

描述一句话生成架构图,选中形状修改,每次改动可撤销。

DADayuanJiang/next-ai-draw-io37k近 7 天新增 249 个 star

精选

GitDiagram

将 GitHub 仓库转为交互式架构图,获取 Mermaid 源码和视频解说。

AHahmedkhaleel2004/gitdiagram19k近 7 天新增 135 个 star

stitch-skills

A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.

GOgoogle-labs-code/stitch-skills8.7k近 7 天新增 44 个 star

精选

cursor-talk-to-figma-mcp

让智能体读取和修改 Figma 设计稿。

GRgrab/cursor-talk-to-figma-mcp7.1k近 7 天新增 12 个 star

精选

magic-mcp

在编辑器里检索 React 和 Tailwind 组件,用 AI 生成新界面。

2121st-dev/magic-mcp6.4k近 7 天新增 87 个 star