Figma AI 协作服务器

一个通过AI提供Figma工作区深度访问的服务器,支持文件结构读取、图像导出、评论管理和团队组件浏览。

  • by AStheTECH
  • Python
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 Curious-Layer/cl-mcp-figma

使用说明

通过人工智能检查设计、导出资产并协作处理Figma文件。

模型上下文协议(MCP)服务器,公开Figma的API,用于读取文件结构、导出图像、管理注释和浏览团队组件。

概述

Figma MCP服务器通过AI提供对Figma工作空间的深度访问:

  • 读取文件文档树、节点、样式和组件库
  • 将节点导出为多种格式和比例的渲染图像
  • 发布和检索评论,浏览团队项目和文件

非常适合:

  • 让AI在不打开应用程序的情况下检查和描述Figma的设计
  • 由自然语言触发的资产导出管道自动化
  • 面向人工智能辅助开发的表面设计系统组件和样式

工具

health_check — Check server readiness

返回一个状态对象,确认服务器正在运行且可访问。

输入: (无)

输出:

{
  "status": "ok",
  "server": "CL Figma MCP Server"
}
get_me — Get authenticated user profile

返回与连接的凭据关联的Figma用户的配置文件。

输入: (无)

输出:

{
  "id": "123456789",
  "email": "user@example.com",
  "handle": "username",
  "img_url": "https://..."
}
get_file — Retrieve a Figma file document tree

获取Figma文件的完整文档树。使用 depth 限制节点树返回的深度并减小响应大小。

输入:

- `file_key` (string, required)  — Unique key identifying the Figma file (found in the file URL)
- `depth`    (integer, optional) — Depth of the node tree to return (default: full tree)

输出:

{
  "name": "My Design File",
  "lastModified": "2024-01-01T00:00:00Z",
  "document": { "id": "0:0", "name": "Document", "type": "DOCUMENT", "children": [...] }
}
get_file_nodes — Retrieve specific nodes from a file

通过节点ID从Figma文件中获取一个或多个特定节点,而不是整个文档树。

输入:

- `file_key`  (string, required)  — Unique key identifying the Figma file
- `node_ids`  (string, required)  — Comma-separated list of node IDs to retrieve (e.g. '1:2,3:4')
- `depth`     (integer, optional) — Depth of the node subtree to return

输出:

{
  "nodes": {
    "1:2": { "document": { "id": "1:2", "name": "Frame", "type": "FRAME" } }
  }
}
get_file_components — List local components in a file

返回Figma文件中所有本地定义的组件,包括它们的键和描述。

输入:

- `file_key` (string, required) — Unique key identifying the Figma file

输出:

{
  "meta": {
    "components": [
      { "key": "abc123", "name": "Button/Primary", "description": "" }
    ]
  }
}
get_file_styles — List styles defined in a file

返回Figma文件中定义的所有本地样式(颜色、文本、效果、网格)。

输入:

- `file_key` (string, required) — Unique key identifying the Figma file

输出:

{
  "meta": {
    "styles": [
      { "key": "def456", "name": "Primary/Blue", "style_type": "FILL" }
    ]
  }
}
get_file_versions — Retrieve version history of a file

返回Figma文件的完整版本历史记录,包括版本标签和时间戳。

输入:

- `file_key` (string, required) — Unique key identifying the Figma file

输出:

{
  "versions": [
    { "id": "v1", "label": "Final Review", "created_at": "2024-01-01T00:00:00Z" }
  ]
}
get_images — Export nodes as rendered image URLs

将一个或多个节点渲染为图像,并返回签名的下载URL。支持PNG、JPG、SVG和PDF格式。

输入:

- `file_key`  (string, required)  — Unique key identifying the Figma file
- `node_ids`  (string, required)  — Comma-separated list of node IDs to export (e.g. '1:2,3:4')
- `scale`     (float, optional)   — Export scale factor between 0.01 and 4 (default: 1)
- `format`    (string, optional)  — Image format: 'jpg', 'png', 'svg', or 'pdf' (default: 'png')

输出:

{
  "images": {
    "1:2": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/..."
  }
}
get_image_fills — Retrieve image fill download URLs

当图像填充到节点上时,返回嵌入在Figma文件中的所有图像的下载URL。

输入:

- `file_key` (string, required) — Unique key identifying the Figma file

输出:

{
  "meta": {
    "images": { "imageRef123": "https://..." }
  }
}
get_comments — List comments on a file

返回Figma文件上的所有注释,包括已解析和未解析的线程。

输入:

- `file_key` (string, required) — Unique key identifying the Figma file

输出:

{
  "comments": [
    { "id": "c1", "message": "Looks good!", "resolved_at": null }
  ]
}
post_comment — Post a comment on a file

代表经过身份验证的用户向Figma文件添加新注释。

输入:

- `file_key` (string, required) — Unique key identifying the Figma file
- `message`  (string, required) — The comment text to post

输出:

{
  "id": "c2",
  "message": "Please update the button radius.",
  "created_at": "2024-01-01T00:00:00Z"
}
get_team_projects — List projects in a team

返回属于Figma团队的所有项目。

输入:

- `team_id` (string, required) — The Figma team ID

输出:

{
  "projects": [
    { "id": "12345", "name": "Design System" }
  ]
}
get_project_files — List files in a project

返回特定Figma项目中的所有文件。

输入:

- `project_id` (string, required) — The Figma project ID

输出:

{
  "files": [
    { "key": "abc123", "name": "Components v2", "last_modified": "2024-01-01T00:00:00Z" }
  ]
}
get_team_components — List published components in a team library

返回Figma团队共享组件库中可用的所有已发布组件。

输入:

- `team_id` (string, required) — The Figma team ID

输出:

{
  "meta": {
    "components": [
      { "key": "ghi789", "name": "Icon/Close", "file_key": "abc123" }
    ]
  }
}
get_component — Get a specific published component

通过单个已发布组件的唯一组件键检索其元数据。

输入:

- `component_key` (string, required) — The unique key of the published component

输出:

{
  "meta": {
    "key": "ghi789",
    "name": "Icon/Close",
    "description": "Close icon, 24px",
    "file_key": "abc123"
  }
}

API参数参考

Common Parameters
  • file_key --Figma文件的唯一标识符,从其URL中提取: figma.com/file/{file_key}/...
  • node_ids --中以逗号分隔的节点ID {pageId}:{nodeId} 格式,例如。 1:2,3:4
  • depth --整数,控制返回节点树的多少级;省略整棵树
Resource ID Formats

文件密钥:

{alphanumeric string from URL}
Example: aBcDeFgHiJkLmNoP

节点ID:

{page}:{node}
Example: 1:2  (page 1, node 2)

团队ID:

{numeric string}
Example: 123456789

项目ID:

{numeric string}
Example: 987654321
Image Export Formats
  • png --光栅,默认格式(默认比例:1×)
  • jpg --光栅、较小的文件大小、无透明度
  • svg --矢量,非常适合图标和简单形状
  • pdf --矢量,适合打印

刻度范围: 0.01 – 4 (例如。 2 用于@2x视网膜导出)

故障排除

Missing or Invalid Headers
  • 原因: 请求标头中未提供Figma凭据或格式不正确
  • 解决方案:
    1. 验证 Authorization: Bearer YOUR_API_KEY 和 X-Mewcp-Credential-Id: CREDENTIAL-ID 标题存在
    2. 检查您的MewCP帐户中的凭据是否处于活动状态
Insufficient Credits
  • 原因: API调用已超出您的请求限制
  • 解决方案:
    1. 在您的Curious Layer仪表板中检查信用使用情况
    2. 升级到付费计划或为更高的限额添加积分
    3. 联系支持部门进行信用调整
Credential Not Connected
  • 原因: 没有链接到您帐户的Figma凭据
  • 解决方案:
    1. 首选 凭证 在您的MewCP仪表板中
    2. 连接您的Figma帐户(OAuth)
    3. 使用正确的重试请求 X-Mewcp-Credential-Id 头球
Malformed Request Payload
  • 原因: JSON负载无效或缺少必填字段
  • 解决方案:
    1. 发送前验证JSON语法
    2. 确保包括所有必需的工具参数
    3. 检查一下 node_ids 是逗号分隔的字符串,不是数组
Server Not Found
  • 原因: API终结点中的服务器名称不正确
  • 解决方案:
    1. 验证端点格式: {server-name}/mcp/{tool-name}
    2. 使用文档中正确的服务器名称
    3. 检查您的Curious Layer帐户中的可用服务器
Figma API Error
  • 原因: 上游Figma API返回错误
  • 解决方案:
    1. 检查Figma服务状态 Figma状态页面
    2. 验证您的凭据是否可以访问正在查询的文件或团队
    3. 查看错误消息以了解具体详细信息(例如,找不到文件、权限不足)

Resources