Extracts design data from Figma to generate structured code context, enabling AI agents to produce production-level frontend code.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Figma Context MCP convert this Figma node to code context: https://figma.com/file/abc?node-id=123"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
一个 MCP 服务器，用于将 Figma 设计转换为结构化代码上下文，支持 AI 代理生成生产级前端代码。
通过提供 Figma 节点 URL，服务器会提取设计数据并生成代码所需的完整上下文信息。
设计结构提取 - 从 Figma 节点提取布局、尺寸、文本、颜色等设计结构
视觉预览渲染 - 生成设计的图片预览，帮助 AI 代理准确理解设计意图
代理集成 - 与 AI 代理的技能库（如 component-skills）无缝配合
多种传输模式 - 支持 stdio（Claude Desktop、Cursor）和 HTTP 服务器模式
Related MCP server: Sunnyside Figma MCP
Figma 设计 → MCP 工具提取 → 结构化数据 + 预览图 → AI 代理
↓
映射到组件库 → 生成代码全局安装（推荐）：
npm install -g @sking7/figma-context-mcp或从源代码构建：
git clone https://github.com/cola-sk/figma-context-mcp
cd figma-context-mcp
npm install
npm run build获取 Figma 个人访问令牌，然后配置你的 MCP 客户端。
编辑项目根目录的 .vscode/mcp.json：
全局安装版本：
{
"servers": {
"figma-context-mcp": {
"type": "stdio",
"command": "figma-context-mcp",
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_TOKEN"
}
}
}
}本地开发版本（使用 git 代码构建）：
{
"servers": {
"figma-context-mcp": {
"type": "stdio",
"command": "node",
"args": ["/path/to/figma-mcp/build/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_TOKEN"
}
}
}
}将
/path/to/figma-mcp替换为你克隆的项目路径，确保已执行npm run build
编辑 claude_desktop_config.json：
全局安装版本：
{
"mcpServers": {
"figma-context-mcp": {
"type": "stdio",
"command": "figma-context-mcp",
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_TOKEN"
}
}
}
}本地开发版本（使用 git 代码构建）：
{
"mcpServers": {
"figma-context-mcp": {
"type": "stdio",
"command": "node",
"args": ["/path/to/figma-mcp/build/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_TOKEN"
}
}
}
}将
/path/to/figma-mcp替换为你克隆的项目路径
编辑 mcp.json：
全局安装版本：
{
"mcpServers": {
"figma-context-mcp": {
"type": "stdio",
"command": "figma-context-mcp",
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_TOKEN"
}
}
}
}本地开发版本（使用 git 代码构建）：
{
"mcpServers": {
"figma-context-mcp": {
"type": "stdio",
"command": "node",
"args": ["/path/to/figma-mcp/build/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_TOKEN"
}
}
}
}将
/path/to/figma-mcp替换为你克隆的项目路径
向 AI 助手提供 Figma 节点 URL：
提取这个 Figma 设计的代码上下文：https://www.figma.com/design/FILE_KEY/MyFile?node-id=123-456助手将获取设计数据并根据其技能库生成对应的代码。
git clone https://github.com/cola-sk/figma-context-mcp
cd figma-context-mcp
npm install
npm run build
npm startstdio 模式（Claude Desktop / Cursor）：
npm startHTTP 服务器模式：
npm start -- --mode http --port 3000服务器地址：http://localhost:3000/mcp
npm run inspectornpm run devfigma-context-mcp/
├── src/
│ ├── index.ts # MCP 服务器入口和工具定义
│ └── server-runner.ts # HTTP 传输层（Express）
├── data/
│ ├── overview.md # 服务器概览资源
│ └── quickstart.md # 快速开始指南
├── build/ # 编译输出
├── mcp-config.json # MCP 服务器配置
└── package.jsonMIT
Fetches a Figma node and its rendered image from the Figma API and converts it to a code block. Requires FIGMA_ACCESS_TOKEN environment variable to be set.
| Name | Required | Description | Default |
|---|---|---|---|
| figmaNodeUrl | Yes | The URL of the Figma node (e.g., https://www.figma.com/design/fileKey/fileName?node-id=123-456) |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It discloses the required environment variable and the basic action (fetch, convert), but does not cover behavioral details like rate limits, output format specifics, error handling, or side effects. The description is adequate but not rich.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two short sentences, front-loaded with the main action and then the prerequisite. Every sentence is valuable with no wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with one parameter and no output schema, the description covers the essential action and a key prerequisite. It could mention the output code language or format, but overall it is fairly complete given the low complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Input schema covers 100% of the single parameter with a clear description and example. The tool description adds the prerequisite but does not add additional meaning beyond the schema. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the tool fetches a Figma node and its rendered image, then converts to a code block. Verb and resource are specific, and no sibling tools exist to differentiate, so high clarity.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Description mentions the prerequisite (FIGMA_ACCESS_TOKEN) but provides no guidance on when to use this tool versus alternatives, nor any when-not-to-use context. Since no siblings exist, the lack of differentiation is not critical, but usage guidance is minimal.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.4convert-figma-to-codeScored across 1 tool
With only one tool, there is no possibility of confusion between tools. The single tool's purpose is clearly defined.
The sole tool name 'convert-figma-to-code' follows a clear verb-noun pattern, and with only one tool, naming consistency is trivially maintained.
The server has only one tool, which feels thin for a 'Figma Context' server. While the tool itself is focused, the count is on the borderline of being too few for typical usage.
The server only provides a single conversion tool, lacking any other Figma-related functionality (e.g., listing files, fetching styles, or managing components). This is severely incomplete for a server named 'Figma Context'.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
The Figma MCP server brings Figma design context directly into your AI workflow.
Serves your design system and coding standards to coding agents, so they stop guessing.
