Sketch?58 Beta版本已于近期推出（其實最近一段時間已更新了好幾個測試版），官方終于推出Smart Layout智能布局啦撮，讓Symbol組件獲得響應功能，變得更加靈活和強大汪厨。

之前我們只能使用第三方插件來制作響應式組件赃春，比如之前介紹的Kitchen和Anima。不過畢竟不是官方親生的骄崩，難免會包含一些bug和不足聘鳞。

比如Kitchen插件在制作Symbol組件的時候薄辅，其自動排版功能會出錯。Anima插件對上傳到藍湖的標注會有顯示問題抠璃。關(guān)鍵是在團隊協(xié)作的時候站楚，其他使用源文件的同學也必須安裝對應的插件，否則沒有效果搏嗡。

那么這次Sketch 58 Beta版本新推出的Smart Layout智能布局功能窿春，能否解決長期困擾我們設計師的響應布局問題呢？一起來看下采盒。

Sketch最新Beta版本下載

如果想知道57版本的新功能旧乞，請看這篇文章《Sketch 57 Beta版本探秘，看看都有什么新功能》磅氨。

如果想體驗Sketch最新Beta版本尺栖，請進入Sketch測試版主頁下載 https://www.sketch.com/beta/。但是要記住烦租，一定不要用在自己的正式文件中延赌，防止修改后，低版本打不開叉橱。

Sketch 58要求Mac系統(tǒng)版本是macOS High Sierra 10.13.4及以上挫以，下面是Sketch各大版本對應的Mac系統(tǒng)版本，如果遇到新版的Sketch打不開就需要檢查下自己的系統(tǒng)版本窃祝。

Sketch52-58系列版本需要macOS High Sierra 10.13.4及以上

Sketch51系列版本需要macOS Sierra 10.12.2及以上

Sketch50系列版本需要OS X El Capitan 10.11.2及以上

Smart Layout智能布局介紹

本次Sketch 58 Beta最大的更新就是這個Smart Layout掐松。

在新建Symbol組件時，彈窗新增Layout選項粪小，總共有7個屬性大磺，分別對應不同的圖標，下面是每個屬性的簡單介紹探膊。

No Layout

正常布局量没，也就是和原先一樣，沒有特殊效果突想。

Left to Right Layout

賦予Symbol組件智能布局效果，組件尺寸會根據(jù)內(nèi)容變化究抓，方向是水平從左往右布局猾担。

Horizontally Center Layout

同上，方向是中間往左右兩端布局刺下。

Right to Left Layout

同上绑嘹，方向是從右往左布局。

Top to Bottom Layout

賦予Symbol組件智能布局效果橘茉，組件尺寸會根據(jù)內(nèi)容變化工腋，方向是垂直從上往下布局姨丈。

Vertically Center Layout

同上，方向是中間往上下兩端布局擅腰。

Bottom to Top Layout

同上蟋恬，方向是從下往上布局。

另外在選擇好Layout屬性后趁冈，Symbol頁面的畫板組件圖標會發(fā)生變化歼争，除了No Layout布局還是之前的畫板圖標之外，其余6個都有對應的新圖標渗勘，看下圖沐绒。

此外，選擇畫板后旺坠，右側(cè)的屬性面板中會新增布局選擇功能乔遮，包含上面講的7種屬性，可隨時對Layout布局進行更改取刃。

看上面的描述還是比較迷惑蹋肮，實際上智能布局簡單說就是賦予Symbol組件內(nèi)容邊距的功能，尺寸隨內(nèi)容變化而變化蝉衣，有點類似于前端CSS中的padding屬性括尸。下面用實際例子展示。

制作彈性按鈕

以前我們使用過Kitchen和Anima制作過彈性按鈕病毡。需求是濒翻，文字兩端的邊距（即CSS中的padding）保持固定，文字數(shù)量不固定啦膜，按鈕寬度隨文字內(nèi)容走有送。

那么在Sketch 58中，我們先制作一個按鈕僧家，文字兩端的邊距是20雀摘。

轉(zhuǎn)化為Symbol，出現(xiàn)彈窗八拱，在新增的Layout下拉中阵赠，選擇Left to Right Layout，這樣文字變化時肌稻，左邊是固定不動的清蚀，內(nèi)容往右邊延展。

這樣一個彈性按鈕就做好了爹谭，不管文字有多少枷邪，兩端邊距永遠保持固定20。和前端CSS中的padding-left和padding-right功能一樣诺凡。

如果這個時候我們再拉伸Symbol东揣，右側(cè)Overrides會出現(xiàn)一個新的圖標：縮小實例以適配內(nèi)容践惑。點擊后，被拉伸的組件會還原為文字內(nèi)容長度嘶卧。

注意尔觉，這個和原先的重設覆蓋層圖標不同，不會清除覆蓋的文本內(nèi)容脸候，只會還原為適合內(nèi)容大小穷娱。

以上是從左往右的布局，水平兩端和從右往左也是一樣的道理运沦，只是方向不一樣泵额，下圖是從右往左的布局。

這就是智能布局的主要功能携添，賦予Symbol組件CSS代碼padding屬性嫁盲，具備響應特征。還需要注意的是烈掠，智能布局目前只針對Symbol組件羞秤，Kitchen插件是可以作用于普通組的。

制作彈性按鈕組

上面是單個組件的智能布局左敌，如果是嵌套組件呢瘾蛋？也是可以的，一起試下矫限。

我們把剛才做的按鈕橫向分布三個哺哼，再一起做成新的按鈕組Symbol組件，結(jié)構(gòu)看下圖叼风。

新的按鈕組內(nèi)取董，每個按鈕已經(jīng)是響應式的，那么做成組后就會保持組內(nèi)元素的間距固定无宿，更改下文字內(nèi)容看下圖茵汰。

非常棒，已經(jīng)滿足了我們剛開始的需求孽鸡。但是不建議嵌套過多蹂午，要保持組件化設計思維。當然了彬碱，間距問題画侣，Sketch 57已經(jīng)提供了多元素間距調(diào)整功能，只多了一步堡妒，但是不用把整體再次轉(zhuǎn)化Symbol，大家可以根據(jù)自己的需要靈活選擇溉卓。

制作信息卡片

以上講的是水平方向布局皮迟，同理垂直方向布局道理也一樣搬泥，我們以最常見的信息卡片為例子。一般情況下卡片圖片不變伏尼，標題和內(nèi)容文字的不固定會導致卡片整體高度也會發(fā)生變化忿檩。利用智能布局我們可以讓卡片變成響應式擴展。

確定好上下左右的間距爆阶，例子中用的16燥透，然后建立組件，Layout選擇從上往下布局辨图，這樣標題和內(nèi)容文字增多班套，上下的間距是保持不變的，內(nèi)容高度自動增加故河。

總結(jié)

以上就是Sketch 58 Beta版本新增的Smart Layout智能布局介紹吱韭。關(guān)于這個新功能，我們還可以做很多響應式的組件鱼的，提升設計效理盆。Sketch的更新速度也在加快，很多之前第三方插件才可以實現(xiàn)的效果也被官方一一收入囊中凑阶。希望Sketch的發(fā)展越來越好猿规，成為設計師真正的設計利器。

差點漏了一個點宙橱，58版本的歡迎界面也做了大更新姨俩，至于好不好看就因人而異了。最后來一睹芳容养匈。

THE END