Component Matrix可高效批量导出按钮各状态图像及元数据：需先构建Variant组件，再插入Matrix绑定、多选导出PNG，用Batch Export插件自定义命名路径，最后通过API脚本提取JSON清单。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在Figma中管理大量按钮组件并需要导出其所有状态（如默认、悬停、点击、禁用等），手动逐个检查效率极低。Component Matrix可将同一组件变体自动排列为网格，配合插件或内置功能实现批量提取。以下是具体操作步骤：
一、确保按钮已构建为带Variants的Component
Component Matrix仅识别具有Variant属性的组件，因此必须先将按钮的所有状态定义为单个Component下的Variant，而非独立组件或普通图层。未使用Variants结构将导致Matrix无法生成有效网格。
1、选中一个按钮主组件，在右侧属性面板点击Create variant按钮，为其添加新状态。
2、在Variant属性区为每个状态设置唯一且规范的命名，例如Default / Hover / Press / Disabled，避免空格或特殊字符。
3、确认所有状态均归属同一父级Component，且该Component在Assets面板中显示为带“diamond”图标的可复用组件。
二、插入Component Matrix并绑定按钮Variant
Component Matrix会根据所选Variant属性自动生成行列组合，是批量呈现状态的基础结构。必须通过右键菜单或命令面板触发插入，直接拖拽无法正确绑定数据源。
1、在画布上右键空白区域，选择Insert → Component Matrix。
2、点击新生成的Matrix占位框，在右侧属性面板的Component字段中，从下拉列表选取您的按钮Component。
3、在Variant property下拉项中，选择用于区分状态的属性名（如State或Status），确保该属性已在所有Variant中统一定义。
三、导出Matrix中所有单元格为PNG图像
Figma原生不支持一键导出Matrix全部单元格，但可通过选中整个Matrix后启用多选导出模式，将每个单元格作为独立图层导出为PNG，保留原始尺寸与状态标识。
1、点击Component Matrix外框，按住Shift键并依次点击每个单元格，确保全部状态实例被选中（状态数=行×列）。
2、右键任意选中单元格，选择Export selection…，在弹出面板中设置格式为PNG，缩放为1x，勾选Include in export。
3、点击Export，指定本地文件夹，Figma将为每个选中单元格生成独立文件，文件名默认含Variant标签（如Button-Default.png）。
四、使用插件“Batch Export”补全命名与路径控制
当需自定义导出文件名前缀、保存至子文件夹或按状态分类归档时，Figma内置导出无法满足，必须借助第三方插件扩展能力。Batch Export支持基于Variant属性值动态生成文件路径与名称。
1、在Figma桌面端顶部菜单栏点击Plugins → Search plugins → 输入“Batch Export”并安装。
2、选中Component Matrix内全部单元格，运行插件，在设置界面勾选Use variant property for filename，并输入基础前缀（如“btn-state-”）。
3、在Output folder中指定目标路径，点击Export all，插件将按Variant属性值（如Hover）自动创建对应子文件夹并保存图像。
五、通过API脚本提取状态元数据为JSON清单
若需同步获取按钮各状态的尺寸、颜色值、文字内容等结构化信息，仅靠图像导出不够。Figma API配合Plugin API可读取Component Matrix中每个实例的Variant属性与图层属性，输出标准JSON清单供开发对接。
1、访问Figma Developer Portal创建新插件项目，启用figma.showUI()与figma.currentPage.selection权限。
2、在插件代码中遍历选中Matrix的children节点，调用node.variantProperties获取当前状态标识，再递归提取第一级文本节点的characters与填充色值。
3、将结果封装为数组对象，每个元素包含name、width、height、fill、text字段，最后调用figma.notify("Exported X states")并写入剪贴板为JSON字符串。
