Sketch 47版本更新了Libraries功能，这意味着，Sketch组件库在团队中同步运用将变得十分便捷。让我们为此欢呼~
Libraries提供了多文件同步功能，而组件嵌套提高了每一个组件本身的复用性。
可能大家会有疑惑，那后者功能上线已经有一段时间了，网上教程也有一些，为什么还选择它作为主题呢？
不知道大家在使用嵌套组件，或者创建嵌套组件时有没有过这样的疑惑：
△ 双击组件后，为何不能在当前页面编辑，而是进入了Symbol页面？
△ Symbol页面里的组件为何就没有overrides选项？
△ 为何Symbol页面的组件各自独占一个画板？
这些都是我最初接触到组件嵌套这个功能时，疑惑的几个问题。
因为功能本身的复杂性，导致它的理解曲线较为陡峭。本文不是组件嵌套功能的操作教程贴，而是尝试通过故事的方法，分享一下作者研究和实验后，终于弄明白的其组织方式和作用原理，从而帮助大家在各种使用场景下，对这个强大的功能运用自如。
以下是解开我疑问的关键——Sketch官方操作说明：
To create a nested Symbol, place an instance layer inside any other Symbol’s master Artboard. Any updates you make to the Symbol’s master will see the changes propagate throughout your design no matter if they’re inside another Symbol or not. As well as placing an instance into a master, and inserting via the toolbar item, you can also select multiple instances of different Symbols and pressCreate Symbolin the toolbar.
要创建嵌套元件，只需拖拽一个已存在的实例到另一个主元件中即可。任何主元件的更新都会及时生效，作用于整个文档，不管它是否在某一元件内部。同样，拖拽一个已有的实例到一个主元件中，然后通过工具栏插入它们，你也可选择多个不同元件中的实例，然后点击工具栏上的创建元件（Create Symbol）来创建新元件。（中文翻译来自http://sketch.im/）
官网文档表明了，组件有两种状态：实例（instance）、主元件（master）。
嵌套组件是指，把一个组件的实例拖拽到另一个组件的主元件中；
可是实例是什么？这个词看起来好陌生啊！
让我们回到官网对于Symbol的解释：
A Symbol is made up of two parts: a “master”, which takes the appearance of an Artboard—and an “instance”, which is a flattened representation of the master.
As you create a Symbol, you can automatically send the Symbol Artboard, or master to a separate page. When you make a change to a Symbol’s master, the changes are applied to all Artboards and Pages in your document. In addition, each instance of a Symbol can be customized with overrides.
A Symbol instance is a single layer that mirrors the content from its master. In the Layer List it is displayed with a purple icon with syncing arrows.
表示组件实例（instance）的符号
A common example of a Symbol is an element that is re-used throughout your design such as buttons, or a cell in a table view.
Not only that, Symbol instances can be individually resized, and you can applyresizing constraintsto layers inside the Symbol to determine how they should behave when resizing.
总结一下这两种状态的特征：
△ 主元件（master）始终以画板的形式存在；
△ 实例（instance）是主元件的复制品，它是当前画板中的一个元件；可以通过重写（overrides）编辑其细节，可以放大缩小；
下面我利用Pablo Stanley制作的一个sketch文件 （大家也可以下载下来玩一玩，并给Pablo一个赞），写一个小故事，来解释一下它俩的定义和复杂关系~
因此，组件实例是位于文档中的克隆品，为适应不同页面、场景的需求可以变更名称、大小和细节；组件主元件则集中在Symbols页面，决定了所有组件实例的内容和结构，以画板形式呈现，同一画板大小的组件在嵌套时会被自动归类。
组件嵌套有两种方式：
△ 创建组件时，就把可复写的内容也制作成子组件，包含在其中；
△ 编辑主元件时，插入/拖拽子组件的实例到主元件中；
组件嵌套的几个关键点：
△ 可利用复写功能进行相互切换的同一类组件，主元件画板大小要相同；
△ 需要经常变换组件实例的大小时，应在主元件中设置好Resizing限制；
△ 组件命名利用“/”进行好分类和分级；
最后，在研究和使用组件嵌套功能的过程中，不由得感慨：每一个突破性的产品功能背后，都是整个团队周密的考量。
网友评论