关于 create-figjam-content
这是一个通过 Figma Plugin API 创建和读取 FigJam 画板的技能,适合需要精细控制元素、超出单次图表生成能力的场景。
主要功能
- 01创建单个或批量便签
- 02添加形状、分区、表格和代码块
- 03通过节点 ID 连接元素
- 04自动排列画板内容
- 05读取画板内容和连接
适用场景
- 01按指定颜色和位置构建画板
- 02向现有 FigJam 画板添加元素
- 03检查创建的元素及其连接
MCP 相关
该技能通过 `use_figma` 工具运行 Figma Plugin API 代码片段。需要 Figma Desktop 应用,且仅适用于 FigJam 文件。
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ southleft/ skills-for-figma --skill create-figjam-content安装后在 Claude Code 中输入/create-figjam-content确认已加载。
附带文件references/figjam-snippets.md
详细介绍
create-figjam-content — 创建和读取 FigJam 白板
逐个元素构建 FigJam 白板并读取内容。支持便签(单个和批量)、连接线、带文本的形状、分区、表格、代码块、自动排列,以及 get board contents 和 get connections。当原生的一键式 generate_diagram 粒度太粗时(例如,你想指定颜色、位置、磁吸点,或扩展现有白板),这能让你进行精细控制。
技能边界
use_figma规则 — 首先加载官方的figma-use技能;其中包含完整的 Figma Plugin API 参考。此处脚本依赖的要点:使用带顶层await和return的纯 JS(不要使用 IIFE 或figma.closePlugin();console.log不会作为返回值)、在每个脚本顶部以内联const定义输入、颜色值范围为 0–1、任何文本操作前先加载字体、使用await figma.getNodeByIdAsync(...),以及原子错误处理(脚本失败时不会应用任何更改 — 读取错误、修正后重试)。- 每项操作使用一个完整代码片段 → references/figjam-snippets.md。
- 一次调用生成完整图表 → 改用原生
generate_diagram工具。
工作流
- 确认这是 FigJam 文件。 所有操作在 FigJam 之外都会报错。先检查:
return { editorType: figma.editorType };— 返回值必须是'figjam'。 - 从 references/figjam-snippets.md 中选择操作:创建便签 / 多个便签 / 连接线 / 带文本的形状 / 分区 / 表格 / 代码块、自动排列,或读取白板内容 / 连接关系。
- 通过
use_figma运行代码片段(skillNames: "create-figjam-content"),编辑内联常量(文本、位置、颜色、节点 ID)。 - 连接线需要真实的节点 ID。 先创建节点并记录其返回的 ID,然后创建引用这些 ID 的连接线(起点/终点 + 磁吸点)。
- 返回创建的 ID;批量操作完成后,读取白板内容(
get board contents)以确认结果。
说明
- 设置文本前必须加载字体。 便签、带文本的形状、表格单元格和连接线标签都会写入文本 — 每个代码片段都会在设置
.characters前调用await figma.loadFontAsync(...);默认字体可能不可用时会回退到 Inter。 - 便签颜色使用命名调色板(
YELLOW、BLUE、GREEN、PINK、ORANGE、PURPLE、RED、LIGHT_GRAY、GRAY);其他颜色会回退为默认便签填充色。 - 形状的
shapeType值包括:SQUARE、ROUNDED_RECTANGLE、ELLIPSE、DIAMOND、TRIANGLE_UP、TRIANGLE_DOWN、PARALLELOGRAM_RIGHT、PARALLELOGRAM_LEFT等。 - 连接线磁吸点:
AUTO、TOP、BOTTOM、LEFT、RIGHT。 - 这些工具需要 Figma Desktop 应用(浏览器中无法使用 Plugin API)。
评论
支持 Markdown