组件解决的是“同一套结构需要在多个页面保持一致”。以“拾光阅读”的课程卡片为例，封面、标题、讲师信息和收藏按钮可以共用结构；课程名称、封面和收藏状态则应由实例或组件属性控制。理解主组件、实例、变体和属性的边界，组件库才不会越做越难维护。
如果刚接触 Figma，可先看Figma 组件入门；需要把同一元素做成不同状态时，再阅读Figma 组件变体。
1. 创建主组件并识别实例
在 Figma 中选中课程卡片的图层，点击右侧 Create component，或使用 Windows Ctrl + Alt + K、Mac Option + Command + K。主组件放在“Components”页面；从 Assets 拖出的副本是实例。主组件负责结构和默认样式，实例可以改课程名称、封面等允许覆盖的内容。
命名建议包含对象和用途，例如 CourseCard/Default。建立实例后，先改标题和封面确认覆盖有效，再回到主组件修改圆角或间距，观察所有实例是否同步。不要为了改一段文字就 Detach instance；脱离后将失去后续更新关系。
2. 用变体表达状态而不是复制文件
课程卡片至少需要 Default、Hover、Saved 三种状态。分别创建三个主组件后同时选中，点击 Combine as variants，在右侧将属性命名为 State，值设为 Default、Hover、Saved。实例中选择对应 State，就能切换收藏状态而不必维护三套独立组件。
变体属性应表达稳定差异，例如 State、Size、Theme；不要把每个课程标题都做成一个变体。需要复用按钮、图标时，可把它们作为嵌套实例放入卡片，后续替换图标不会破坏外层结构。
3. 用属性让实例安全可编辑
选中主组件中的标题文本，在右侧添加 Text property，命名为 Title；给收藏图标添加 Boolean property，命名为 Show favorite；把讲师头像设为 Instance swap property。这样实例编辑者能在一个属性区完成改文案、隐藏按钮和替换头像，不必深入图层。
为属性写清说明，例如“最多两行，超出时检查卡片高度”。在实例中改成长标题、关闭收藏按钮、替换头像，确认每个属性都有预期结果。若属性不显示，检查当前选中的是实例而非主组件，或属性是否真正绑定到了对应图层。
4. 发布团队库并管理更新
准备发布前，在组件文件中检查命名、封面缩略图、变体属性和使用说明。打开 Team library，发布组件后，在使用文件中启用该库。更新时先在主组件中修改，再写明影响范围，例如“CourseCard：标题间距由 8px 调整为 12px”。使用文件收到更新后先预览，再应用。
建议按“基础控件→卡片→页面模板”分层发布。若只是某个项目的临时实验，放在草稿区域，不要立即进入团队库。这样搜索组件时能分辨稳定资源和试验版本。
5. 组件库自查清单
- 实例改标题后，卡片高度是否随文案增长。
- Default、Hover、Saved 的属性值是否命名一致。
- 替换头像后，圆角和尺寸是否仍由主组件控制。
- 发布更新后，旧实例是否能预览差异再应用。
如果团队已有 Figma 资产，可先导入一个小型组件文件，再逐步整理到Pixso Figma 专题对应的协作流程。也可以在 Pixso 中建立中文组件库，并参考组件库迁移清单处理命名和版本。迁移时优先选择被多个页面使用的按钮和卡片，先统一命名与状态，再扩展到图标和页面模板，维护成本更可控。
发布前可用一张小表记录组件契约：结构由主组件控制，文案由 Title 属性控制，收藏状态由 State 变体控制，头像由 Instance swap 控制。若某个改动无法归入这四类，先判断它是否真的属于共享组件；把页面特例留在实例覆盖中，组件库会更稳定。每次发布还应指定一位维护人和一份变更记录，方便成员在更新提示出现时快速判断是否影响当前页面。
