@燒燉：在上一篇文章《幫你大幅提高設(shè)計(jì)效率的Sketch Symbol 深度指南》中，我與大家分享了自己使用 Sketch Symbol 的心得。

那時(shí)我用的 Sketch 版本還是 51.3，在文章收尾準(zhǔn)備發(fā)布的那天早上， Sketch 52 Beta 來(lái)了，在機(jī)場(chǎng)的我只來(lái)得及讓朋友截了幾張圖，匆忙放在了文章的結(jié)尾……

24小時(shí)前，Sketch 52 正式版終于發(fā)布了。

我簡(jiǎn)單翻譯了一下這次的更新日志：

重點(diǎn)有四部分：全新界面，嵌套布爾運(yùn)算，數(shù)據(jù)，樣式覆蓋，讓我們逐一詳解。

一、全新界面

Sketch 52 的視覺(jué)風(fēng)格更加扁平化，減少了對(duì) macOS 原生組件和分割線(xiàn)的應(yīng)用，重繪了畫(huà)板、分組的圖標(biāo)（終于不再用系統(tǒng)自帶的文件夾圖標(biāo)了），整體看起來(lái)更加干凈。

除了視覺(jué)風(fēng)格外，Sketch 52 的功能組織也更加清晰合理。

變化最明顯的是右側(cè)檢查器欄：頂部尺寸、位置面板被大幅壓縮，縮放（RESIZING）面板進(jìn)行了重新設(shè)計(jì)，增加了便于理解的預(yù)覽。

元件中可變內(nèi)容的覆蓋（OVERRIDE）面板同樣有很大改進(jìn)，增加了重置所有覆蓋的按鈕，并在子元件、圖片類(lèi)可變內(nèi)容的下拉選框中加入了縮略圖。

概括起來(lái)兩個(gè)詞：舒服，好用。

二、嵌套布爾運(yùn)算

布爾運(yùn)算是界面設(shè)計(jì)時(shí)的常用操作。在 Sketch 52 以前，因?yàn)槲谋尽⒃荒苤苯舆M(jìn)行布爾運(yùn)算，諸如漸變文字的內(nèi)容可變、布爾圖形的部件更換等操作是無(wú)法實(shí)現(xiàn)的。

1. 文本的布爾運(yùn)算

現(xiàn)在，Sketch 中的文本可以與圖形進(jìn)行四種布爾運(yùn)算，運(yùn)算后的文本不會(huì)被變成圖形，內(nèi)容依然可變。

與文本布爾運(yùn)算后的圖形結(jié)果，同樣支持填充、描邊（僅支持居中描邊）、外投影、內(nèi)陰影、模糊等常規(guī)的樣式設(shè)置。

2. 元件的布爾運(yùn)算

元件的布爾運(yùn)算規(guī)則與文本的相同，元件中布爾運(yùn)算過(guò)的子元件也可以被覆蓋。

支持文本與元件的布爾運(yùn)算，為我們改進(jìn)設(shè)計(jì)流程帶來(lái)了新的思路。

三、數(shù)據(jù)

在 Sketch 52 中新增了數(shù)據(jù)（Data）這一功能，可以讓我們使用數(shù)據(jù)批量填充元件的內(nèi)容。

選中同一元件的多個(gè)實(shí)例（在畫(huà)板中的個(gè)體），在右側(cè)的覆蓋（OVERRIDES）面板中，點(diǎn)擊可變內(nèi)容標(biāo)題旁的數(shù)據(jù)圖標(biāo)，選擇要使用的數(shù)據(jù)集，即可填充到組件。

顯然，Sketch 中預(yù)置的英文數(shù)據(jù)、西方人頭像不適合我們?nèi)粘５脑O(shè)計(jì)工作。那么，要如何引入我們自己的數(shù)據(jù)呢？

點(diǎn)擊頂部菜單欄 Sketch - > Preferences ，在 Data 選項(xiàng)卡中點(diǎn)「Add Data...」按鈕，從本地選擇要使用的數(shù)據(jù)。文本數(shù)據(jù)需要選擇 .txt 格式的文件（一行一條），圖片則是選擇圖片所在的文件夾。

這里需要注意的是，如果數(shù)據(jù)源對(duì)應(yīng)的文件發(fā)生改變，比如我們修改了 txt 中某幾行的文字，之前填充過(guò)的內(nèi)容不會(huì)被更新。再次使用該數(shù)據(jù)集進(jìn)行填充時(shí)，應(yīng)用的才是更改后的內(nèi)容。

Sketch 52 的數(shù)據(jù)是一項(xiàng)革命性的功能，它從底層上為給元件快速填充數(shù)據(jù)開(kāi)拓了更多可能。往深研究，我們可以編寫(xiě)自己的 Sketch 插件，來(lái)自動(dòng)為元件填充各項(xiàng)數(shù)據(jù)。

四、樣式覆蓋

在 Sketch 52 以前，要為元件內(nèi)的文本、圖形更換字體、字號(hào)、顏色，只能靠復(fù)制元件，或是將圖形制作為蒙版來(lái)對(duì)付。這樣的做法，在進(jìn)行一款產(chǎn)品的整體組件化設(shè)計(jì)時(shí)，會(huì)導(dǎo)致組件的冗余。

現(xiàn)在，樣式覆蓋（Style Override）的出現(xiàn)徹底解決了這個(gè)問(wèn)題。

當(dāng)我們?yōu)樵?nèi)的文本、圖形指定了樣式后，就可以在使用元件的地方對(duì)樣式進(jìn)行覆蓋。

樣式覆蓋可以和子元件的布爾運(yùn)算一起使用，從而實(shí)現(xiàn)上圖中換衣服款式、換顏色的效果。

以上四部分，就是 Sketch 52 的主要更新內(nèi)容，你能想到什么有趣的用途呢？

另外，在更新到 Sketch 52 前，請(qǐng)一定注意：Sketch 52 打開(kāi)并保存過(guò)的文件，在51.x 及以下版本打開(kāi)后無(wú)法正常顯示。如果團(tuán)隊(duì)人數(shù)較多，建議選擇合適的時(shí)間大家集體更新，避免因軟件版本不同影響協(xié)作。

五、問(wèn)題回復(fù)與勘誤

1. 問(wèn)題回復(fù)

因?yàn)槠綍r(shí)較少登錄公眾號(hào)后臺(tái)，錯(cuò)過(guò)了一些留言的回復(fù)時(shí)間（公眾號(hào)后臺(tái)超過(guò)48小時(shí)不允許回復(fù)），在這里專(zhuān)門(mén)回復(fù)一下。

有位昵稱(chēng)為 Victor Lin 的朋友留言問(wèn)：

我把文本做成symbol了，然后我使用文本組件的時(shí)候遇到了幾個(gè)問(wèn)題： 1、文字超過(guò)symbol本身的字體不會(huì)自動(dòng)展開(kāi) 2、做成symbol的文字好像做不了內(nèi)容跟隨？還是回到第一個(gè)問(wèn)題。

關(guān)于這個(gè)問(wèn)題，的確如他所描述的，在目前版本的 Sketch 中， 元件的尺寸只能外部改變（人為），不能由內(nèi)自行改變，所以即便元件內(nèi)部的文本設(shè)置為自動(dòng)尺寸，元件本身也無(wú)法做內(nèi)容跟隨。如果只是要將不同樣式的文本做成組件方便統(tǒng)一，可以嘗試 Sketch 52 的樣式覆蓋功能。

2. 勘誤

在上一篇文章中，我寫(xiě)過(guò)：

「如上圖，當(dāng)文本被尺寸設(shè)置為 Auto 時(shí)，根據(jù)對(duì)齊方式的不同，其尺寸可變的一側(cè)（左對(duì)齊文字的右側(cè)，右對(duì)齊文字的左側(cè)，不包括居中對(duì)齊）的組或圖層會(huì)與文本保持固定的距離。」

這段存在一個(gè)問(wèn)題。

如上圖，事實(shí)上，尺寸為 Auto 的居中對(duì)齊文本，其右側(cè)內(nèi)容也能夠進(jìn)行自動(dòng)跟隨。有心的朋友可以用上篇文章中的源文件自己實(shí)驗(yàn)。

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

「提升效率的Sketch功能」

• 《這樣使用Sketch的Symbol功能，能極大提高你的工作效率！》
• 《學(xué)會(huì)這4大Sketch 高階技巧，讓你的效率猛翻10倍！》
• 《那些提高效率但不為人知的Sketch 冷知識(shí)》