Figma MCP Server 服务说明文档

发布时间：2026/11/2 1:46:01
Figma MCP Server 服务说明文档

1. 服务概述

一句话简介：为AI模型提供Figma设计智能访问的MCP服务，支持紧凑数据格式、智能上下文管理和设计分析

  • 服务名称：Figma MCP Server
  • 版本号：v3.0.0
  • 开发者/提供方：alucardeht
  • 协议类型：MCP (Model Context Protocol)

2. 核心功能

该MCP服务提供以下主要功能：

  • 导航与发现：列出页面和框架，按名称搜索组件（支持部分匹配），使用人类可读名称或直接节点ID访问元素
  • 设计分析：提取框架层次结构（紧凑ASCII树格式，95%令牌减少），分析页面结构，获取完整页面上下文
  • 资产提取：自动分类和导出图标（SVG）、图像（PNG）和复合组，提取设计令牌（颜色、排版、间距、阴影）
  • 实现验证：Figma设计与浏览器实现的像素级比较，验证元素位置/尺寸/边界，检测内容溢出
  • 并行实现支持：为隔离部分生成代理就绪上下文，支持多代理并行工作
  • 会话管理：跨请求维护上下文，缓存和重放功能，查看会话状态
  • 智能过滤：自动排除不可见元素（visible: false），匹配Figma设计视图

3. 使用场景

该服务适合在以下情况下使用：

  • 设计转代码：AI助手根据Figma设计自动生成前端代码实现
  • 设计审查：分析Figma设计结构，识别设计模式和组件关系
  • 资产导出：批量导出设计资产，包括图标、图像和设计令牌
  • 实现验证：比较设计与实现，确保像素级一致性
  • 响应式测试：验证不同视口宽度下的设计实现
  • 组件搜索：快速查找和定位Figma文件中的组件

4. 接入方式

4.1 服务端点

该服务支持远程部署，通过NPX运行。需要Figma访问令牌进行认证。

4.2 认证与权限

使用Figma个人访问令牌进行认证：

  1. 打开Figma设置
  2. 导航到"Personal access tokens"
  3. 点击"Create a new token"
  4. 复制令牌（仅显示一次）

4.3 Figma计划要求

计划文件访问速率限制
Starter（免费）6次请求/月不适用于实际使用
Professional无限制120请求/分钟
Organization无限制480请求/分钟

重要：免费账户每月仅限6次API调用，需要付费计划才能实际使用。

4.4 服务器配置

在Claude Code中配置：

claude mcp add figma -e FIGMA_ACCESS_TOKEN=your-token-here -- npx -y github:alucardeht/figma-mcp

5. 接口定义

该服务提供以下工具接口：

5.1 导航工具

工具名称功能描述主要参数
list_pages列出文件中的所有页面file_key
list_frames列出页面上的框架file_key, page_name
get_frame_info获取框架结构（紧凑格式）file_key, page_name, frame_name, depth?
search_components按名称查找组件file_key, query

5.2 提取工具

工具名称功能描述主要参数
get_screenshot导出框架为PNGfile_key, page_name, frame_name
extract_styles提取设计令牌file_key, page_name, frame_name
extract_assets导出SVG和图像file_key, page_name, frame_name
get_file_styles列出已发布样式file_key

5.3 验证工具

工具名称功能描述
validate_implementationFigma与浏览器的像素级比较
check_layout_bounds检测内容溢出
compare_element_position比较元素位置：Figma vs 浏览器
compare_element_dimensions比较元素尺寸：Figma vs 浏览器
compare_visual使用pixelmatch进行像素级差异比较
verify_elements_present检查元素是否存在于DOM中
verify_assets_loaded验证图像是否已加载
validate_responsive_breakpoint验证特定视口
test_all_breakpoints测试移动端、平板、桌面

5.4 会话工具

工具名称功能描述
repeat_last从缓存重放上一个响应
get_session_state查看当前会话状态
reset_session清除所有缓存数据

6. 快速开始

6.1 环境要求

  • Node.js环境
  • Figma账户（建议Professional或Organization计划）
  • Figma个人访问令牌
  • MCP客户端（如Claude Desktop）

6.2 示例代码

在Claude Desktop中使用示例：

用户：@Figma MCP 显示Validado文件中着陆页的结构 Claude：正在检索文件结构... Validado文件中的页面： - Home - Components - Validado Validado页面中的框架： - Landing page - Login - Dashboard 着陆页结构（紧凑格式）： Landing page [1440x2462 bg:#f2f2f2] ├─ header [1440x469] │ ├─ nav [1440x81 row gap:99] │ │ ├─ logo [155x30 INSTANCE] │ │ └─ navHeaderLinks [456x49 row gap:8] │ └─ zipCode [1188x147 bg:#fff radius:20] ├─ aboutContainer [1169x122 row] │ ├─ aboutBox [391x122 radius:25] │ └─ aboutBox [408x122 radius:25] └─ footer [1440x90 row gap:309] 已提取165行结构，约2.5k令牌（95%令牌节省）。

提取资产：

用户：@Figma MCP 提取着陆页的所有资产 Claude：正在提取资产... 已成功提取资产： - icons/icon-1.svg - icons/icon-2.svg - icons/icon-3.svg - images/hero.png - images/background.png 设计令牌： - 颜色：#f2f2f2, #ffffff, #333333 - 字体：Inter, SF Pro - 间距：8px, 16px, 24px - 圆角：20px, 25px

6.3 直接访问节点ID

可以通过节点ID直接访问框架，更快更可靠：

# 从Figma URL获取节点ID https://www.figma.com/design/FILE_KEY/...?node-id=40000056-28165 # 使用节点ID访问 get_frame_info(file_key="h75vgHNcwxfHkRBbI53RRu", node_id="40000056-28165", depth=4) get_screenshot(file_key="h75vgHNcwxfHkRBbI53RRu", node_id="40000056-28165")

7. 注意事项

  • Figma计划限制：免费账户每月仅6次API调用，需要付费计划才能实际使用
  • 速率限制：Professional计划120请求/分钟，Organization计划480请求/分钟
  • 令牌节省：紧凑树格式可节省95%令牌（205k字符→10k字符）
  • 不可见元素过滤：自动排除visible: false的元素，匹配Figma设计视图
  • 大文件处理：自动分块和分页（>50页面/框架，>1000元素）
  • 深度控制：可控制树遍历深度，平衡细节与令牌使用
  • 进度跟踪：操作期间提供实时进度跟踪
  • 许可证：该项目采用MIT许可证，可自由使用、修改和分发