figma-arrange-component-set

figma-arrange-component-set — 带标签的变体网格

将 COMPONENT_SET 中的变体重新排列成整齐的矩阵：解析每个变体的属性（Size=md, State=hover），选取一个属性作为列，其余属性作为行，将每个变体居中放入网格单元格，并将所有内容包裹在白色容器框架中，添加标题、左侧行标签和顶部列标题。最终效果就是适合放在设计系统文档中的变体表。

技能边界

• use_figma 规则 — 首先加载官方的 figma-use 技能；其中包含完整的 Figma Plugin API 参考。这些脚本依赖的要点：使用普通 JS，并在顶层使用 await + return（不要使用 IIFE 或 figma.closePlugin()；console.log 的内容不会作为返回值）；在每个脚本顶部以内联 const 声明输入；颜色值范围为 0–1；执行任何文本操作前先加载字体；使用 await figma.getNodeByIdAsync(...)；以及原子错误处理（脚本失败时不会应用任何更改——读取错误、修正后重试）。
• 理解变体的含义（状态机、CSS）→ 使用 figma-analyze-component-set。
• 此功能会在画布上写入新布局——这是设计系统创作功能，原生 MCP 的 get_design_context / get_metadata（只读）无法实现。

工作流

1. 识别组件集。 从选区、搜索结果或粘贴的 id 获取 COMPONENT_SET_ID。（也可以将常量留空并在画布上选择组件集——脚本会回退到当前选区。）
2. 选择列轴（可选）。 默认将最后一个变体属性作为列（通常是 State）；其余属性作为行。可通过 const COLUMN_PROPERTY 覆盖。
3. 运行 scripts/arrange-component-set.js，使用 use_figma（skillNames: "figma-arrange-component-set"）。如有需要，调整 GAP / CELL_PADDING 常量。
4. 进行视觉检查。 截取屏幕截图。脚本会返回 containerId、（重新创建的）componentSetId 和网格形状（行/列数、标签）。每个变体都会在对应单元格中居中。

工作原理

• 使用 figma.combineAsVariants()重新创建组件集，使其具有 Figma 原生的紫色虚线框架（#9747FF、虚线样式 [10,5]、内侧描边）。首先移除上次运行产生的旧标签/容器，因此可以幂等地重复运行。
• 网格计算：单元格尺寸 = 最大变体尺寸 + 内边距；调整组件集大小以适应 cols × (cell+gap)。根据解析出的属性值与行/列索引的匹配结果，定位变体。
• 标签使用自动布局框架，放置在组件集外部（组件集无法很好地嵌套在自动布局中），并分别与每行的垂直中心和每列的水平中心对齐。

注意事项

• 字体：脚本会为标签加载 Inter Regular + Inter Semi Bold；如果文件中没有 Inter，请在 loadFontAsync 调用中替换字体系列。
• 带有一定破坏性：脚本会删除原组件集，并通过克隆重建。变体及其属性会保留，但组件集的节点 id 会发生变化（通过 componentSetId 返回）。
• 一个属性 → 列：如果组件集只有一个属性轴，所有变体都会排在同一行。多轴组件集会为每种行属性组合生成一行（笛卡尔积）。