2020-1-2 濤濤
首先來解釋一下什么是動態布局：
所謂動態布局就是可以通過修改內容實現關聯內容自動改變的布局方式。
在 sketch 45 之后的版本，我們可以通過 resizing 對元素的上下左右邊距進行固定，來實現頁面布局的動態響應。這種響應是被動的，需要我們拖拽著它，它才能給出反饋。雖然不是多么的聰明，但是這種被動的方式解放了很大一部分生產力，足以讓你鄙視一下 Photoshop 的 UI 設計了。
有了被動響應，自然也想要有主動響應，通過改變元素內容去改變布局。之前在 sketch 里面一直有一個功能：文字尾部跟隨（間距在 20px 以內，后面可跟文字或圖標）。如圖：
功能雖單一，但在工作效率上帶來了極大的提升。當然我們想要的更多
比如：
一個標簽，我希望可以跟隨文字長度而自動適應。
△ 不是這樣
△ 而是這樣
在 Sketch 58 之前，我們可以通過 kitchen 或者 Anima 等外部插件實現這類效果。但是這類插件在創建為組件以后會出現一些莫名的抽搐，可用性不高。在 Sketch 58 之后 Sketch 自身就攜帶了這些技能，可以實現一些動態布局，不過目前來看它還是存在一定的局限性，它的動態布局是基于 symbol 的。但我們不會為了布局而刻意去做 symbol，這會加重組件庫的維護負擔，在整體的收益率及效率上不見得能帶來多大的提升。組件庫應盡可能的保證干凈、靈活以及它的實用性。
我們取長補短。所以，這里要講的不是某一個插件或某一個功能，而是結合插件與自身的布局來達到足夠的穩定與，解放雙手，釋放大腦。
這里主要通過介紹 Kitchen、Anima 和 sketch 的布局部分，整合它們各自的優勢來做一系列的動態布局。
對比一下各個插件之間的差異
Kitchen
輸入按鈕的上下左右邊距，讓文字與按鈕背景的邊距固定。改變文字寬度，按鈕寬度隨之改變。
Anima Padding
Anima 不需要手動輸入邊距，插件會自動保留文字周圍的邊距并生成 padding。
Sketch 布局
sketch 也不需要手動輸入邊距，但是需要將想要實現動態布局的內容創建為組件，在創建組件的過程中可以對它的動態方向進行限定。這里一共七種模式（無、水平「從左往右、居中、從右往左」、垂直「從上往下、居中、從下往上」）。文字的對齊方式最好和布局的動態方向保持一致。
可以看出 Anima 和 Sketch 會更一點
我們可以讓按鈕再可以復雜一點。
比如加個 icon：
或者換個行：
在一個維度上的動態改變，大家應用得都挺好。但 Sketch 組件在文字換行時并沒有在縱向上去改變高度。
解釋一下：
按鈕、標簽等這類元素，我們通常都會創建為組件，方便我們管理及調用。接下來我們把剛才做好的動態按鈕組件化，再來看看它們是否能實現動態響應。
Kitchen
Anima
Sketch
在組件化之后，Anima 出現了未知錯誤，按鈕并沒有任何變化。在實際使用中，sketch58 之前的版本可以正常變化。58 及其之后的版本暫時會出現問題，把 Anima 更新到 3.2.2 之后，官方更新說修改了 symbol 之后的 padding bug，但是在實際使用中并沒有帶來改善。
所以在這里不建議用任何第三方插件去做 symbol，即使 Kitchen 在這里沒有出現什么大的問題，但在實際操作中的響應速度及穩定性都比較差。此外 sketch 的更新速度很快，大多插件很難即時跟上它的更新速度，從而導致一些不可預知的問題。為了組件的可維護性、自身安全，請盡量用 sketch 的自帶技能去搭建組件。
按鈕或標簽這類組件通常會多個同時出現，比如這樣：
這樣：
我們可以通過以下幾種方式快速實現布局：
Kitchen
Anima
Sketch
其中 Kitchen 和 Anima 可以實現全自動的動態響應，包括復制、刪除等操作。而 Sketch 需要手動去維護或者創建為組件后才能實現全自動的動態響應。
這里傾向于直接利用 Kitchen 或 Anima，不會產生不必要的 symbol，但同時也能提升我們的設計效率。對比 Kitchen 和 Anima，Anima 的響應速度更快，功能更豐富，在實現固定間距的同時可以保證對齊方式。具體的應用場景，我們后面會講到。
動態的組件，結合固定間距可以實現一系列便捷的操作。接下來我們講一些具體的實現效果。
基于上面的結論，我們在這里的動態組件都會用 sketch 的布局功能來搭建。
label 在之前的版本中不需要特殊處理，因為有尾隨功能。59 版本之后這個功能被移除，新的布局可以完全取代它了。這里我們手動配置一下水平方向的布局。
注意文本的對齊方式與布局方向要保持一致。
再利用 「Anima-Padding」/「Kitchen-自動排版」 實現動態布局。
Anima 需要合理編組來實現
圖標解釋
△ Padding（內邊距）
△ Stack（堆載）
導航欄也是常用的組件之一。
首先創建「選中」與「未選中」兩種狀態組件。也可以用一種狀態（選中狀態）通過控制元素隱藏/顯示、修改文字樣式等來實現狀態改變。不過操作比較繁瑣，這里就不推薦了。
這里的選中狀態需要用到 sketch 的水平布局，短橫線才可以跟隨文字動態改變。
置入建立的組件，確定好間距，再次建立組件，保持水平布局。就可以得到一個動態的導航欄了
也可以用 Anima/Kitchen 的布局去實現這個效果。
再次強調：Anima/Kitchen 的最好不要作為組件使用。
通用性強，復用率高的組件建議用 sketch 的布局去建立組件。
如何把大象放進冰箱
這里要實現的效果是「改變文字寬度，保持文字與右側的線條間距不變」
方法：
序號、文字、白色背景成組，并水平「從左向右」布局
這樣文字可以推動白色背景變寬，與右側線條始終維持相同間距。
結合 sketch 的調整尺寸（resizing）還可以手動改變步驟條的寬度。
表單也可以通過 anima 或者 kitchen 來布局，實現數據的快速增刪。
PS: Anima 的 stack 會默認選一種對齊方式，出現下列這幾種布局效果（下方左對齊異常的原因和我組件的搭建方式有關）。
左對齊
居中對齊
兩端對齊
右對齊
6. switch / radioButton
同樣的，利用 sketch 的布局，還可以創建動態的 switch 和 radiobutton。
方法和之前建立動態按鈕類似，不過需要注意的是：這類 tooltip 會存在一個最大寬度，在超出這個寬度后需要換行處理。但是sketch 的動態維度只有一個象限（x或y）。這個時候當超出最大寬度后就需要手動去換行并調節高度（動態高度，手動調節寬度，可以依據文字是否換行來判斷邊距是否正確）。
建議：這里我們可以建立兩個組件，一個動態高度，一個動態寬度，根據文本量的多少去選擇合適的動態方向。上面換行的按鈕也可以這樣處理。
再多說一句：Anima 可以通過拖動寬度來改變文字的對齊方式（自動寬度、自動高度），結合自身的 padding 可以實現兩個象限的動態改變。但是出于穩定性的考慮，我們不推薦用它來做 symbol。
模塊相對于簡單的組件結合了多種布局方法。
以這個留言版為例展開說明：
這個留言版由頭像、name、like、dislike、留言內容等 5 個元素組成。從布局上看可以把頭像、name、like、dislike四個元素作為一個部分，留言作為一個部分。在整體上形成一個上下動態布局的組件。
頭像和 name 固定于左側；頭像鎖定寬高，name 文本自動寬度，布局方式從左向右。
like、dislike編組固定于右側，文本自動寬度，布局方式從右向左。
留言部分固定左右間距，文本自動高度。這樣我們可以通過拖動該區域的寬度去實現高度的動態改變。
利用 Anima 的 stack，實現每個留言版之間的固定間距。此外，在 stack 里面我們可以選中兩邊對齊的方式。
讓組內留言版的寬度保持一致。
分別建立「左上、上、右上、左、中、右、左下、下、右下」等 9 個單元格組件。通過（左、上邊框+th+td）的方式也可以，這里不細說。
每一列單元格分別打組，用 Anima（stack 左右對齊）或 Kitchen 固定垂直間距（間距為 0），組名 tr。無論是單元格的增減，還是單元格高度的變化，都可以在縱向上動態改變。
對 tr 打組，固定左右間距（間距為 0），實現表格在水平方向上的動態變化。
利用上面的知識我們來做一個相對復雜的卡片
要點
具體步驟
從上圖可以看出卡片主要分為三個部分
對圖片+標題編組，命名「banner」，確定標題的文本區域及動態方向，這里的標題我希望它在換行時往上走。這樣可以把文字定為下方固定。如圖：
對頭像、名字、標簽編組，命名「人物簡介」。固定頭像大小，固定名字位置。對標簽編組，這里標簽應該是動態的，從左往右布局。
標簽高度固定；人物簡介寬高固定；
固定人物介紹文本與卡片左右間距以及上邊距
對「海報」「人物簡介」「人物介紹」再次編組，確定組內各元素間距。編組和背景確定邊距。
這個過程剛開始可能是一個漫長的調試過程，在熟悉后，會讓調試有一個明確的方向，從而縮短時間。
不對，工作還沒交付給開發就不算完成。工作中我會使用藍湖把設計資源交付給開發。
結果
Anima 的布局在上傳藍湖后，藍湖上顯示正常，但是 sketch 本地布局統統崩潰了。我不禁長嘆一聲，啊！
藍湖官方解釋「兩個插件在 Sketch 提供的方法調用是有沖突的，建議在上傳前關掉 Anima 插件」。
關掉 Anima 需要在插件中關掉后并重啟 sketch 才能生效，不然編組的內容依舊會保留 Anima 特性。
接下來重新總結一下：
結合以上內容為開發同事做的一個上線海報，他們可以只關注內容了。
文章來源：優設