组件
组件是可复用的设计元素:修改主组件,所有实例同步更新;在实例上覆盖内容与属性,既统一又灵活。
主组件与实例
选中任意图层或编组后按 Ctrl/⌘+K 即可创建组件。原始对象成为主组件(Main component),你复制出来的每一份都是实例(Instance)。修改主组件的结构、样式与布局,所有实例会同步更新;而实例自身的文本、图片等内容可以单独覆盖,互不影响。
典型工作流
- 先画好一个元素,如默认状态的按钮
- 选中后按 Ctrl/⌘+K 转为组件,并规范命名(如 button/primary)
- 把组件实例拖入页面与画板反复使用
- 需要调整样式时回到主组件修改,实例自动跟随
- 在实例上替换文案、图标等内容,不影响其他实例
- 不再需要同步关系时,按 Ctrl/⌘+Shift+K 脱离组件
可以在实例上覆盖的内容
- 文本图层中的文字
- 图片、图标等填充内容
- 子元素的颜色、字号等样式属性
- 显隐与尺寸(配合弹性布局可做出增删元素的实例)
- 嵌套组件实例(在一个组件内替换另一个组件)
组件与共享库
默认情况下组件保存在当前文件的文件库中。把文件发布为团队共享库后,其他文件可以在资源面板中引用这些组件。组件更新时,引用方会收到同步提示,确认后完成升级——这正是设计系统跨文件分发的基础。
命名建议
命名建议
使用「类别/名称/状态」的斜杠命名(如 button/primary/hover、input/text/default),图层面板会自动按层级分组显示,组件数量变多后依然井井有条。
实用提示
- 组件内善用弹性布局,实例替换长短文案时按钮与卡片会自动适应。
- 一组相关组件(按钮的各种状态)更适合做成「变体」,而不是多个独立组件。