AI导哈

Figma API智能上下文管理服务器

为Figma API提供智能上下文管理和令牌优化的MCP服务器，支持紧凑树形输出、智能导航和资产提取。

  • by alucardeht
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 alucardeht/figma-mcp

使用说明

@阿卡德/费马mcp

用于Figma API的MCP服务器，具有智能上下文管理和令牌优化功能。

v3.0.0——紧凑的树输出格式，可节省95%的令牌。

安装

克劳德代码

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

获取您的Figma代币

  1. 打开 Figma设置
  2. 导航至 个人访问令牌
  3. 点击 创建新令牌
  4. 立即复制令牌（不会再次显示）

需求

Figma平面图

Figma REST API适用于任何计划，但是 利率限制差异很大:

计划 文件访问 速率限制
起动机（免费） 每月6次请求 实际使用不切实际
专业的 无限制 120需求/分钟
组织 无限制 480需求/分钟

重要提示： 免费帐户仅限于 每月6次API调用 对于文件内容。这使得MCP服务器在没有付费计划的情况下不切实际。

开发模式为 不需要 -此MCP使用REST API，而不是开发模式功能。

特性

紧凑树输出（v3.0中的新功能）

  • 代币减少95%：205k个字符→ 10k个字符用于典型的登录页面
  • ASCII树格式：清晰的层次结构 ├─, └─, │
  • 保留基本信息：位置、尺寸、颜色、布局、溢流指示器

输出示例：

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]

智能导航

  • 基于名称的访问：使用人类可读的名称，不需要ID
  • 部分匹配：“登录”与“登录页面”匹配
  • 会话状态：跨请求维护上下文

不可见元素过滤

默认情况下，具有以下属性的元素 visible: false 图中的所有MCP输出均不包括：

  • 框架结构 (get_frame_info)-只有树中可见的元素
  • 资产提取 (extract_assets)-只有可见的图标和图像
  • 款式系列 (extract_styles)-仅来自可见元素的样式
  • 页面分析 (analyze_page_structure)-仅可见部分和组件

这确保了MCP输出与您在Figma的设计视图中实际看到的内容相匹配，而不是用于设计迭代、禁用变体或占位符组件的隐藏元素。

为什么这很重要： 设计师经常隐藏元素（占位符、替代版本、正在进行的工作）。如果不进行过滤，人工智能模型将看到并可能实现这些不可见的元素，从而导致与预期设计的分歧。

资产管理

  • 有组织的开采：资产保存到 icons/ 和 images/ 文件夹
  • 设计代币：提取颜色、排版、效果
  • 可配置的屏幕截图：带尺寸限制的1-4x比例

可用工具

导航

工具 说明
list_pages(file_key) 列出文件中的所有页面
list_frames(file_key, page_name) 列出页面上的框架
get_frame_info(file_key, page_name, frame_name, depth?) 以紧凑的格式获取帧结构
get_frame_info(file_key, node_id?, depth?) 通过node_id获取帧（更快的直接访问）
search_components(file_key, query) 按名称查找组件

提取

工具 说明
get_screenshot(file_key, page_name, frame_name) 将帧导出为PNG
get_screenshot(file_key, node_id?) 通过node_id导出帧（更快的直接访问）
extract_styles(file_key, page_name, frame_name) 提取设计令牌
extract_assets(file_key, page_name, frame_name) 导出SVG和图像
get_file_styles(file_key) 列出已发布的样式

验证

工具 说明
validate_implementation(file_key, url, figma_node_id, ...) Figma和浏览器之间的像素完美比较，结果按视觉部分组织，包括匹配分数、边界、颜色和CSS树
check_layout_bounds(file_key, page_name, frame_name) 检测内容溢出
compare_element_position(file_key, page_name, frame_name, element_name, browser_x, browser_y) 比较位置：Figma与浏览器
compare_element_dimensions(file_key, page_name, frame_name, element_name, browser_width, browser_height) 比较尺寸：Figma与浏览器
compare_visual(file_key, page_name, frame_name, screenshot_path) 像素匹配的像素完美差异
verify_elements_present(file_key, page_name, frame_name, element_names) 检查DOM中是否存在元素
verify_assets_loaded(file_key, page_name, frame_name) 验证图像是否已加载
validate_responsive_breakpoint(file_key, page_name, frame_name, viewport_width) 验证特定视口
test_all_breakpoints(file_key, page_name, frame_name) 测试手机、平板电脑、台式机

会话

工具 说明
repeat_last() 从缓存中回放之前的响应
get_session_state() 查看当前会话状态
reset_session() 清除所有缓存数据

通过节点ID直接访问

两者 get_frame_info 和 get_screenshot 接受 node_id 作为替代方案 page_name + frame_name 以实现更快、更直接的访问。

如何获取node_id：

  1. Figma编辑器中的打开框架
  2. 从URL复制ID： https://www.figma.com/design/FILE_KEY/...?node-id=NODE_ID
  3. 节点ID格式示例： 40000056-28165

用途：

get_frame_info(file_key="h75vgHNcwxfHkRBbI53RRu", node_id="40000056-28165", depth=4)
get_screenshot(file_key="h75vgHNcwxfHkRBbI53RRu", node_id="40000056-28165")

优点：

  • 跳过页面/帧名称查找（API调用少1个）
  • 更直接、更可靠
  • 适用于特定的设计审查

压缩格式参考

这 get_frame_info 该工具返回针对LLM上下文优化的紧凑树格式：

element-name [[x,y wxh] attributes]
├─ child [[x,y wxh] attributes]
│  └─ grandchild [wxh attributes]
└─ sibling [wxh attributes]

显示的属性：

  • bg:#hex --背景颜色
  • row / col --布局方向
  • gap:N --儿童间距
  • radius:N --边界半径
  • shadow --有阴影
  • INSTANCE / VECTOR / TEXT --节点类型
  • ↓overflow:Npx --内容溢出边界

示例工作流程

1. list_pages("h75vgHNcwxfHkRBbI53RRu")
   → ["Home", "Components", "-> Validado"]

2. list_frames(file_key, "Validado")
   → ["Landing page", "Login", "Dashboard"]

3. get_frame_info(file_key, "Validado", "Landing page", depth=4)
   → Compact tree with full structure (165 lines, ~2.5k tokens)

4. extract_assets(file_key, "Validado", "Landing page")
   → icons/icon-1.svg, icons/icon-2.svg, images/hero.png

速率限制

计划 请求数/分钟
免费 120
专业 240
组织 480

使用分页 continue=true 保持在限制范围内。

许可证

麻省理工学院

问题？ 打开一个问题

相关 MCP