幫你大幅提高設計效率的Sketch Symbol 深度指南
@燒燉：2018年的七夕是個星期五。晚上7點，設計師小王正在收拾東西，他和隔壁組的小姐姐約好了去看電影，打算7:30下班。正收拾著，收到了 Leader 發的訊息：
時間只剩半小時了，小王該怎麼辦？
幾乎每位設計師都有這樣的經驗：在做使用者介面設計時，我們很難能一次定稿，大部分工作時間都花在了改動上。
所以，提升設計師工作效率的關鍵，就在於減少設計改動的時間。
今天我要講的，就是利用 Sketch 的元件（Symbol）功能減少設計改動耗時，來大幅提高設計效率。
在 Sketch 漢化外掛中，Symbol 被翻譯為「符號」。但鑑於 Sketch 與曾經如日中天的 Flash 中的 Symbol 作用十分相似，故下文中統一使用 Flash 官方中文版裡 Symbol 的翻譯：元件。
所以，這篇文章的正經名字應該是：Sketch Symbol 深度指南。
一、入門：元件的基礎用法
如上圖所示，在三個畫板中都有同樣的圖示。這是在設計工作中常出現的情況，比如一套移動端介面中，不同頁面的底部 Tabbar 中都有著相同的圖示。
假如在設計評審後，需要統一修改這個圖示的顏色，又或是調整一些細節，怎樣操作最快呢？
一個個選中，再統一修改，選擇起來慢不說，還容易出現遺漏的情況。先修改一個，再複製貼上，又會浪費不少的時間。
讓我們用 Sketch 的元件來簡化這漫長而枯燥的過程。
1. 建立、使用、編輯元件
建立一個新元件非常簡單。選中要轉化為元件的內容，點選頂部工具欄的 Create Symbol 按鈕，就可以轉化為元件。
轉化為元件的內容，可以直接複製，或在頂部 Symbols 選單中選擇使用。
在元件上雙擊，或在 Symbols 頁面找到對應元件，即可進行編輯。編輯完成後，檔案內所有用到該元件的地方都會實時變化。
2. 元件的複製、分類、替換
如果想以某個元件為樣板，建立類似的元件，可以在 Symbols 頁面中直接複製。在左側列表中右鍵選擇 Duplicate ，或按住 Alt 拖拽畫板。
在給元件命名時，可以使用斜線「/」進行分類，將不同型別的元件組織起來。
在畫板中選擇一個元件，在右側的面板中可以將它替換為其他元件。替換的選單中預設展開了當前元件所在的分類，便於在一個分類下進行切換。當然，也可以選擇其他分類下的元件進行替換。
掌握了元件的基本操作後，諸如「給所有頁面中的按鈕換個顏色」、「改一下底部標籤欄中的圖示，重新輸出一遍效果圖」這類問題，再不會浪費那麼多時間了。
二、進階：元件的可變內容
將上述的元件基礎用法代入實際工作中，我們不難想到幾類問題：
- 把按鈕做成元件，在不同的場合，按鈕的文字可能會不一樣，該怎麼辦？
- 要是把使用者頭像做成元件，怎樣在不同頁面中給頭像填充不一樣的圖片？
- 如果做一個帶圖示的按鈕元件，裡面的圖示怎麼替換？
別擔心，在 Sketch 中，元件的一部分內容是「可變」的。在每一處使用元件的地方，都可以在右側的 Overrides 面板中修改元件的可變內容。
元件的可變內容有文字、圖片、元件內的元件三種，讓我們一個個來看。
1. 可變的文字
元件內的文字預設都是可變的。對於不需要可變的文字，可以將它鎖定（如上圖中的「下載檔案」文字）。
元件內的圖層名將被 Sketch 用做可變內容的標題，圖層的內容則被作為預設內容。
所以，如果你和我一樣，看那個「001.pdf」的標題很是難受，就可以像上面這樣修改。
2. 可變的圖片
元件內的可變圖片，可以通過將元件內圖形圖層的填充改為影象模式來實現。
當然，可變圖片的透明度、填充方式（Fill/Fit/Stretch/Tile）等屬性也與元件內的設定保持相同。
3. 可變的子元件：元件內的元件
在元件內使用的元件被稱作子元件，在元件的 Overrides 設定中，可以選擇替換不同的子元件，也可以直接對子元件的可變內容進行設定。
在替換時， Sketch 只允許用同原始尺寸的元件進行替換。在替換後，子元件內同名的可變內容將被保留。
當我們將文字、圖片、子元件組合起來使用後，可以實現複雜的元件化。在做諸如資訊流、聊天列表、會話介面這類包含複雜重複內容的設計時，就能事半功倍了。
三、高階：元件中的排版
在利用元件進行設計時，我們還會遇到一些和排版有關的問題，比如：
- 把語音對話氣泡做成元件，長度可變，右側的未讀紅點要怎樣處理？
- 將輸入狀態的文字框做成元件，有沒有辦法讓游標跟著文字走？
這些問題，大都可以使用 Sketch 中的「縮放控制」（Resizing）、「文字的內容跟隨」兩個特性來解決。
1. 縮放控制：位置與尺寸
在 Sketch 中，縮放控制（Resizing）是實現動態排版的主要方法。我們可以給每個圖層設定 Reszing 屬性，來控制圖層內容在縮放時的表現。在上圖中，可以直觀的看到 Resizing 在縮放時起到的作用。
具體的控制關係如下：
讓我們回到本章開始時第一個的問題：把語音對話氣泡做成元件，長度變化時右側的未讀紅點要怎樣處理？
為元件內的各個圖層設定不同的縮放屬性，就可以完美實現我們要的效果。如果將紅點做成了子元件，還可以切換是否顯示紅點。
2. 文字的內容跟隨
Sketch 的元件中有個很神奇的特性，我將其譯作「內容跟隨」。
如上圖，當文字被尺寸設定為 Auto 時，根據對齊方式的不同，其尺寸可變的一側（左對齊文字的右側，右對齊文字的左側，不包括居中對齊）的組或圖層會與文字保持固定的距離，距離限制為20px，超出這個距離的內容將不會跟隨。
內容跟隨甚至支援多個圖層的連續跟隨。利用這種特性，就可以做出固定間距、固定分隔圖形的文字導航欄。
3. 固定尺寸的深入研究
固定尺寸固定的究竟是什麼？我們來做個實驗：
將元件內文字和游標打組，將組的寬度固定，並不會影響文字長度的自動變化，以及文字後方的內容跟隨。
結論是：在 Sketch 中，「固定寬度/高度」只會確保組/圖層的尺寸不會被「外部」縮放所改變，並不會限制其「內部」產生的尺寸變化，也不會影響其內部文字在尺寸變化後的「內容跟隨」。
四、關於Sketch 52 Beta…
在我正寫這篇文章的9月20日凌晨，Sketch 釋出了52 Beta，更新了非常多的特性：
全新設計的軟體介面，使用者體驗更好；文字、元件可以與圖形進行布林運算；最令人激動的是，元件內的可變內容（文字、圖層）支援直接修改樣式；並且還可以將外部資料（文字、圖片等）載入進 Sketch ，與設計內容進行關聯。
關於 Sketch 52 的這些新功能，在正式版釋出後我會寫一篇文章專門講解。現在，讓我們先大概感受一下：
相信等到正式版釋出後，體驗更好的新介面和實用的新功能可以讓我們的設計效率進一步提升。
五、一點建議：嘗試新的工作流程
在使用 PS、AI 做介面設計的時代，很多設計師會先做第一個元素，然後複製多份，再修改複製的內容。這樣的流程習慣一直延續到了 Sketch 時代。
而這種基於複製貼上的傳統方式，一旦設計圖發生改動，就需要浪費大量的時間去進行調整。
現在，有了 Sketch 元件這個新武器，如果在一開始就將可能會重複出現、產生改動的內容做成元件，將能為後續的設計工作節省大量的寶貴時間。
有時會聽到一些設計師抱怨，說工作又多又煩，週末好不容易休息一下，根本沒時間學新技能。但或許，不願意主動學習新技能，正是工作又多又煩的原因之一呢？
六、福利：送一個原始檔
最後，分享一份我做的用於演示 Sketch Symbol 功能的原始檔，包含聊天 App 會話列表、會話詳情兩個頁面的完整元件化示例，以及一個固定間距的 N宮格元件化示例。
原始檔： ofollow,noindex" target="_blank">https://pan.baidu.com/wap/init?surl=DQkcGY23kNPg_bAAvtLHbQ 密碼：2dt8
歡迎關注作者的微信公眾號：「燒燉」
