Skip to main content
Glama
cola-sk

Figma Context MCP

by cola-sk
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Remote

Figma Context MCP

一个 MCP 服务器，用于将 Figma 设计转换为结构化代码上下文，支持 AI 代理生成生产级前端代码。

通过提供 Figma 节点 URL，服务器会提取设计数据并生成代码所需的完整上下文信息。

功能

  • 设计结构提取 - 从 Figma 节点提取布局、尺寸、文本、颜色等设计结构

  • 视觉预览渲染 - 生成设计的图片预览，帮助 AI 代理准确理解设计意图

  • 代理集成 - 与 AI 代理的技能库（如 component-skills）无缝配合

  • 多种传输模式 - 支持 stdio（Claude Desktop、Cursor）和 HTTP 服务器模式

Related MCP server: Sunnyside Figma MCP

工作流程

Figma 设计 → MCP 工具提取 → 结构化数据 + 预览图 → AI 代理
                                                     ↓
                                          映射到组件库 → 生成代码

快速开始

1. 安装

全局安装（推荐）：

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

2. 配置 Figma 访问令牌

获取 Figma 个人访问令牌，然后配置你的 MCP 客户端。

GitHub Copilot (VS Code)

编辑项目根目录的 .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

编辑 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 替换为你克隆的项目路径

Cursor

编辑 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 替换为你克隆的项目路径

3. 使用

向 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 start

运行模式

stdio 模式（Claude Desktop / Cursor）：

npm start

HTTP 服务器模式：

npm start -- --mode http --port 3000

服务器地址：http://localhost:3000/mcp

MCP Inspector

npm run inspector

开发监控

npm run dev

项目结构

figma-context-mcp/
├── src/
│   ├── index.ts              # MCP 服务器入口和工具定义
│   └── server-runner.ts      # HTTP 传输层（Express）
├── data/
│   ├── overview.md           # 服务器概览资源
│   └── quickstart.md         # 快速开始指南
├── build/                    # 编译输出
├── mcp-config.json           # MCP 服务器配置
└── package.json

许可证

MIT

Install Server
A
license - permissive license
A
quality
C
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

Latest Blog Posts

MCP directory API

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