Sketch 推出了 62 Beta 版本來迎接 2020。從一月的 53 開始到現在，總共推出了 10 個大版本更新。下面就一起看下 62 版本的新功能。

Sketch最新Beta版本下載

如果想知道 61 版本的新功能，請看這篇文章：

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

Sketch 62 要求 Mac 系統版本是 macOS High Sierra 10.13.4 及以上，下面是 Sketch 各大版本對應的 Mac 系統版本，如果遇到新版的 Sketch 打不開就需要檢查下自己的系統版本。

智能布局新增最大值和最小值

自從 Sketch58 新增了 Smart Layout 智能布局功能后，UI 設計師可以很方便地通過制作彈性組件來應對各種不同狀態的需求。

在新建 Symbol 組件時，彈窗新增 Layout 選項，總共有 7 個屬性，分別對應不同的圖標，下面是每個屬性的簡單介紹。具體用法可以看下這篇文章：

Sketch62 版本的智能布局新增了最大值和最小值功能，選擇好布局方式后，就可以在右側屬性面板區域設置。這里的最大值和最小值規定了智能布局對象的兩個臨界點，可以分別單獨設置。

水平布局設置寬度的最大和最小值：

垂直布局設置高度的最大和最小值：

那么這個最大值和最小值對我們的工作有什么實際作用呢？

兩種寬度按鈕

這里用上圖中最常見的按鈕組件作為例子。

我們經常使用的按鈕是固定寬度按鈕，和字數多少沒關系（當然要在合理范圍之內）。例如下圖，按鈕寬度是80，不管是多少字，寬度始終不變。好處是整齊、標準，容易排版布局。

固定寬度按鈕在CSS代碼中，直接把寬度寫死文字居中即可，比如? width:80px

另一種按鈕是彈性寬度按鈕，兩端留固定的邊距，字數越多寬度越大。好處是靈活，遇到極端特殊情況不至于文本溢出。

彈性寬度按鈕在 CSS 代碼中就不能寫具體的寬度數值了，而是要使用padding-left和padding-right，即左邊距和右邊距。例如上圖的彈性按鈕可以寫成

padding-left:16px
padding-right:16px

最小寬度的彈性按鈕

但是在實際工作中也會遇到這樣的問題：正常字數，常見的2、3、4個字，按鈕寬度固定，比如始終保持80寬，這樣可以滿足大多數需求。遇到極端情況，比如8個字，我們需要讓按鈕兩端始終保持邊距16，寬度跟著字數多少走，但不能小于80，這個該怎么辦呢？

在Sketch62版本之前，我們可以設置按鈕為水平智能布局，字數少寬度小，字數多寬度就長，如果想保持一個最小寬度，比如2、3、4個字保持80的寬度，那么我們需要手動拉伸按鈕，但這樣的話會破壞彈性寬度，治標不治本。

Sketch62版本更新的最大值和最小值功能就可以完美解決這個問題。

比如設置寬度最小值為80，就是說這個智能布局規定了對應按鈕Symbol最小寬度是80，不能再小了。接下來試著改變數字。

可以看到，由于設置了最小寬度為80，按鈕中即使只有一個字，寬度也會始終不會小于80，這就是最小值的作用。

最大值同樣的道理，只要設置好對應數值，在不手動拉伸的情況下，寬度不會超過設置的最大值。

實際上，Sketch這次增加的最大值和最小值，比如寬度，對應CSS中的max-width和min-width兩個屬性，也是Web前端中比較常用的。

文檔保存優化

Sketch62中保存文檔時會新增兩個選項，分別是：保存在本地電腦和保存在Sketch Cloud。

還有其他的一些更新點，也主要是對Sketch Cloud 的優化，可見在Figma的追趕下，Sketch也逐步重視云端的相關功能。

總結

前有Figma的攻城略地，后有Adobe XD的緊追不舍，2020年Sketch將會給我們UI設計師帶來哪些新功能和新的設計工作流呢？讓我們拭目以待。

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