用途:把 Figma 的 COMPONENT_SET 内部变体重新排成整洁矩阵,生成类似设计系统文档中展示的变体表。
主要能力:解析每个变体的属性(如 Size=md、State=hover),默认以最后一个属性(通常是 State)作为列,其余属性作为行;每个变体在单元格中居中;整体包在白色容器框中,带标题、左侧行标签和顶部列标题。脚本返回 containerId、重建后的 componentSetId 以及网格形状(行列与标签)。运行前会清除上一次生成的标签与容器,可重复执行。它通过 figma.combineAsVariants() 重建组件集,获得 Figma 原生紫色虚线框(#9747FF,dash [10,5],内描边)。
使用方式:先加载官方 figma-use 技能(Figma Plugin API 参考)。脚本为普通 JS,使用顶层 await + return,无 IIFE、不调用 figma.closePlugin();输入以 const 内联在脚本顶部;颜色取值 0–1;文本操作前先加载字体;用 await figma.getNodeByIdAsync(...);出错时原子回滚。从选中、搜索或粘贴的 id 获取 COMPONENT_SET_ID(留空则回退到当前选中项)。可用 const COLUMN_PROPERTY 覆盖列轴,调整 GAP / CELL_PADDING。通过 use_figma(skillNames: "arrange-component-set-figma")运行 scripts/arrange-component-set.js,截图验证。标签字体加载 Inter Regular + Inter Semi Bold,若文件中没有 Inter 需替换 loadFontAsync 中的字族。
适用场景:需要在画布上重新排版变体、制作设计系统变体表时使用。注意这是写入画布的设计系统创作能力,原生 MCP 的 get_design_context / get_metadata 为只读,不覆盖此功能;理解变体含义(状态机、CSS)应改用 analyze-component-set-figma。
限制:具有一定破坏性——会删除原组件集并通过克隆重建,变体及其属性保留,但组件集节点 id 会变化(以 componentSetId 返回)。若只有一个属性轴,所有变体落在同一行;多轴集合会生成非列属性的所有行组合(笛卡尔积)。