mcpField
F
figjam-create-content

figjam-create-content

github.com/southleft设计与 UI94122 次安装10 周前更新
代码仓库

关于 figjam-create-content

figjam-create-content 是用于逐项创建和读取 FigJam 白板内容的技能,适合需要精细控制布局与样式的 Figma 用户。它提供便笺、连接线、表格等操作示例,也可读取白板内容和连接关系。

主要功能

  1. 01创建便笺、形状、连接线与区块
  2. 02创建表格和代码块
  3. 03自动排列白板元素
  4. 04读取白板内容与连接关系

适用场景

  1. 01按指定颜色和位置制作 FigJam 白板
  2. 02扩展已有白板并连接节点
  3. 03批量创建便笺或表格
  4. 04检查创建后的白板元素和连接

安装

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

$npx skills add https://github.com/southleft/figma-console-mcp-skills --skill figjam-create-content

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

附带文件references/figjam-snippets.md

详细介绍

figjam-create-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: "figjam-create-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