Component Sets可结构化管理Figma图标：一、统一Frame容器与“Icon”图层命名，斜杠命名（如Icon/Action/Download）；二、选中后点“Combine as variants”自动生成组件集；三、手动添加Size、Theme等属性并分配值；四、用Boolean属性（如HasLabel）控制图层显隐；五、主组件修改后通过Detach/Attach同步所有变体。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在figma中管理大量图标时发现资产面板杂乱、命名重复、调用低效，则很可能是图标缺乏结构化归类。component sets（组件集）可将语义相关图标自动聚类并生成变体，实现按功能/状态/尺寸一键筛选。以下是完成该操作的具体步骤：一、统一图标结构与图层命名规范
Component Sets依赖图层层级与命名逻辑识别共性，必须确保所有图标具备一致的容器结构和可解析的命名格式，否则无法正确聚合为变体。
1、为每个图标创建独立Frame容器，禁用Auto Layout，设置固定宽高（如24×24）。
2、将图标图形全部置于Frame内，并重命名图层为“Icon”，避免使用“Group”“Layer 1”等默认名。
3、选中全部图标Frame，在右侧属性面板点击“Create component”转为组件，快捷键Ctrl+Alt+K（Windows）或Cmd+Option+K（Mac）。
4、批量选中所有图标组件，右键选择“Rename”，使用斜杠分隔法统一命名：例如Icon/Action/Download、Icon/Action/Upload、Icon/Status/Success、Icon/Status/Error。
二、通过命名自动构建Component Set
Figma能根据斜杠分隔的命名自动推断属性维度，无需手动添加属性，大幅缩短配置路径。
1、框选所有已命名的图标组件（如Icon/Action/Download至Icon/Status/Error）。
2、在右侧面板找到紫色按钮“Combine as variants”，点击执行聚合。
3、Figma自动识别命名中第一个斜杠前部分为组件集名称（Icon），第二个斜杠前为第一属性（Action/Status），其后为对应值（Download/Upload/Success/Error）。
4、组件集生成后，在Assets面板仅显示一个默认图标，其余变体隐藏于属性面板中。
三、手动补全缺失属性与值
当图标命名未覆盖全部语义维度（如缺少尺寸或主题变体）时，需主动扩展属性以支持多维筛选。
1、选中刚生成的组件集，在右侧“Component Properties”区域点击“+ Add property”。
2、新增属性命名为Size，类型设为Variant，添加值：Small、Medium、Large。
3、再新增属性命名为Theme，类型同为Variant，添加值：Filled、Outline、TwoTone。
4、双击进入主组件画布，对每个已有图标实例右键选择“Set variant property”，为其分配对应的Size和Theme值。
四、使用布尔属性控制可选图层
对于同一图标存在“带标签”与“不带标签”两种形式的场景，布尔属性可替代冗余变体，减少文件体积。
1、在图标Frame内添加一个Text图层作为标签，命名为“Label”，初始设为隐藏（Opacity=0%）。
2、选中“Label”图层，在右侧“Component Properties”中点击“+ Add property”，创建布尔属性，命名为HasLabel，类型选Boolean。
3、勾选该属性后，Figma自动在属性面板生成开关控件；开启时，将“Label”图层Opacity设为100%，约束其位置固定于图标右下角。
4、保存后，所有引用该组件集的实例均可独立开关标签显示，无需额外创建带标签版本。
五、批量同步更新与嵌套复用
当图标视觉规范发生变更（如线宽统一调整为2px），需确保所有变体同步响应，避免样式断裂。
1、双击组件集进入主组件画布，选中任意一个图标图形（非Frame容器）。
2、在右侧Stroke面板将Weight统一改为2，并确认“Cap”设为Round、“Join”设为Round。
3、返回画布任意位置，右键点击任一组件集实例，选择“Detach instance”临时解耦验证修改效果。
4、确认无误后，再次右键该实例，选择“Attach to main component”，使所有变体继承更新。
