文章目录
-
- 一、先搭好组件库（一次性投入，长期受益）
-
- 1）原子化结构：从最小元素开始
- 2）用「主组件+变体+属性」做一套万能组件
- [3）全用 Auto Layout + 变量，彻底自适应](#3）全用 Auto Layout + 变量，彻底自适应)
- 4）命名+整理，让团队找得到
- [5）发布到团队库（Team Library）](#5）发布到团队库（Team Library）)
- 二、日常怎么用组件库（直接提效）
- 三、高级技巧：效率再翻倍
-
- 1）组件嵌套（Nesting）
- [2）组件替换（Swap Instance）](#2）组件替换（Swap Instance）)
- 3）批量更新所有组件
- [4）组件文档（Doc 页面）](#4）组件文档（Doc 页面）)
- 四、团队维护：不乱、不崩、好协作
一、先搭好组件库（一次性投入，长期受益）
1）原子化结构：从最小元素开始
按「原子→分子→ organism →模板→页面」分层：
- 原子：图标、按钮、输入框、标签、分隔线
- 分子：搜索栏、列表项、卡片头部
- 有机体：登录表单、导航栏、商品卡片
- 模板/页面：整体布局、首页/详情页框架
好处：改一个原子，所有用到它的组件自动更新，不用到处改。
2）用「主组件+变体+属性」做一套万能组件
以按钮为例：
-
画好一个基础按钮 → 选中 → 点 Create Component （快捷键
⌘+Option+K）。 -
复制多个，分别做：
默认/hover/点击/禁用、主按钮/次按钮/文字按钮、小/中/大。 -
全部选中 → Combine as Variants → 变成一个组件集。
-
在右侧面板给变体属性命名：
State: Default/Hover/Pressed/DisabledType: Primary/Secondary/GhostSize: S/M/L
-
再加「组件属性」（Component Properties）：
- 文本：改按钮文字
- 布尔：显示/隐藏图标
- 实例交换：换不同图标
这样，一个组件 = 几十种样式，不用重复建组件。
3）全用 Auto Layout + 变量，彻底自适应
- 所有组件外层加 Auto Layout （
Shift+A），设好间距、内边距，内容变宽自动撑开。 - 颜色、间距、圆角、字号全部用 Variables （变量）：
- 颜色：
color/primary、color/text - 间距：
space/sm、space/md - 圆角：
radius/sm、radius/lg
好处：一键换肤、全局统一，开发直接映射 CSS 变量。
- 颜色：
4）命名+整理，让团队找得到
- 组件名：
Button、Input、Card、Nav - 变体名：
Button/Primary/M、Input/Text/Error - 图层名：
Container、Label、Icon - 私有组件（不想发布的）：名字前加
_或.，发布时自动隐藏。
5）发布到团队库（Team Library）
- 专门建一个「Design System」文件，所有组件都放这里。
- 点左侧 Assets（书本图标）→ Publish。
- 选要发布的组件和样式 → 写版本说明 → Publish to Team。
二、日常怎么用组件库（直接提效）
1）启用库，拖入即用
在你的业务文件里：
- 打开 Assets → Team Library → 勾选刚发布的库。
- 搜索组件名（如 Button）→ 直接拖到画布。
2）改变体，快速切换状态
选中组件实例 → 右侧面板直接切换：
State: HoverType: SecondarySize: L
不用重新画，1 秒切样式。
3）改属性，灵活定制
- 改文字：直接双击改，或在属性面板改。
- 显示/隐藏图标：布尔属性一键切换。
- 换图标：实例交换属性，直接选新图标组件。
不破坏主组件，又能个性化。
4）覆盖样式（Override）的正确用法
实例上可以改：颜色、文字、尺寸、间距，但不要改图层结构 （删层、改嵌套会断关联）。
改多了想恢复：右键 → Reset Overrides。
三、高级技巧：效率再翻倍
1）组件嵌套（Nesting）
把小组件放进大组件：
- 按钮里放图标组件
- 卡片里放头像+标题+按钮组件
改内层组件，外层自动更新，维护成本极低。
2）组件替换（Swap Instance）
选中组件 → 右键 → Swap Instance → 换同类型组件（如把按钮换成文字链接）。
布局不变，快速换风格。
3）批量更新所有组件
主库改完 → 重新发布 → 所有业务文件会收到更新提示 → Update All ，一键同步所有页面。
再也不用「改完一处，手动改 100 页」。
4）组件文档（Doc 页面）
在组件库文件里加一页「99_Docs」：
- 每个组件：用途、用法、变体说明、示例
- 截图+文字，新人直接看文档就会用，减少沟通。
四、团队维护：不乱、不崩、好协作
1）专人维护，版本化
- 1--2 人负责主库，其他人只读。
- 更新频率：固定周期（如每天/每周），避免频繁推送打扰。
- 版本号：
v1.0（基础）、v1.1（新增组件）、v2.0（大重构）。
2）避免「组件地狱」
- 不建太多细小组件，能用变体就不拆新组件。
- 不滥用嵌套，最多 3 层，否则难维护。
- 不用组件的地方（一次性元素），直接画，别硬套组件。
3）定期清理
- 删除不用的组件
- 合并重复组件
- 更新旧变体
保持库清爽，找组件快、加载快。
figma汉化版下载及安装教程：https://blog.csdn.net/2501_93482674/article/details/161545825?spm=1011.2415.3001.10575&sharefrom=mp_manage_link