mcpField
C
create-figjam-content

create-figjam-content

github.com/southleft生产力2069 次安装21 周前更新
代码仓库

关于 create-figjam-content

这是一个通过 Figma Plugin API 创建和读取 FigJam 画板的技能,适合需要精细控制元素、超出单次图表生成能力的场景。

主要功能

  1. 01创建单个或批量便签
  2. 02添加形状、分区、表格和代码块
  3. 03通过节点 ID 连接元素
  4. 04自动排列画板内容
  5. 05读取画板内容和连接

适用场景

  1. 01按指定颜色和位置构建画板
  2. 02向现有 FigJam 画板添加元素
  3. 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 工具。

工作流

  1. 确认这是 FigJam 文件。 所有操作在 FigJam 之外都会报错。先检查: return { editorType: figma.editorType }; — 返回值必须是 'figjam'。
  2. 从 references/figjam-snippets.md 中选择操作:创建便签 / 多个便签 / 连接线 / 带文本的形状 / 分区 / 表格 / 代码块、自动排列,或读取白板内容 / 连接关系。
  3. 通过 use_figma 运行代码片段(skillNames: "create-figjam-content"),编辑内联常量(文本、位置、颜色、节点 ID)。
  4. 连接线需要真实的节点 ID。 先创建节点并记录其返回的 ID,然后创建引用这些 ID 的连接线(起点/终点 + 磁吸点)。
  5. 返回创建的 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