@JingDesign?：Sketch3.7版本來(lái)啦，一起來(lái)跟靜電熟悉下Sketch3.7版本的新功能，本次更新的一大亮點(diǎn)就是全新的元件功能了，也是Sketch這次大版本的主要特色。不多說(shuō)，直接看總結(jié)！

創(chuàng)新的元件功能

在Sketch3.7版本中，創(chuàng)建元件將使用全新的方式。當(dāng)我們將某個(gè)圖層或者組轉(zhuǎn)化成元件時(shí)，會(huì)直接彈出提示框。點(diǎn)擊后，元件就創(chuàng)建完成了，當(dāng)然我們可以勾選下方的Send Symbol... 將它單獨(dú)放在page里。

元件創(chuàng)建后，我們可以直接雙擊元件進(jìn)入元件編輯狀態(tài)對(duì)元件內(nèi)容進(jìn)行編輯，點(diǎn)擊Return to Instance即可退出元件編輯狀態(tài)。

但是，如果我們?cè)谑褂猛粋€(gè)元件的情況下，想不修改元件就達(dá)到讓相同的元件上有不同的文字或者填充效果這樣的目的呢，Easy~選中元件，注意屬性檢查器了嗎，直接修改文本內(nèi)容即可。

那么元件中有圖像呢？沒(méi)問(wèn)題，也可以。將頭像+用戶(hù)名+簽名部分設(shè)置為元件，復(fù)制一個(gè)元件，然后到屬性檢查器就可以在不改變?cè)旧淼那闆r下修改表現(xiàn)文本和圖像啦。

看一下動(dòng)畫(huà)演示

另一個(gè)要點(diǎn)，元件是可以無(wú)限制嵌套的，你可以將多個(gè)設(shè)置好的元件再次組成新的元件來(lái)使用哦。

手動(dòng)同步樣式

在之前的版本中，大家知道，當(dāng)我們修改某一個(gè)樣式的屬性，比如顏色，那么所有使用這個(gè)樣式的內(nèi)容都會(huì)發(fā)生改變，但是在sketch3.7中，我們可以對(duì)多個(gè)使用同一個(gè)樣式的文本來(lái)分辨調(diào)整不同的樣式而不會(huì)引起其他樣式的改變。當(dāng)我們需要再次統(tǒng)一樣式的時(shí)候，簡(jiǎn)單的使用屬性檢查器，樣式面板右上方的同步按鈕，就可以將所有樣式又一次做統(tǒng)一處理了。這不能不說(shuō)是一點(diǎn)很人性化的改變。

改進(jìn)的網(wǎng)格設(shè)置面板

回想一下之前版本的Grid Tool的面板吧，這次的面板做了調(diào)整，更加人性化，避免了之前設(shè)計(jì)所引起的混淆。

讓畫(huà)板適合內(nèi)容

有時(shí)候我們的畫(huà)板比內(nèi)容范圍大，有時(shí)候我們的內(nèi)容比畫(huà)板范圍大，如果想要畫(huà)板緊貼內(nèi)容大小，那么試試這個(gè)功能吧。選中畫(huà)板，那么畫(huà)板將會(huì)自動(dòng)適應(yīng)跟內(nèi)容范圍一樣大。

插件腳本面板的改進(jìn)

嗯，對(duì)大多數(shù)人用處不大，適合插件開(kāi)發(fā)者。增加了語(yǔ)法高亮功能，改進(jìn)了撤銷(xiāo)功能。

SVG導(dǎo)出功能的改進(jìn)

很多人會(huì)吐槽Sketch的SVG導(dǎo)出功能不完善，不過(guò)SVG這種東西呢，要符合標(biāo)準(zhǔn)還是很重要滴，否則在其他地方就不能使用啦。那么這次Sketch在SVG導(dǎo)出方面增加了對(duì)內(nèi)描邊和外描邊的支持，同時(shí)支持疊加模式的運(yùn)用，支持噪點(diǎn)填充（Noise Fills），更精確的陰影。而且可以將選中圖層的SVG代碼拷貝到剪貼板（靜電：這個(gè)贊贊噠~）

改進(jìn)的貝塞爾曲線調(diào)節(jié)桿

其實(shí)是調(diào)節(jié)桿樣式的改進(jìn)，就是告訴你，你選擇的哪個(gè)把手是哪個(gè)，而不會(huì)讓你暈掉。

缺失字體的處理

請(qǐng)注意，請(qǐng)注意，當(dāng)我們?cè)谝慌_(tái)沒(méi)有安裝設(shè)計(jì)稿所使用的字體文件的電腦上打開(kāi)設(shè)計(jì)稿的時(shí)候，Sketch會(huì)用最快的速度將它們替換成系統(tǒng)默認(rèn)字體，然后加上自帶的自動(dòng)保存機(jī)制，文本中的字體設(shè)置就會(huì)變成默認(rèn)字體，并且再也無(wú)法回去（即使這臺(tái)電腦后期安裝了這種字體，但也無(wú)法正常顯示，因?yàn)樗麄円呀?jīng)被替換為系統(tǒng)字體）。這是老版本的情況，大家應(yīng)該都有印象。但是，在Sketch3.7版本中做了如下處理，在上面提到過(guò)的缺失字體的電腦上打開(kāi)設(shè)計(jì)稿的時(shí)候，那么Sketch會(huì)保留這個(gè)字體的屬性，直到你手工修改了這個(gè)圖層。從另一個(gè)層面的意義就是，雖然這個(gè)文件被別人打開(kāi)過(guò)了，你只要不去修改它，那么文件內(nèi)字體的默認(rèn)屬性還是存在的，設(shè)置為什么字體，就還是什么字體。

這個(gè)特性并不是說(shuō)，在缺失字體的電腦上，這個(gè)字體也可以看起來(lái)跟你的初衷一模一樣了，Sketch只不過(guò)是保留了字體屬性，并不是字體外觀。

Sketch Measure已經(jīng)率先支持3.7版本sketch

經(jīng)過(guò)Utom的努力，sketch measure已經(jīng)率先支持3.7的symbol屬性標(biāo)注，歡迎至?https://github.com/utom/sketch-measure下載更新

附表：靜電翻譯的Sketch3.7全部更新內(nèi)容

全新的元件功能

1. 我們從頭至尾重新設(shè)計(jì)了sketch的元件功能。他們現(xiàn)在更加快速，并且可以在元件中嵌套元件，更新元件中的圖片等等功能。

2. 元件可以一層一層的嵌套，隨你所愿。

3. 如果元件中有圖片，你可以在屬性檢查器的Overrides面板替換圖片。

4. 元件中文本的替換更加靈活，同樣在右側(cè)屬性檢查器的Overrides面板可以直接替換元件里的文本內(nèi)容。

5. 在文檔之間拷貝元件和樣式時(shí)，不會(huì)像之前一樣更新已存在的元件和樣式，新版本中，sketch會(huì)創(chuàng)建一個(gè)新的元件或者樣式。

其他的更新

1. 在Sketch3.7中創(chuàng)建和保存的文件在其他缺失字體的系統(tǒng)中打開(kāi)的時(shí)候，字體外形仍然會(huì)得到保留。

2. 共享樣式現(xiàn)在不會(huì)自動(dòng)同步，以確保減少意外被編輯的可能性。

3. 改善了創(chuàng)建網(wǎng)格面板的設(shè)計(jì)，減少使用之前設(shè)計(jì)而對(duì)用戶(hù)造成的疑惑。

4. Artboard也可以被解組（其實(shí)就是去掉Artboard而保留上面的內(nèi)容）

5. 改善了對(duì)象分布功能。當(dāng)我們不能全像素狀態(tài)均勻分布對(duì)象的時(shí)候，系統(tǒng)會(huì)問(wèn)我們要怎么做。

6. 在圖層之間同步文本樣式的時(shí)候，現(xiàn)在同樣會(huì)原封不動(dòng)的保持其他對(duì)象的基線位置。

7. 通過(guò)一個(gè)簡(jiǎn)單的操作，就可以讓Artboard的尺寸適應(yīng)其內(nèi)容。

8. Sketch現(xiàn)在會(huì)記住不同窗口之間圖層列表欄的寬度（也就是說(shuō)你在不同文件中使用了不同的圖層列表欄寬度，下次打開(kāi)還是會(huì)保持這樣的寬度哦）

9. 當(dāng)使用鍵盤(pán)按鍵的方式進(jìn)入某個(gè)組的時(shí)候，會(huì)默認(rèn)選擇最上邊的圖層（之前是最底部的圖層）

10. Sketch現(xiàn)在會(huì)默認(rèn)記住某個(gè)文檔你是否打開(kāi)了Page面板。

11. 更新了編輯矢量圖形時(shí)節(jié)點(diǎn)還有調(diào)節(jié)桿的樣式。

12. 插件腳本面板做了改善，支持語(yǔ)法高亮，調(diào)試，改善了撤銷(xiāo)功能。

性能優(yōu)化

1. 改善了使用模糊圖層的性能表現(xiàn)

2. 優(yōu)化了使用過(guò)多矩形的復(fù)雜文檔的性能表現(xiàn)

3. 優(yōu)化了使用有角度漸變時(shí)sketch的性能表現(xiàn)

4. 優(yōu)化了選擇畫(huà)布上多個(gè)圖層時(shí)的性能表現(xiàn)

5. 優(yōu)化了在復(fù)雜的帶有蒙版和疊加屬性的畫(huà)布上進(jìn)行縮放時(shí)的性能表現(xiàn)

6. 優(yōu)化了在復(fù)雜的文檔中插入新圖層時(shí)的性能表現(xiàn)

7. 圖層列表的小幅優(yōu)化調(diào)整

8. 改善了在鼠標(biāo)經(jīng)過(guò)文本圖層時(shí)藍(lán)色高亮選中行為的表現(xiàn)

SVG圖像的導(dǎo)出

1. SVG圖像導(dǎo)出現(xiàn)在支持單個(gè)文件的內(nèi)外邊框和疊加模式

2. 改善了SVG圖像導(dǎo)出時(shí)陰影的精確度

3. 在導(dǎo)出SVG圖形時(shí)會(huì)包含圖片填充

4. Artboard的背景色同樣會(huì)被包含到SVG的導(dǎo)出文件中

5. 噪點(diǎn)填充（Noise Flii-sketch的一種圖層填充選項(xiàng)）也會(huì)在導(dǎo)出SVG時(shí)被包含

BUG修復(fù)

1. 修正了Masks菜單在某些情況下不能被選中的問(wèn)題

2. 修正了當(dāng)使用“文件>導(dǎo)出”時(shí)，你當(dāng)前的選擇會(huì)被移動(dòng)到附近的一個(gè)可導(dǎo)出圖層上的問(wèn)題

3. 修正了在使用取色工具時(shí)會(huì)出現(xiàn)罕見(jiàn)崩潰的錯(cuò)誤

4. 修正了在Artboard導(dǎo)出時(shí)，即使選擇了不包含artboard背景色，但背景色也會(huì)被包含進(jìn)去的bug

5. 修正了在切片之外設(shè)置網(wǎng)格時(shí)引起的崩潰現(xiàn)象

6. 修正了在被遮罩圖層周?chē)鷦?chuàng)建Artboard時(shí)，這個(gè)Artboard在移動(dòng)后不會(huì)被包含進(jìn)去的問(wèn)題

7. 修正了在圖形編輯狀態(tài)下插入圖片可能造成的崩潰問(wèn)題

8. 修正了被重新設(shè)置大小的子路徑可能會(huì)被莫名其妙剪掉的問(wèn)題

9. 修正了當(dāng)向上或者向下級(jí)移動(dòng)某個(gè)圖層后，鍵盤(pán)的delete鍵不工作的問(wèn)題

10. 修正了當(dāng)把整個(gè)頁(yè)面拷貝到其他文檔的時(shí)候，里邊的共享樣式和元件不能被復(fù)制過(guò)去的問(wèn)題

11. 圖層列表上的預(yù)覽圖形現(xiàn)在可以被正確的顯示了

12. 修正了一個(gè)讓人感到疑惑的問(wèn)題：當(dāng)使用圖形編輯模式時(shí)，曲線調(diào)節(jié)桿有時(shí)候會(huì)影響多個(gè)圖形，有時(shí)候反而不會(huì)有此現(xiàn)象

13. 修正了關(guān)掉歡迎窗口后會(huì)引起Sketch崩潰的罕見(jiàn)問(wèn)題

14. 修正了當(dāng)你移動(dòng)圖層的時(shí)候，Make Exportable按鈕會(huì)消失的問(wèn)題

15. 修正了從Safari拷貝文本圖層時(shí)會(huì)引起文本圖層不正常的間距的問(wèn)題

16. 修正了某些情況下圖層不能重新排列的問(wèn)題

17. 修正了在粘貼圖層樣式時(shí)可能引起的崩潰

18. 修正了當(dāng)在畫(huà)布上放置非法的內(nèi)容的時(shí)候，sketch會(huì)停止工作的bug

歡迎關(guān)注靜電的公眾號(hào)：

【優(yōu)設(shè)四月人氣過(guò)萬(wàn)的好文】

使用素材站：
《實(shí)用干貨！11個(gè)人氣超高的設(shè)計(jì)素材匯總網(wǎng)站》

自學(xué)UI設(shè)計(jì)的正確姿勢(shì)：
《別著急學(xué)軟件！先掌握科學(xué)有效的UI設(shè)計(jì)自學(xué)姿勢(shì)（超全面）》

幽默有趣的前端小課堂：
《零基礎(chǔ)也能看懂！寫(xiě)給設(shè)計(jì)師的前端小知識(shí)之網(wǎng)頁(yè)排版（附實(shí)戰(zhàn)）》

作者：@JingDesign

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量112萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com