用途:将 Figma COMPONENT_SET 内的变体重排为整齐的矩阵式变体表,适合设计系统文档展示。
主要能力:解析每个变体的属性(如 Size=md、State=hover);默认把最后一个变体属性作为列轴,其余作为行轴,可用 COLUMN_PROPERTY 覆盖;单元格尺寸按最大变体尺寸加内边距计算,变体在单元格中居中;用白色容器框包裹,含标题、左侧行标签和顶部列头;通过 figma.combineAsVariants() 重建组件集,获得原生紫色虚线框(#9747FF,虚线 [10,5],内描边);重跑前会清除上次生成的标签与容器,因此可重复执行。
使用方式:先加载官方 figma-use 技能(完整 Figma Plugin API 参考),脚本遵循纯 JS、顶层 await + return、输入以 const 内联在脚本顶部、颜色用 0–1、文本操作前加载字体、await figma.getNodeByIdAsync(...) 等规则,脚本失败时不产生改动。获取 COMPONENT_SET_ID(选择、搜索或粘贴;留空则回退到当前选中项)。通过 use_figma 运行 scripts/arrange-component-set.js(skillNames: "figma-arrange-component-set"),按需调整 GAP / CELL_PADDING。运行后截图目视验证;脚本返回 containerId、重建后的 componentSetId 及网格行列与标签信息。
限制:脚本会删除原组件集并克隆重建,变体及其属性保留,但组件集节点 id 会变化(返回为 componentSetId)。标签加载 Inter Regular 与 Inter Semi Bold,若文件无此字体需在 loadFontAsync 调用中更换字体族。单一属性轴时所有变体落在同一行;多属性轴会生成非列属性的所有行组合(笛卡尔积)。如需理解变体语义(状态机、CSS),应使用 figma-analyze-component-set。此能力用于设计系统作者操作,原生 MCP 的只读 get_design_context / get_metadata 不覆盖。