認識一個主攻前端的全棧開發(fā)大牛，最近做一個項目需要用到 Sketch。前天跟我發(fā)牢騷說：你之前不是說 Sketch 就跟 web 開發(fā)一樣簡單嗎？但是我感覺和 PS 一樣又笨又呆，做按鈕、列表、段落的時候太死板，刪個元素還得把其他元素一個個調(diào)整，就不能像 web 的 float 浮動一樣自己動嗎？

我立即明白他的意思，推薦他使用了 Kitchen 插件。結果第二天淚流滿面地跟我說：Sketch 這玩意兒太好用了。

其實很多 UI設計師如果沒有了解過一些前端知識，可能不太理解這位程序員的心情。但是對于寫過 html 頁面，了解過 css 的設計師來說，網(wǎng)頁開發(fā)中的 float 浮動真的應該引入到 Sketch 中。

先看個例子，我們現(xiàn)在需要做一個橫向的文字導航，這應該算是一個最簡單最常用的 UI組件了。每個文字標簽之間的間距是40。

不過在實際工作中我們總會遇到這樣的需求，比如把熱門改為熱門文章。正常情況下我們是這樣處理的：更改文字后，為保持間距，后面三項需要手動調(diào)整位置。

難道這個操作不對嗎？對于前端程序員和了解 css 的設計師來說，這個操作還真的「不對」。例子中只有5項，如果有十幾項不就麻煩了。文字內(nèi)容改變后，文字之間的間距應該保持不變才是正確操作。

Sketch 作為設計軟件，天生遵守「絕對定位」這一原則：每個元素之間是相互獨立的，互不影響。但是在 web 開發(fā)中，頁面中的元素卻是互相聯(lián)系的（在不設定 position:absolute 的前提下），定義好間距樣式后，無論文字內(nèi)容怎么變，它們的間距都會保持一致。

Kitchen 插件中的智能排版

如果在 Sketch 中引入這個功能，那么不就極大解放設計師的生產(chǎn)力了嗎？所以隆重給大家推薦 Kitchen 插件中的自動排版功能。

Kitchen 是阿里團隊開發(fā)的一個 Sketch 插件，https://kitchen.alipay.com/，本文就不介紹其他功能了，大家自己體驗。這里只著重介紹它的自動排版或者叫智能排版功能，這才是 Kitchen 的核心。

Kitchen 的智能排版主要包含間距和邊距兩個功能，用網(wǎng)頁前端的術語來說就是 margin 和 padding——盒子模型中最基本的兩個屬性。

下面我們就結合實際例子，看看它是如何提高設計師的生產(chǎn)力的。

制作彈性按鈕

一般我們做的按鈕主要分為兩種：固定寬度按鈕和彈性寬度按鈕。

固定寬度很簡單，一個寬度是120的按鈕，其他頁面也都是120，不管兩個字還是三個字，按鈕寬度保持不變。

彈性按鈕就不一樣了，在后臺的界面設計中，經(jīng)常遇到不同文字數(shù)量的彈性寬度按鈕需求。不管按鈕文字是多少，兩端的留白（即padding）始終保持固定。這個對于設計師來說很麻煩，每次字數(shù)變化后都要再調(diào)整按鈕寬度。

那么在使用 Kitchen 的智能排版之后，這個操作將變得絲一般的順滑。

制作彈性按鈕將會使用到智能排版中的邊距功能。我們選中這個按鈕組，打開智能排版面板，在左邊距和右邊距都寫上20，鍵盤回車。然后再改變文字試試看，原本又笨又呆的按鈕仿佛有了靈性，完全聽從我們的指揮，這就是彈性按鈕，用前端術語就是兩邊增加了 padding-left 和 padding-right。

上下邊距也是同樣操作，左下角的自動排版需要勾上，否則按鈕組會被打散，失去自動排版功能。

下面是一個示意圖，可以看到 Kitchen 給我們的按鈕組重新命名了，多了尖括號和數(shù)值，名稱中的x代表空，下邊距沒有填寫。順序是按照「上-右-下-左」順時針的方向，和前端的四數(shù)值簡寫方法是一樣的。需要注意的是，新增的尖括號及內(nèi)容不能刪除，否則智能排版會失效。

所以到這里大家應該明白，智能排版本質(zhì)就是賦予 Sketch 前端布局的功能，讓設計師布局更加靈活。接下來我們看下間距的用法。

讓元素自動調(diào)整間距

回到文章開頭的問題，一個橫向的文字導航，每項間距是40，其中第二項字數(shù)發(fā)生了改變，為了保持間距統(tǒng)一，后面的元素位置需要手動調(diào)整。那么利用智能排版的間距功能，我們就會給每個文字賦予生命力，讓它們之間實現(xiàn)自動排版。在水平間距填寫40看看效果。

搞定，從此以后面對任何導航再也不怕修改文字了。垂直間距也是同樣的道理。在間距操作中，導航所在的組，名字被 Kitchen 改為h40，h即 horizontal，同樣，如果是垂直間距會加上 v，即vertical。

制作一個彈性按鈕組

到此，我們已經(jīng)掌握了智能排版的兩個核心間距和邊距，在實際工作中還有很多需要兩個功能結合起來的操作，比如做一個彈性按鈕組：按鈕內(nèi)部兩端的邊距固定，按鈕之間的間距也保持固定。

在沒有 Kitchen 之前，這樣的操作簡直要命，先要更改按鈕寬度，接下來再改變按鈕間距。作為一名追求工作效率的 UI設計師，我可忍受不了這種復雜糟糕的體驗。所以在智能排版的幫助下，復雜的操作也是瞬間完成。

不過也有一些小瑕疵，就是當按鈕寬度改變后，間距卻沒有及時變化，需要再次點擊這個按鈕組才可以，應該是插件的一個bug，希望后續(xù)的更新能優(yōu)化下。

智能縮放應用到 Symbol

在上面的例子中，我們用了不同寬度的按鈕，但是像文字、顏色、描邊等樣式都是一樣的。對于 Sketch 來說，這些按鈕統(tǒng)一可以使用Symbol 來代替，實際工作中我們肯定也是這樣操作的。那么如果每個按鈕都調(diào)用了同一個 Symbol，上面講到的彈性按鈕組可以實現(xiàn)嗎？當然可以。

我們先把按鈕轉換為 Symbol，復制四個分別再命名，然后把整個組用智能排版的間距功能設置為h20。不過出現(xiàn)了問題，按鈕高度塌陷了，一個bug。

我們需要進入到 Symbol 中，把按鈕的圓角矩形底的 Resizing 給設置下，頂部固定，高度禁止拉伸。

設置之后再看下效果，已經(jīng)可以了。不過還有個小問題，按鈕之間的間距無法自動完成，需要我們手動選擇按鈕組，再使用智能排版的間距功能，設置為h20，確定回車就可以了。這個應該也算是一個bug。

總結

通過利用 Kitchen 的智能排版功能，我們已經(jīng)實現(xiàn)了想要的效果，節(jié)約了大量時間，以后的界面設計效率將會極大提升。當然，還有很多其他的使用場景，大家可以自己在實戰(zhàn)中去體驗。不過在使用中也發(fā)現(xiàn)了一些 bug，希望 Kitchen 的團隊能夠在后續(xù)版本修復。

當然了，本文的自動排版效果也有其他插件可以實現(xiàn)，比如：

• Paddy：https://github.com/DWilliames/paddy-sketch-plugin
• Anima：https://www.animaapp.com/

不過由于 Kitchen 插件還附帶數(shù)據(jù)填充、iconfont庫、圖表生成器等常用功能，而且插件裝多了也會影響 Sketch 的性能，一些設計師也不愿意裝那么多插件，所以 Kitchen 整體還是有一定優(yōu)勢的。

歡迎關注作者的微信公眾號：「UI黑客」

「提升效率的Sketch插件」

• 《螞蟻金服推出超好用的Sketch 插件「Kitchen」》
• 《神器來了！9款幫設計師提升效率的Sketch 插件》
• 《用這個免費的 Sketch 插件，幫你完美還原安卓界面！》