Figma MCP Server 服务说明文档

发布时间：2026/11/2 1:46:01

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个人访问令牌进行认证：

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

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`	导出框架为PNG	file_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_implementation`	Figma与浏览器的像素级比较
`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")