http://v.youku.com/v_show/id_XMzk0NTU4MTU3Mg==.html

當(dāng)年在Sketch里用過symbol馬上就回不去了，實(shí)用貼心到流淚。那都8102年了，有沒有可能更智能呢？

篇幅較長，可以先下載附件體驗(yàn)，秒懂的話不需要聽我啰嗦～

分享個小工具，有點(diǎn)懷疑有沒有必要寫這個，所以拖拖拉拉很久，碰巧這工具有了重大的更新，終于還是寫出來了，純粹自己瞎鼓搗。如果你有更好的方法或方向，歡迎指正。如果對你有幫助，寫文不容易支持一下吧。

下面視頻是演示接下來能get到的技能，插件我會放在附件里，安裝一次以后直接在sketch更新就好。我把做好的組件放在源文件里供大家參考，接受能力較強(qiáng)的甚至可以忽略文章看源文件就好了。

如果出現(xiàn)布局錯誤請重啟一遍Sketch。

軟件：Sketch 5.25

插件：Anima Toolkit 2.4.9

不論是個人還是團(tuán)隊，在界面設(shè)計中，總會提煉組件，包括圖標(biāo)、按鈕、控件等。一套完整的軟件界面，頁面中很多組件是高度復(fù)用的。所以組件在設(shè)計側(cè)意義不僅是提高效率，也能很好的規(guī)范了界面的一致性。還有上線后也存在迭代過程中的修改，如果不是Sketch的symbol系統(tǒng)，設(shè)計的修改怕是要比開發(fā)都辛苦不少，重復(fù)勞動·真搬磚。

在搭建組件庫的過程中，找到了好玩的東西，很大的提升Sketch組件可用性。完全用Symbol的設(shè)置項實(shí)現(xiàn)動態(tài)響應(yīng)布局，同時支持拉伸被動響應(yīng)，支持多層嵌套，大多數(shù)的組件都可以制作~

并非全部都能做成動態(tài)symbol，還是有很多技術(shù)限制的，不過已經(jīng)完成度很高了。

教程相對進(jìn)階，但有必要的地方盡量詳細(xì)。沒必要的地方，比如標(biāo)注可能是不完整的~

什么是動態(tài)響應(yīng)，不是很嚴(yán)謹(jǐn)?shù)母拍?，但為了簡化暫且用這個詞。一般來說，移動端的UI設(shè)計都是自適應(yīng)的，因?yàn)橐ミm配各種機(jī)型。當(dāng)然Sketch在迭代過程中也為我們準(zhǔn)備了這個功能，也就是Resizing，但這種響應(yīng)是被動的?？疵志兔靼?，Resizing是拉伸后仍適應(yīng)指定的布局規(guī)則，是被動的。

這個功能其實(shí)足以讓人興奮，做的UI居然能隨著拉伸適應(yīng)布局，在PS時代想都不敢想。

那動態(tài)響應(yīng)呢？是隨著元素內(nèi)容改變，主動調(diào)整響應(yīng)布局。所謂的動態(tài)響應(yīng)幾乎都是針對文本的，文字字?jǐn)?shù)變化對布局的影響，當(dāng)然也不全是。其實(shí)這個功能Sketch本身也有，舉下面這個例子就明白了。如果你沒發(fā)現(xiàn)，可以馬上試試，但是效果僅限如此。

新建一個文字畫兩個矩形(文本不能使固定寬度)，矩形分別作為圖標(biāo)和背景，背景要比文字和圖標(biāo)加起來都寬，像下面這個圖一樣。全選生成symbol，神奇的事要來了，在symbol設(shè)置項里，修改文本，你會看到圖標(biāo)位置也變了，兩者間距保持不變。

這種平鋪的布局，多排些東西，或者把圖標(biāo)換成文字，效果都是有的。甚至右對齊也可以，這種效果只有在symbol里才能看到?？墒牵皇撬胁季侄歼@么簡單，不過這個功能也常被用到。

自適應(yīng)的動態(tài)組件需要動態(tài)(主動)和被動響應(yīng)都是需要的。

在建立組件庫的過程中只有被動響應(yīng)，馬上會發(fā)現(xiàn)局限性，舉個例子，這也是組件首先碰到的問題——“隨文字撐大的標(biāo)簽”。不同于可以設(shè)定幾個寬度的按鈕，Tag往往只能隨字?jǐn)?shù)變化寬度。

我們把做好的tag放到symbol里試試，不管怎樣，你都不會得到你想要的。

動態(tài)按鈕？這個時候老司機(jī)會告訴你一個神器，Paddy！！這個插件能解決這個問題，也是很多設(shè)計師熱捧的插件。

所以我也要安利這個插件了？不不不，如果不用嵌套Symbol，Paddy確實(shí)能做很多事，但組件需要嵌套symbol。嵌套后，Paddy的很多功能將失效。而且Paddy的可視化不夠，即使是beta版也是。

Beta版Paddy會升級symbol的功能，支持嵌套，但和接下來的插件有致命沖突，不可混用。

所以Paddy可以直接放棄，接下來的神器包含Paddy所有功能，并且更強(qiáng)大。即使你非要等paddy升級完善，思路也是一致的，不防了解下。

話說搭建組件后，大家是怎么用的呢。很多時候是直接修改里面Symbol（Library是先解除鏈接修改）。為什么？因?yàn)槟承┎季植粫S內(nèi)容變化，導(dǎo)致不可用，必須手動修改。當(dāng)然，在做組件的時候可以避免這個問題，繞開動態(tài)布局。但我希望工具能盡可能的還原設(shè)計，減少被工具約束，減少為了做組件而刻意繞開的布局。

介紹下今天要聊的插件——Anima Toolkit。

看名字就是知道這是一套工具包，包含Auto-Layout、Launchpad和Timeline，后面兩個是建站和交互動畫的工具，不在今天討論的范疇。

主角是Auto-Layout，自動布局。誒~ 這個很眼熟哦，早在sketch還沒有Resizing的功能時，這個插件出現(xiàn)了，當(dāng)時蠻有名氣，但sketch自帶了這個功能后，就被遺忘了。不安裝插件就有的功能，干嘛要安裝插件呢。

廢話了這么多，來認(rèn)識一下Anima Auto-Layout，以下簡稱AL。先介紹功能，然后演示實(shí)際案例。

其實(shí)收起狀態(tài)已經(jīng)露出了大部分的功能，所以真的很簡單，當(dāng)然一般是在展開使用的。

功能1：Pin 定位銷

就是固定間距的功能，讓邊鎖定在一個位置。也是Sketch Resizing的主要功能，AL或許更方便，但效果其實(shí)差別不大，區(qū)別在于AL更偏主動響應(yīng)，Resizing更適合被動自適應(yīng)。有些時候還是要用Resizing的，互補(bǔ)，如果可以優(yōu)先用Resizing。

百分比感覺很牛逼是不是，其實(shí)自帶的resizing也支持百分比，默認(rèn)狀態(tài)下也就是不設(shè)置pin的時候。內(nèi)部元素拉伸是按照比例來的，只不過不止間距，寬高也按比例拉伸了。

定位功能基于父級容器的，簡單的說就是上一級的組或Symbol，邊界和百分比的基數(shù)也是。當(dāng)指定了數(shù)值后，布局會自動發(fā)生變化。之后也可以移動，數(shù)值也會自動實(shí)時發(fā)生變化（這和Resizing一樣）。需要時可以設(shè)置為百分比，記得切換。

注：Sketch的默認(rèn)情況下子層的寬高是固定比例的，所以會隨著父級拉伸而被拉伸。要定位元素需要先鎖定寬高。

功能2：寬高設(shè)置

沒錯，這個功能Resizing也有，就是固定寬高。AL可以額外設(shè)置最大、最小值。和Resizing的不一樣的是，這個的寬高鎖定是絕對的。

剛才提到過，自帶的resizing默認(rèn)狀態(tài)下寬高就是固定比例的，只不過沒有數(shù)值而已

百分比也是以父級為參照的。最大值和最小值，在不打開啟用開關(guān)時也生效，只能是像素值。

在symbol中，AL的寬高固定是絕對的，這有好有壞。不過這導(dǎo)致有時候必須用Resizing的寬高設(shè)置，需要靈活選擇。

功能3：居中

這個功能就只是對單個層的在組內(nèi)的居中操作，不是對齊功能。還可以設(shè)置偏移值。

是的，居中也是已父級為參照空間的。偏移值正值向右偏移，負(fù)值向左，只能是像素值。

一鍵清空

上面提到的三個功能可以通過這個按鍵，對圖層所有設(shè)置一鍵刪除。

功能4：對齊工具Stack

這個怎么翻譯呢，直譯叫堆棧，還是用英文名吧。是一種特殊的圖層組，主要是子層元素布局操控，也就是對齊方式。除了對齊，對子層還有特殊效果。

講下塌陷Collapsing功能，這個功能一般時候開不開都一樣。它是針對嵌套的symbol用的，當(dāng)symbol里的中間條目選擇隱藏時，啟用塌陷可以讓子層重新排列。

還有一個配套resize symbol的功能，很實(shí)用。只有一種情況，這個開關(guān)會出現(xiàn)，就是symbol畫板中只有一個stack組時。這個功能是讓symbol自動匹配stack組的尺寸的。

resize symbol可能是個新的功能，有個很大的缺陷，就是一旦勾選了Resize Symbol，這個Symbol的子層就不具備被動響應(yīng)能力了，也就是寬高被固定了。用之前要清楚這個問題，某些時候不得不放棄使用，很多時候是默認(rèn)勾上的。只能說等待官方修復(fù)這個問題，anima的更新頻率還是很高的。

stack組的子層會有個附帶效果，比例鎖定會在子層生效（包括組合symbol）。

功能5：自動填充padding

這個功能更新也就近幾個月的事，修復(fù)到可用實(shí)在2.4.2版本上，也就11月，新鮮出爐。為了解決無法和Paddy兼容，AL自己做了這個功能。當(dāng)然，支持嵌套symbol。

沒有這個功能時，做填充也是可以的，但是比較麻煩，效果也有局限。

說白了，這個功能就是操控組內(nèi)最底子層形狀的寬高，從而組的寬高也發(fā)生變化。

padding的嵌套目前也是有局限性的，相比而言完成度是最高的，具體在后面實(shí)例中說。

實(shí)用工具

剩下一些智能排列畫板、橫豎屏切換和適配到機(jī)型，不多說了，我用的不多，自行體驗(yàn)。除了排列畫板，其余就是幫你一鍵把設(shè)計稿切換到另一個機(jī)型或橫豎屏，不需要一個個手動拉扯。

動態(tài)組件：Tag

標(biāo)簽Tag，很常見，用paddy可以輕松做出來，但是如何用AL實(shí)現(xiàn)可嵌套的Symbol呢，其實(shí)是一樣的。

1. 新建文字層（使用默認(rèn)左對齊），直接添加padding，如圖設(shè)置，賦予隨字?jǐn)?shù)調(diào)整寬度能力。padding會自動創(chuàng)建一個背景，修改文字和背景樣式，命名#tag grounp。

2. 將背景層生成symbol，隨意調(diào)整背景symbol畫板尺寸，背景撐滿畫板即可。復(fù)制五個，分別調(diào)色，命名。

3. 將#tag grounp生成symbol，完成

可以在symbol設(shè)置里修改文字和tag顏色。需要注意的是，tag會有左對齊和右對齊的情況，默認(rèn)狀態(tài)下，tag會向右伸展，利用AL的pin功能可以讓一個symbol同時滿足左右對齊(利用文本對齊是行不通的）。如需左對齊的布局，選擇固定右邊的pin。（這里自帶的Resizing的pin不能實(shí)現(xiàn)對齊效果）

如果要做多個排列的tag，可以排列幾個，打包成stack組，間距就鎖定了，整體布局隨每個tag的字?jǐn)?shù)動態(tài)調(diào)整。

需要說一個注意的，padding是支持嵌套的，但是嵌套的padding symbol不能參與動態(tài)布局，嵌套里的padding symbol 尺寸不會發(fā)生變化，所以動態(tài)布局會失效。這個問題等待官方修復(fù)，參與動態(tài)布局的padding暫時不要打包成symbol，保持組形式參與布局。

如果文字變透明，就可以制作利用文字調(diào)節(jié)進(jìn)度的symbol控件，活學(xué)活用。

動態(tài)組件：Tabbar

標(biāo)簽欄是App中最常見的了，樣式類型比較多，并非所有都需要動態(tài)響應(yīng)。

看下這幾類tab，類型2是MD的樣式，用的很多，Rezizing就可以完成。演示類型3的做法，其他也都做好放在源文件里了。

說下類型四，如果這種組件也能做成動態(tài)symbol，那么….沒什么控件是不能做的了，涉及太多變量計算，短時間內(nèi)也不太可能實(shí)現(xiàn)，乖乖使用普通圖層吧，攤手~

新建兩個文本和一個方形，分別作為選中、未選中的文字和選中的短線，調(diào)整樣式。文字務(wù)必左對齊，做動態(tài)組件都可以用左對齊，不然可能會有誤差。

2. 將短線生成symbol，寬度縮小到比文字短。將文字疊在一起（可配置選中和未選中文字），放在短線上方。所有垂直居中對齊一次，然后打組，命名#tab。（后面要利用組讓短線和文字等寬，如果短線本身比文字寬或超出文字，組的寬度就不是文字的寬度了）

3. 短線進(jìn)行如圖的AL pin設(shè)置，會自動與文字等寬（這里是主動響應(yīng)只能用AL，而不是Resizing）。這個設(shè)置等寬是動態(tài)的，會隨著文字寬度變化而變化。（有需要的話，比文字寬或短都可以做到，寬會麻煩一些，比如比文字寬兩像素，可以私我）

4. 將#tab水平復(fù)制幾個，全選建立stack組，設(shè)置如下，命名#tab stack。這里鎖定每個tab之間的間距關(guān)系。（tab欄目數(shù)不可配置，比如3欄和4欄只能做兩個symbol）

5. 繪制tabbar背景，與#tab stack打組，命名#tabbar。然后對#tab stack進(jìn)行AL的居中設(shè)置，動態(tài)鎖定tab區(qū)居中，同時設(shè)定自適應(yīng)規(guī)則，保持寬高固定。#tabbar生成symbol。

這樣就做好了，配置一下試試，同時可以拉伸適配響應(yīng)，需要注意的是，兩層文字，需要的寫，不需要敲一個空格隱藏。不需要的短線選none。

動態(tài)組件：Bottom Tab

底部標(biāo)簽欄，其實(shí)和標(biāo)簽欄一樣，不過比較典型。這里設(shè)定需要響應(yīng)到pad，這里只是演示功能，實(shí)際工作中pad字號可能會比phone大一些。

把所有用到的tab 圖標(biāo)都做成symbol（這里一共有5組10個），然后按標(biāo)注樣式布局搭好，這個不多說。打組命名#group，然后對圖標(biāo)和文字設(shè)置Resizing，固定文字圖標(biāo)高寬，賦予被動響應(yīng)能力。

2. 文字都復(fù)制一層（直接command+D），作為選中未選中的文字，分別填充顏色。

3.復(fù)制一層背景（command+D），把樣式都取消，命名#box。將#box和文字圖標(biāo)打組，命名#flex。對做響應(yīng)設(shè)置如下，然后#group生成symbol。

大功告成，高度加34就適配iPhone X了。

動態(tài)組件：Action Sheet

Action Sheet，也很常見。其實(shí)不用anima也完全可以做到，但是必須按順序隱藏操作。這里允許抽掉中間的條目也保持布局。高度也可以動態(tài)調(diào)整，前提是如果多機(jī)型適配的需求低，可以勾選resize symbol。

1. 繪制需要用到的圖層，分割線、文字、背景和間隔塊，把分割線和間隔塊做symbol。

2. 把單個列表拼出來并打組，也生成symbol。#list

3. 把#list和間隔塊垂直排好，所有元素設(shè)置resizing，鎖定高度，寬度自適應(yīng)。打stack組，設(shè)置如圖，然后生成symbol。

4. 在symbol里，可以看到多了一個resize symbol，目前建議取消。勾上的話，symbol會動態(tài)變化，但是list寬高也鎖定了，不能做多機(jī)型適配了。

動態(tài)組件：Edit menu

文本選擇控件，相對來說比較復(fù)雜的控件，雖然看起來很簡單。除了在數(shù)量和字?jǐn)?shù)不定的情況下完成規(guī)定布局外，箭頭的位置也是可以調(diào)節(jié)的。

1. 新建三個文字、一個箭頭和一個圓角矩形

2. 選擇一個文字，設(shè)置如下padding（padding會自動生成背景形狀），將該padding組生成symbol，命名#control。注：給單個操作按鈕賦予動態(tài)間距填充。

3. 排列若干個“#control”水平復(fù)制，全選建立stack組，命名#control stack。注：給所有操作按鈕之間賦予動態(tài)間距排列。

4. 選擇兩個文字層，行高設(shè)置成和箭頭高度一致(10pt)，和箭頭水平擺放一起，全選建立stack組，命名#arrow stack。這里是個小技巧，兩個文字可以動態(tài)調(diào)整箭頭層的寬度，加上布局鎖定，就可以調(diào)整箭頭位置了。

5. 將#control padding和黑色背景，上下貼上排列，建立組。然后生成symbol (這個symbol可切圖給開發(fā))。在symbol中進(jìn)行如下設(shè)置。左右文字透明處理，它們調(diào)節(jié)箭頭位置的，命名為“箭頭右/左調(diào)節(jié)”。#Bubble bg

6.將#Bubble bg放在#control stack組下面，選擇兩者，建立組。然后設(shè)置padding，參數(shù)如下。（為了觀察，我把control的背景變半透明），生成symbol。#Bubble

7. 其實(shí)已經(jīng)做完了，差點(diǎn)樣式調(diào)整。#control組的背景設(shè)置內(nèi)陰影作為分割線，生成symbol（因?yàn)樽詈笠粋€分割線是多余的，做成symbol就可以隱藏），其余參照標(biāo)注。

完成，可以配置每個操作的文字，操作數(shù)量和箭頭位置。

注：這里用padding包裹里stack，可能會導(dǎo)致出錯，發(fā)現(xiàn)布局有問題，重啟Sketch就會好，這種包裹目前來講不是很穩(wěn)定，盡量少使用。

氣泡提示應(yīng)該也會做吧，會更簡單。不一樣的是做氣泡的時候要留好四邊間距，已經(jīng)做好放在源文件里了。

動態(tài)組件：Dialog

這種常規(guī)的自定義彈窗做一個symbol其實(shí)大部分情況夠用，當(dāng)然用原生的更多，但iOS的library也不是動態(tài)的，有時候你得拆出來用。彈窗不需要拉伸，這里唯一做的動態(tài)響應(yīng)，就是單行和多行文字的動態(tài)變化。

1. 把底部按鈕做好，生成symbol（生成symbol有個好處可以切換按鈕形式，比如單個按鈕）。很簡單吧，字號什么的隨意，重點(diǎn)不是這個。

2.新建文字，調(diào)整樣式（這里文字是固定寬度的），設(shè)置padding。然后修改背景樣式。

3. 和按鈕一起打stack組，設(shè)置如下，生成symbol。resize symbol應(yīng)該是自動勾上了，這里可以勾選，需要這個功能。

ok，多行文本高度會動態(tài)調(diào)整，因?yàn)閺棿皩挾仁枪潭ǖ?，所以resize symbol的副作用也不用擔(dān)心

動態(tài)組件：卡片

其實(shí)只要包在stack組里，比例就是可以被鎖定的。要講的就是這個，所以詳細(xì)的步驟不在這里說了，直接看源文件把。

需要說明的幾點(diǎn)

stack或padding的嵌套是新功能，還在實(shí)驗(yàn)性階段，存在一些問題的，但可用也還夠用。至于bug甚至導(dǎo)致sketch崩潰問題，至少在我個人使用下，目前版本還算穩(wěn)定。以前stack和padding混合100%會導(dǎo)致軟件崩潰，現(xiàn)在已經(jīng)不會了。anima一直在更新，可以關(guān)注下。

目前容易出錯的使用方式 1）帶collapsing的stack組結(jié)合pin定位 2）Padding包裹Stack組。之能說減少使用，如果出現(xiàn)問題，重啟Sketch，頻繁出現(xiàn)問題，改掉上面的使用方式。

動態(tài)響應(yīng)symbol里的文字，只要參與動態(tài)布局，最好都是左對齊，居中對齊當(dāng)寬度是單數(shù)時，會有0.5的值，這會導(dǎo)致布局不準(zhǔn)確。

AL很多時候需要自帶resizing配合的，如果相同效果也建議用resizing實(shí)現(xiàn)，畢竟自帶的性能和優(yōu)先級比較高。一般來講被動的適配響應(yīng)都可以用resizing來做，AL更多負(fù)責(zé)動態(tài)響應(yīng)。

這篇文章的操作可能會隨著插件和sketch的迭代過時，但思路是一樣的，如果有需要我會更新。

也許有的同學(xué)覺得很沒用。我這里只是為設(shè)計提供更多可能性探索，作為設(shè)計師的一些努力。如果有更好更合適的思路，歡迎指正。

最后有個最大的問題，看過源文件的人立刻會發(fā)現(xiàn)，symbol的設(shè)置項太復(fù)雜難找了，非常不友好（特別是sketch52后能在symbol設(shè)置項里選擇文本和圖形樣式，而又不做分類），可用性大打折扣，基于這個問題原則上是不建議做復(fù)雜symbol的，這點(diǎn)我表示無奈。如果有開發(fā)大佬看到，開發(fā)一個可視化更人性的symbol設(shè)置的插件，那就太好了。