Sketch 47版本更新了Libraries功能将饺，這意味著，Sketch組件庫在團(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ì)周密的考量骂蓖。
