Extracts design data from Figma to generate structured code context, enabling AI agents to produce production-level frontend code.
Click on "Install 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
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Connect AI coding agents to Anima Playground, Figma, and your design system.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/cola-sk/figma-context-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server