Skip to main content
Glama
Sign In
Figma Context MCP

Figma Context MCP

by cola-sk
OverviewSchemaSourceRelated ServersDiscussionsAdmin
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

Available Tools

1 tool
convert-figma-to-codeA

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.

Inputs: figmaNodeUrl (required).

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A3.7/5.0

    Scored across 1 tool

    Disambiguation5/5

    With only one tool, there is no possibility of confusion between tools. The single tool's purpose is clearly defined.

    Naming Consistency5/5

    The sole tool name 'convert-figma-to-code' follows a clear verb-noun pattern, and with only one tool, naming consistency is trivially maintained.

    Tool Count3/5

    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.

    Completeness1/5

    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'.

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers