AI导哈

Figma MCP 协议实现

这是一个使用 Model Context Protocol (MCP) 实现 AI 访问 Figma 设计数据的演示项目，用于帮助 AI 助手以语义方式理解 Figma 设计信息。

  • by simultechnology
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 simultechnology/figma-mcp-my-sample

使用说明

Figma MCP游乐场

这是，模型上下文协议（MCP） 中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。

概要 (Overview)

该项目是AI助手将Figma的设计信息理解为“意义（语义）”而不是“视觉”的协议实施例。

什么是MCP

MCP是连接AI助手和外部工具/数据源的协议。

基本配置

┌─────────────────┐         ┌─────────────────┐
│   MCP Client    │  ←───→  │   MCP Server    │
│  (AIツール側)    │   MCP   │ (データ提供側)   │
└─────────────────┘         └─────────────────┘

组件｜角色｜例｜ |--------------|------|-----| | MCP客户端 连接到MCP服务器并使用工具 | MCP 服务器 通过MCP协议发布数据和工具 server.ts |

Figma MCP的利用方法

前提条件

项目 要件
Figma计划 专业/组织/企业(免费计划不允许Dev Mode）
工作表种类 完全或不可为
文件类型 ｜Figma Design文件（使用Figma Make创建的文件不能进行Dev Mode）
MCP客户端 Claude Code、Claude Desktop、Cursor、VS Code等

注意：使用AI生成工具创建的文件无法切换到Dev Mode。 创建新的Figma Design文件或将Make设计复制到Design文件。

方法1:Figma桌面MCP

Figma桌面应用程序作为MCP服务器运行Claude Code/Claude Desktop为MCP客户端中所述修改相应参数的值。

┌─────────────────┐         ┌─────────────────┐
│   Claude Code   │  ←───→  │  Figma Desktop  │
│  (MCP Client)   │  HTTP   │  (MCP Server)   │
│                 │         │  :3845/mcp      │
└─────────────────┘         └─────────────────┘

安装过程

  1. 在Figma桌面上启用MCP

    • 打开Figma桌面应用程序
    • 打开设计文件开发者模式 切换到（Shift+D)
    • 单击功能区上的 启用桌面MCP服务器 来修改标记元素的显示属性
    • http://127.0.0.1:3845/mcp が有効になりました 表示就OK

  2. 在MCP客户端注册服务器

    对于Claude Code

    claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

    重新启动Claude Code后/mcp 使用命令确认连接。

    对于Claude Desktop

    配置文件 ~/Library/Application Support/Claude/claude_desktop_config.json 编辑：

    {
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

    已重新启动Claude Desktop。

  3. 接続确认

    • 克劳德代码： /mcp 在工作空间的边缘 figma-desktop 显示已连接即可
    • Claude Desktop:Figma工具（get_file_info 等）可用就OK

故障排除

如果Claude Code连接失败：

# 設定を削除して再登録
claude mcp remove figma-desktop
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

注意: --transport http 对较大场景进行渲染期间已观察到该故障。sse 而不是 http 中所述修改相应参数的值。

如果在Claude Desktop中返回了Moke数据：

  • 确认Figma Desktop是否启用了Dev Mode MCP Server
  • Claude Desktopを完全に再起动（终了→起动）

方法2:Figma Remote MCP（不需要桌面应用程序）

直接连接到Figma云服务器的方法。

claude mcp add --transport http figma https://mcp.figma.com/mcp

因为需要认证/mcp 请用命令进行认证。

可用于Figma MCP的工具

｜工具名称｜功能｜备注｜ |---------|------|------| | get_file_info 从特定的file_key获取文件信息从Figma URL获取 | get_design_context 从所选节点生成UI代码要求桌面MCP，需要节点选择 | get_screenshot 获取所选节点的屏幕快照要求 | get_metadata 以XML格式获取节点元数据 | get_variable_defs ｜获取变量定义｜ | get_code_connect_map 获取代码连接映射

注意: get_design_context 啊 get_screenshot 在Figma Desktop应用程序中选择节点的状态下使用。 目前还没有提供获取文件列表的工具。

关于此项目

这个项目 用于学习和演示MCP的规格化距离的幂函数。与上述Figma Desktop MCP不同。

体系结构配置

┌─────────────────┐         ┌─────────────────┐
│   client.ts     │  ←───→  │   server.ts     │
│  (MCP Client)   │  Stdio  │  (MCP Server)   │
│  サンプル実装    │         │  サンプル実装    │
└─────────────────┘         └─────────────────┘
  1. MCP服务器(src/server.ts):
    • 通过MCP协议公开Figma API（或Moke数据）。
    • 资源：直接阅读文件内容的界面（例如： figma://file/{key})。
    • 工具：传递参数以执行特定处理的函数（例如： get_file_info(file_key))。
  2. MCP客户端(src/client.ts):
    • 在本地启动服务器，获取资源列表和运行工具。

用途不同

项目：此项目 |-----|------------------|----------------| ｜目的｜实际Figma文件操作｜学习、理解MCP｜ MCP客户端 client.ts | ｜MCP服务器｜Figma桌面｜ server.ts | 数据｜实际的Figma文件｜莫克数据｜

开発计画（Implementation Plan）

项目目标

构建能够实际操作和实验Figma MCP的本地环境，使AI能够理解如何与Figma数据进行交互。

实现的功能

  • 项目设置:
    • package.json: @modelcontextprotocol/sdk, axios, dotenv, zod 等依赖关系管理。
    • tsconfig.json：TypeScript実行环境の设定。
  • MCP 服务器:
    • get_file_info：用于获取Figma文件元数据的工具。
    • 模拟模式：在没有令牌的情况下，可以返还虚拟结构数据进行动作确认。
    • 真实模式：如果有Figma Personal Access Token，则从实际API获取数据。
  • MCP客户端:
    • 已通过Stdio连接服务器进程。
    • 列出可用的资源工具并将执行结果输出到控制台。

设置和执行过程

1.安装

npm install

2.执行方法（模式）

即使没有认证令牌，也可以使用莫克数据确认动作，了解协议的行为。

npm start

3.执行方法（实时模式）

要访问实际的Figma文件，需要人员访问Token。

  1. 在Figma上 设置 -> 账户 -> 个人访问令牌 中所述修改相应参数的值。
    • 范围: File content: Read-only （或 files:read），模板名称将采用不同的格式。
  2. 项目根目录 .env 创建文件并设置标记。
    FIGMA_ACCESS_TOKEN=your_token_here
  3. 根据需要 src/client.ts 编辑，实际 file_key （Figma URL的关键部分）。

验证结果和行为日志

本地环境中的行为验证（npm start的明细栏样式中定义的设置。

执行过程

客户端连接到服务器并自动执行以下操作：。

  1. 连接到服务器
  2. 可用资源（resources）的列表显示
  3. 可用工具（tools）的列表显示
  4. 获取设计信息的工具（get_file_info）的执行

运行日志

✅ MCP Client connected to Server

📦 Listing Resources...
[
  {
    "uri": "figma://mock-file/design.json",
    "name": "Mock Design JSON",
    "mimeType": "application/json",
    "description": "A mock Figma design file for demonstration"
  }
]

🛠️  Listing Tools...
[
  {
    "name": "get_file_info",
    "description": "Get information about a Figma file (Real API or Mock)",
    "inputSchema": {
      "type": "object",
      "properties": {
        "file_key": {
          "type": "string",
          "description": "The file key of the Figma file (optional in mock mode)"
        }
      }
    }
  }
]

🚀 Calling Tool 'get_file_info' (Mock Mode)...
Result: {
  "content": [
    {
      "type": "text",
      "text": "[MOCK MODE] Returning mock data. Set FIGMA_ACCESS_TOKEN to use real API.\n\n{\n  \"document\": {\n    \"id\": \"0:0\",\n    \"name\": \"Fortune Consultant LP\",\n    \"type\": \"DOCUMENT\",\n    \"children\": [\n      {\n        \"id\": \"1:1\",\n        \"name\": \"Landing Page\",\n        \"type\": \"FRAME\",\n        ...\n      }\n    ]\n  }\n}"
    }
  ]
}

文档

  • docs/ —学习会笔记（AtlaeFigma×Claude Code学习会2026-03-25）
  • tmp/ —学习会截图

注意事项

  • 这个项目是教育用·示威用的游戏。
  • 在生产环境中使用时，请添加适当的错误处理和安全措施（如令牌管理）。

相关 MCP