說起Sketch的一大痛點(diǎn)，就不得不提顏色樣式。明明已經(jīng)建立好完整的圖層顏色樣式，文本就是無法調(diào)用，必須重新建立。導(dǎo)致實(shí)際項(xiàng)目中的文本樣式非常復(fù)雜，特別影響效率。

在69版本中，這個(gè)問題將不復(fù)存在，新增的顏色變量功能將會(huì)統(tǒng)一文檔中的顏色調(diào)用方法，與Figma類似。此外還增加了組件視圖、插入窗口等新功能。69版本整體改變還是挺大的，下面一起了解下。

Sketch最新Beta版本下載

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

Sketch 69要求Mac系統(tǒng)版本是macOS 10.14.4及以上，下面是Sketch各大版本對(duì)應(yīng)的Mac系統(tǒng)版本，如果遇到新版的Sketch打不開就需要檢查下自己的系統(tǒng)版本。

顏色變量

這是69版本最大的改變。因?yàn)樵黾恿霜?dú)立的顏色變量屬性，所以無論是圖層、文本、投影、描邊，都可以通過顏色變量來調(diào)用同一種顏色。在顏色選擇面板中，可以對(duì)當(dāng)前顏色制作變變量，并且支持編輯、更新等操作。

原本顏色選擇區(qū)域右側(cè)換了新圖標(biāo)，這就是顏色變量。以前的圖層疊加模式放在了右上角。

下圖中展示了描邊、投影的顏色區(qū)域，跟填充一樣，都可以添加顏色變量。應(yīng)用后圖標(biāo)會(huì)變成紫色，并且底部會(huì)顯示顏色變量名稱。

因此，以后的文本和圖層就可以共用同一種顏色，非常方便。有點(diǎn)類似于前端的CSS樣式名，符合代碼樣式邏輯，向代碼化邁進(jìn)了一小步。

組件視圖

又是新增的大功能，組件管理更加細(xì)致。原本的圖層和組件標(biāo)簽切換被去掉，工具欄最左側(cè)增加畫布Canvas和組件庫Components面板切換。

組件庫面板又分為組件、文本、圖層、顏色四種分類。其中的顏色是上面講的顏色變量，也被歸類到此。

組件

文本

樣式

顏色

插入窗口

在插入工具中新增搜索功能，可以對(duì)組件、文本樣式、圖層樣式進(jìn)行快速搜索。

并且右側(cè)新增獨(dú)立窗口按鈕，或者按快捷鍵C即可快速打開搜索面板。

其他

組件Symbol的圖標(biāo)更新了，從原來的刷新變成菱形。話說，F(xiàn)igma的組件也是個(gè)菱形，不過是由4個(gè)小的組合而成。

另外路徑偏移功能和用戶反饋功能新增對(duì)應(yīng)圖標(biāo)。

總結(jié)

這次的69版本在組件樣式方面做了大量的改動(dòng)，無論是顏色變量還是新的組件庫面板，都會(huì)對(duì)我們后面的設(shè)計(jì)流程產(chǎn)生影響。尤其是顏色變量功能，以后的文本樣式可以把顏色單獨(dú)提取出來，讓顏色成為全局的一個(gè)基礎(chǔ)原子屬性，減少組件庫的復(fù)雜度。

不過和隔壁的Figma相比，組件和樣式的靈活性還需要加強(qiáng)，Sketch要加油了。

Figma 和 Sketch 哪家強(qiáng)？來看這篇超詳細(xì)的對(duì)比：

歡迎關(guān)注作者的微信公眾號(hào)：「UI黑客」