mcpField
F
figma-use-figjam

figma-use-figjam

github.com/figma设计与 UI2.1k2.0k 次安装今天更新
代码仓库

关于 figma-use-figjam

为通过 MCP 使用 Figma Plugin API 的 FigJam 操作提供专用技能说明,面向构建和编辑 FigJam 看板的 Agent。内容涵盖节点检查、文本修改、图片添加及常见节点类型的操作参考。

主要功能

  1. 01FigJam 文件检查与节点 ID 获取
  2. 02文本修改的字体加载步骤
  3. 03通过 upload_assets 添加图片
  4. 04区块、便签、连接线等节点参考

适用场景

  1. 01检查现有看板并获取节点标识
  2. 02创建和整理 FigJam 看板内容
  3. 03在节点上编辑文字或添加图片

MCP 相关

此技能为 Figma MCP 的 use_figma 工具提供 FigJam 专用上下文,并说明需在调用参数中包含技能名称。

安装

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

$npx skills add https://github.com/figma/mcp-server-guide --skill figma-use-figjam

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

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
batch-modify.md
create-code-block.md
create-connector.md
create-label.md
create-section.md
create-shape-with-text.md
create-sticky.md
create-table.md
create-text.md
edit-text.md
figjam-colors.md
plan-board-content.md
position-figjam-nodes.md

详细介绍

use_figma — FigJam 的 Figma 插件 API 技能

此技能包含适用于 use_figma MCP 工具的 FigJam 专属背景信息。figma-use 技能提供通过 MCP 执行插件 API 的基础背景信息,以及用于此处未介绍的进阶用例的完整 Figma 插件 API。

在 FigJam 操作中调用 use_figma 时,始终在逗号分隔的 skillNames 参数中包含 figma-use-figjam。如果此技能是通过 MCP 资源加载的,则必须在名称前加上 resource:(例如 resource:figma-use-figjam)。 这是用于跟踪技能使用情况的日志参数,不会影响执行。

FigJam URL 的格式为 figma.com/board/...。 请勿在 FigJam 中调用 figma.createPage()——这会抛出 TypeError: figma.createPage no such property 'createPage' on the figma global object。createPage() 仅适用于 Design 文件(figma.com/design/...)。FigJam 文件只有一个隐式页面;请改用分区来组织内容(参见 create-section)。

检查 FigJam 文件

get_figjam 是用于检查 FigJam 文件的工具。 它会以 XML 格式返回完整的节点树,包括页面、分区、便签、连接线和其他节点的 ID,供后续 use_figma 调用引用。

  • 在编写需要引用现有节点(页面 ID、分区 ID 等)的 use_figma 代码之前,先调用 get_figjam。 不要尝试通过运行检查脚本来查找 ID——use_figma 输出的 console.log 不会返回给 Agent(参见 figma-use Critical Rule #4)。只有 return 值会返回。
  • get_metadata 不适用于 FigJam 文件——它仅适用于 Design 模式,并会立即报错:“unsupported for FigJam files”。
  • get_screenshot 需要有效的 nodeId——传入空的 nodeId 会返回“invalid nodeId”错误。请先通过 get_figjam 获取 ID。
  • 如果你在之前的 use_figma 调用中忘记 return 某个 ID,现在需要用到它,请调用 get_figjam,不要重新运行检查脚本。

高效加载参考文档

只加载任务所需的参考文档;但如果需要加载多个,请在单个并行工具调用批次中发起所有读取操作,不要跨多个轮次依次读取。对于典型的画布创建任务,这意味着在一条消息中读取 plan-board-content 和你将使用的 3 到 4 个特定节点类型参考文档。

延迟加载的工具——批量加载架构

Figma MCP 工具(use_figma、get_figjam、get_screenshot、get_metadata、create_new_file、whoami)通常会作为延迟加载的工具出现,调用前需要通过 ToolSearch 加载其架构。请使用 select: 语法,在一次 ToolSearch 调用中加载所有架构,不要为每个工具分别调用一次:

ToolSearch query="select:use_figma,get_figjam,get_screenshot,get_metadata,create_new_file"

连续调用 6 次 ToolSearch,意味着在开始任何工作之前就要往返 6 次。一次批量调用只需往返 1 次。

文本修改——标准流程

FigJam 中所有文本修改(便签/形状/标签/表格单元格/连接线文本、独立文本节点)都遵循与 Design 文件相同的流程:加载字体 → await → 修改 → 返回受影响的 ID。跳过字体加载会抛出 Cannot write to node with unloaded font "<family> <style>"。参见 figma-use → gotchas.md → Canonical text-edit recipe。FigJam 专属说明:子层默认值各不相同(便签 → Inter Medium,形状 → Inter Medium,连接线 → 设置前无效),因此请始终从 node.text.fontName 加载字体,不要硬编码 { family: 'Inter', style: 'Regular' }。

向 FigJam 白板添加图片

upload_assets 是向 FigJam 文件添加图片的唯一受支持方式。 使用 FigJam 的 fileKey 调用 upload_assets;该工具会返回仅可使用一次的上传 URL,你需要向这些 URL POST 原始图片字节,图片随后会自动提交并放置。传入 nodeIds(每次上传对应一个条目),可将上传的图片作为填充附加到现有 FigJam 节点;省略 nodeIds,则会将图片作为新图层放置到白板上。

有关完整的请求/响应结构,请参阅 figma-use → api-reference.md → Images。

参考文档

  • plan-board-content - 对于任何白板内容请求,都请阅读此文档——白板模板、回顾、头脑风暴、破冰活动、会议白板、脚手架
    • 涵盖生成白板内容的规划,包括顺序大纲、分区、意图和层级文本
    • 具体 API 详情请参阅其他参考文档
  • create-section — 创建和配置 FigJam 分区(调整大小、命名、颜色、内容可见性、整理节点、列布局)
  • create-sticky — 创建和配置 FigJam 便利贴(颜色、大小、文本、作者可见性、批量创建)
  • create-connector — 创建和配置 FigJam 连接线(端点、箭头、线条类型、标签、颜色、图表连线)
  • create-text — 创建和配置 FigJam 文本节点(字体加载、预设字体和颜色、大小、列表、思维导图操作)
  • position-figjam-nodes — 在画布上定位、调整大小和重新设置节点的父级(包括分区内的节点)
  • create-shape-with-text — 创建和配置嵌入文本的 FigJam 形状(形状类型、颜色预设、调整大小以适应文本、图表布局)
  • create-code-block — 创建和配置 FigJam 代码块节点(语言、语法高亮、定位、嵌入分区)
  • create-table — 创建和配置 FigJam 表格(行、列、单元格文本、颜色预设、调整大小)
  • edit-text — 编辑现有文本节点(字体加载、样式范围、查找/替换、FigJam Charcoal 默认颜色)
  • create-label — 创建和配置 FigJam 标签节点(带编号或字母的小圆形标注标记、序列、定位)
  • batch-modify — 一次修改多个现有节点的模式(批量样式更改、重新定位、属性更新)
  • figjam-colors — 所有节点类型的标准 FigJam 调色板(便利贴、分区、连接线、形状、标签),以及 hex/255 表示法规则和 h() 辅助函数

评论

支持 Markdown