mcpField
F
figma

figma

github.com/acedatacloud设计与 UI17167 次安装今天更新
代码仓库

关于 figma

通过 curl 和 jq 调用 Figma API 来读取 Figma 文件，可用于设计审查或设计转代码。它支持查看文件结构、指定节点、渲染图像、评论和团队项目。

主要功能

  1. 01查看文件树和顶层画板
  2. 02读取指定节点详情
  3. 03将节点渲染为临时图像
  4. 04获取文件评论
  5. 05列出团队项目

适用场景

  1. 01检查设计文件中的画板和节点结构
  2. 02为设计转代码渲染画板
  3. 03提取布局、颜色、间距和字体信息
  4. 04查看评论或团队项目文件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/acedatacloud/skills --skill figma

安装后在 Claude Code 中输入/figma确认已加载。

详细介绍

通过 curl + jq 读取 Figma。用户的 OAuth bearer token 位于 $FIGMA_TOKEN；每次调用都需要 Authorization: Bearer $FIGMA_TOKEN。基础 URL： https://api.figma.com/v1。

失败响应为 {"status":<code>,"err":"..."}——原样显示 err。403 表示 token 缺少所需的 scope，或文件未与用户共享。404 = 文件 key 无效。

文件 key 是粘贴的 URL 中 figma.com/file/<KEY>/... 或 figma.com/design/<KEY>/... 这一段。节点 id 位于 ?node-id=1-23 中（Figma 显示为 1:23；API 也接受 1:23）。

F="https://api.figma.com/v1"; AUTH="Authorization: Bearer $FIGMA_TOKEN"
# Who am I (account card)
curl -sS -H "$AUTH" "$F/me" | jq '{handle, email}'
# File document tree (name + top-level frames). Big files: prefer /nodes below.
curl -sS -H "$AUTH" "$F/files/FILE_KEY?depth=2" \
  | jq '{name, pages: [.document.children[] | {name, frames: [.children[]?.name]}]}'

读取特定节点并渲染图像

KEY="FILE_KEY"
# Just the nodes you care about (faster than the whole file)
curl -sS -H "$AUTH" "$F/files/$KEY/nodes?ids=1:23,1:45" \
  | jq '.nodes | to_entries[] | {id: .key, name: .value.document.name, type: .value.document.type}'

# Render nodes to images — returns temporary CDN URLs (this is the "see it" tool)
curl -sS -H "$AUTH" "$F/images/$KEY?ids=1:23&format=png&scale=2" \
  | jq '.images'   # { "1:23": "https://...png" }

对于设计转代码，先将画框渲染为 PNG（以便查看），再读取其节点 JSON （布局／填充／排版），提取准确的颜色、间距和文本。

评论与项目

curl -sS -H "$AUTH" "$F/files/FILE_KEY/comments" \
  | jq '.comments[] | {user: .user.handle, at: .created_at, message}'
# Team projects → files (needs a team id from the Figma URL /team/<id>/...)
curl -sS -H "$AUTH" "$F/teams/TEAM_ID/projects" | jq '.projects'

注意事项

  • 节点 id：Figma URL 使用 1-23（短横线）；API 要求使用 1:23（冒号）。请转换。
  • /images URL 是临时的——请及时下载／使用，不要存储。
  • depth= 用于限制树遍历深度；仅对小文件省略此参数，否则会获取数 MB 的节点 JSON。

评论

支持 Markdown