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_TOKENyour-token-here -- npx -y github:alucardeht/figma-mcp5. 接口定义该服务提供以下工具接口5.1 导航工具工具名称功能描述主要参数list_pages列出文件中的所有页面file_keylist_frames列出页面上的框架file_key, page_nameget_frame_info获取框架结构紧凑格式file_key, page_name, frame_name, depth?search_components按名称查找组件file_key, query5.2 提取工具工具名称功能描述主要参数get_screenshot导出框架为PNGfile_key, page_name, frame_nameextract_styles提取设计令牌file_key, page_name, frame_nameextract_assets导出SVG和图像file_key, page_name, frame_nameget_file_styles列出已发布样式file_key5.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 Desktop6.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, 25px6.3 直接访问节点ID可以通过节点ID直接访问框架更快更可靠# 从Figma URL获取节点ID https://www.figma.com/design/FILE_KEY/...?node-id40000056-28165 # 使用节点ID访问 get_frame_info(file_keyh75vgHNcwxfHkRBbI53RRu, node_id40000056-28165, depth4) get_screenshot(file_keyh75vgHNcwxfHkRBbI53RRu, node_id40000056-28165)7. 注意事项Figma计划限制免费账户每月仅6次API调用需要付费计划才能实际使用速率限制Professional计划120请求/分钟Organization计划480请求/分钟令牌节省紧凑树格式可节省95%令牌205k字符→10k字符不可见元素过滤自动排除visible: false的元素匹配Figma设计视图大文件处理自动分块和分页50页面/框架1000元素深度控制可控制树遍历深度平衡细节与令牌使用进度跟踪操作期间提供实时进度跟踪许可证该项目采用MIT许可证可自由使用、修改和分发