Sketch 47版本更新了Libraries功能，這意味著，Sketch組件庫(kù)在團(tuán)隊(duì)中同步運(yùn)用將變得十分便捷。讓我們?yōu)榇藲g呼~
Libraries提供了多文件同步功能，而組件嵌套提高了每一個(gè)組件本身的復(fù)用性。
可能大家會(huì)有疑惑，那后者功能上線已經(jīng)有一段時(shí)間了，網(wǎng)上教程也有一些，為什么還選擇它作為主題呢？
不知道大家在使用嵌套組件，或者創(chuàng)建嵌套組件時(shí)有沒有過這樣的疑惑：
△ 雙擊組件后，為何不能在當(dāng)前頁面編輯，而是進(jìn)入了Symbol頁面？
△ Symbol頁面里的組件為何就沒有overrides選項(xiàng)？
△ 為何Symbol頁面的組件各自獨(dú)占一個(gè)畫板？
這些都是我最初接觸到組件嵌套這個(gè)功能時(shí)，疑惑的幾個(gè)問題。
因?yàn)楣δ鼙旧淼膹?fù)雜性，導(dǎo)致它的理解曲線較為陡峭。本文不是組件嵌套功能的操作教程貼，而是嘗試通過故事的方法，分享一下作者研究和實(shí)驗(yàn)后，終于弄明白的其組織方式和作用原理，從而幫助大家在各種使用場(chǎng)景下，對(duì)這個(gè)強(qiáng)大的功能運(yùn)用自如。
以下是解開我疑問的關(guān)鍵——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.
要?jiǎng)?chuàng)建嵌套元件，只需拖拽一個(gè)已存在的實(shí)例到另一個(gè)主元件中即可。任何主元件的更新都會(huì)及時(shí)生效，作用于整個(gè)文檔，不管它是否在某一元件內(nèi)部。同樣，拖拽一個(gè)已有的實(shí)例到一個(gè)主元件中，然后通過工具欄插入它們，你也可選擇多個(gè)不同元件中的實(shí)例，然后點(diǎn)擊工具欄上的創(chuàng)建元件（Create Symbol）來創(chuàng)建新元件。（中文翻譯來自http://sketch.im/）
官網(wǎng)文檔表明了，組件有兩種狀態(tài)：實(shí)例（instance）、主元件（master）。
嵌套組件是指，把一個(gè)組件的實(shí)例拖拽到另一個(gè)組件的主元件中；
可是實(shí)例是什么？這個(gè)詞看起來好陌生??！
讓我們回到官網(wǎng)對(duì)于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.
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.
總結(jié)一下這兩種狀態(tài)的特征：
△ 主元件（master）始終以畫板的形式存在；
△ 實(shí)例（instance）是主元件的復(fù)制品，它是當(dāng)前畫板中的一個(gè)元件；可以通過重寫（overrides）編輯其細(xì)節(jié)，可以放大縮小；
下面我利用Pablo Stanley制作的一個(gè)sketch文件 （大家也可以下載下來玩一玩，并給Pablo一個(gè)贊），寫一個(gè)小故事，來解釋一下它倆的定義和復(fù)雜關(guān)系~
因此，組件實(shí)例是位于文檔中的克隆品，為適應(yīng)不同頁面、場(chǎng)景的需求可以變更名稱、大小和細(xì)節(jié)；組件主元件則集中在Symbols頁面，決定了所有組件實(shí)例的內(nèi)容和結(jié)構(gòu)，以畫板形式呈現(xiàn)，同一畫板大小的組件在嵌套時(shí)會(huì)被自動(dòng)歸類。
組件嵌套有兩種方式：
△ 創(chuàng)建組件時(shí)，就把可復(fù)寫的內(nèi)容也制作成子組件，包含在其中；
△ 編輯主元件時(shí)，插入/拖拽子組件的實(shí)例到主元件中；
組件嵌套的幾個(gè)關(guān)鍵點(diǎn)：
△ 可利用復(fù)寫功能進(jìn)行相互切換的同一類組件，主元件畫板大小要相同；
△ 需要經(jīng)常變換組件實(shí)例的大小時(shí)，應(yīng)在主元件中設(shè)置好Resizing限制；
△ 組件命名利用“/”進(jìn)行好分類和分級(jí)；
最后，在研究和使用組件嵌套功能的過程中，不由得感慨：每一個(gè)突破性的產(chǎn)品功能背后，都是整個(gè)團(tuán)隊(duì)周密的考量。
