组件(symbol)与实例

组件

组件是可以在你的设计中重复使用的元素。它们可以帮助你跨项目创建和管理一致的设计。

您可以创建主组件并定义组件的属性。然后您可以创建主组件的实例。更新主组件时,该组件的所有实例也将更新。

修改组件

当你修改组件后,支持自动修改实例内容。同时也支持当实例调整属性后,组件修改,实例不再同步。也就是如果你实例选择脱离symbol组件后,那么当修改组件后此实例不会同步修改。

目前支持13类属性同步调整(锁定、文本样式、单独圆角、透明度、统一圆角、图层效果、文本内容、名称、大小、填充、描边、阴影、模糊)。

此功能可以很大程度解决设计师单独修改每个实例的痛点,提高设计稿修改设计图效率。

脱离组件 

在编辑过程中,如果需要将某个实例取消组件的同步编辑效果,可以使用脱离组件功能。三种方法:

1.选中组件,在右侧属性面板中脱离symbol组件;

0016061751a8d0b26ba8d3546c715cb

2.或者选中组件,右键选择「脱离symbol组件」;

0016061756bb4fb63b741429eddc3b6

3.直接使用快捷键ctrl+alt+B进行脱离。

删除/复原组件

目前有三种方式可以删除组件,画布内、元素列表、组件列表。

可以使用右键或快捷键两种方式进行删除。

并且支持撤销删除,或者你也可以选择通过实例复原组件。

001606175d36a736e7201fbb2be831b

定位组件

可以通过实例查找组件,同时支持定位到组件后,再返回到实例位置。

目前有三种方式可以定位到组件(左侧列表右键、选中实例右键,属性面板)

001606175ffc7b79944f9eaadd352bc

001606176056f9120fb586146f4c237

实例

实例是组件的精确副本,它具有与原始属性相同的所有属性,包括任何文本格式,样式或布局约束。

实例本质上是链接到主组件的,当组件本身被修改时,所有复用内容都会自动同步更改。

目前支持3大类图层(组件、实例、其他组件、3种组合-包含组件、包含实例、包含组件和实例)创建实例。

支持2类方式快速创建(Symbol组件列表-拖拽、复制Symbol组件)。

symbol组件拖拽:

需要先选择组件后,按住alt键/⌥(option),然后在画布内拖拽组件就可以创建一个新的实例。

复制symbol组件:

选择组件后,鼠标右键复制/粘贴到画板,或者使用快捷键进行操作即可创建一个新的实例。

Mac:⌘ c 和 ⌘ v

Windows:ctrl c 和 ctrl v

替换实例

设计中经常需要考虑到设计多样化的情况,经常会遇到需要将部分组件替换成另一个状态或实例的需求,那么你可以通过替换实例的功能来完成此需求。

有两种方法可以替换实例:

1、组件列表替换:

在左侧组件列表选中组件后,使用alt/option键并点击拖拽到实例进行替换。

2、属性面板替换:

在画布内选中组件后,在右侧属性面板中替换。