這是一篇 Sketch 進階教程，讓你學會利用 Symbol 建立一套設計規範組件庫。
文章目錄為保證更好地理解文章內容，你需要對以下知識點有一定的了解（部分內容已附註釋）。
1. Text style ¹
△ 圖片來自Sketch手冊
在設計包含大量文本的界面時，許多圖層擁有相同的文本屬性。將它們保存為 Text Style，即可復用這些文本屬性，無需逐一設置。
Text Style 用於設置文字規範，涵蓋字體、字號、字重、顏色、字間距、行高² 、段間距等內容。
¹ Text Style：https://sketchapp.com/docs/text/text-styles
² 行高：參考知乎專欄《聊一聊 Sketch 與 iOS 文字的行高》
2. Layer style ³
△ 圖片來自Sketch手冊
將一組風格元素保存為 Layer Style，這些元素便可復用在文檔中的任何圖層。
Layer Style 用於製作顏色規範，涵蓋填充顏色、描邊顏色、內外陰影、模糊效果等內容。
³ Layer Style：https://sketchapp.com/docs/styling/shared-styles
3. Symbol ⁴
△ 圖片來自Sketch手冊
作為 Sketch 的一項主打功能，Symbol 可以在畫板、頁面甚至其他 Sketch 文件中復用。Sketch 52 後，新功能令 Symbol 更加靈活化、輕量化。
△ Symbol替換
⁴ Symbol：https://sketchapp.com/docs/symbols
4. 英文命名
之所以使用英文命名組件，有以下幾點原因：
方便設計師後期修改、整理文件
團隊內部易達成共識，方便協作
節約開發成本，減少不必要的溝通與重新切圖情況
5. 組件庫的構建思路
建立組件庫之前，先來談談構建思路：解構、拆分、重構。
「 解構 」
通用類設計規範包含：基礎規範、圖標規範、組件規範，第一步，將這三類規範一一解構。例：基礎規範解構為文字規範、顏色規範、布局規範…
「 拆分 」
將解構後的規範拆分為最基本的元素 Symbol，基礎規範與圖標規範到這一步就完成了。例：文字規範中，拆分為標題、副標題、正文、輔助文字、標籤文字…
「 重構 」
重構或稱為 Symbol 嵌套⁵ 。用於製作組件規範，將拆分後的元素 Symbol 組合為模塊 Symbol，再將模塊 Symbol 組合為組件 Symbol。
⁵ Symbol嵌套：https://sketchapp.com/docs/symbols/nested-symbols
6. 利用Symbol組件庫建立設計規範
其實，一套優秀的Symbol組件庫 = 一套簡潔易用的設計規範。組件庫中不僅涵蓋了常用組件，同時也包含 Text Style 與 Layer Style，三者共同組成了一套設計規範。
先來看看優秀的 Symbol 組件庫（常用組件規範）是什麼樣子的：
圖示內容為 Ant Design 團隊出品的 Web 端組件庫⁶ ，使用 Symbol Manager 插件預覽。
⁶ Ant.Design.Components.Beta.3.10.5.sketch：https://ant.design/docs/spec/download-cn
根據上文的思路，我們將基礎規範、圖標規範、組件規範解構並將部分拆分為基礎元素，得出以下內容：
基礎規範1. 文字規範（創建為Text Style）
↳ 標題（Titile）
↳ 副標題（Subtitile）
↳ 正文（Body）
↳ 次要文字（Secondary）
↳ 標籤文字（Tags）
2. 顏色規範（創建為Layer Style）
3. 布局規範
4. 標籤規範
↳ ……
5. 其他樣式
↳ 圓角規範（Radius）
↳ 陰影規範（Shadows）
↳ ……
基礎規範中的主要內容為文字規範與顏色規範，將文字規範中的元素創建為 Text Style，顏色規範中的元素分類後創建為 Layer Style，其他元素根據不同情況進行調整即可。
圖標規範圖標規範中，可根據圖標尺寸、業務場景、圖標功能等進行層級區分，筆者根據圖標尺寸來區分層級（暫不考慮最小可交互區域）：
在製作圖標規範時，需要根據設計師自身情況作出相應調整。但在設計圖標時，以下幾點是共通的：
「 構成簡單 」
根據簡潔法則我們知道，簡潔圖形的識別需要用戶最少的認知和努力。對於通用規範中的圖標來說，儘可能的簡潔以保證用戶的辨識度。當然，像 TabBar、金剛區等特殊區域的圖標，需要我們在工作中單獨設計。
「 視覺尺寸統一 」
使用圖標盒子作為設計時的參照，保證整套圖標在視覺大小上的統一。當然圖標盒子並不是一個定死的數值，日常工作中需要根據圖標形狀進行微調。
「 像素對齊 」
對齊像素網格，路徑錨點的位置使用整數，避免虛邊情況的發生。
在 Sketch 中，可以通過打開像素模式或使用自動對齊像素功能來進行像素對齊。
「 使用偶數 」
適配原因，尤其在@2x的情況下作圖時需格外注意。
「 矢量形狀 」
使用 Convert to Outlines 與布爾運算功能，將圖標轉化為矢量形狀。
TIPS：在矢量形狀上套用 Layer Style 中的任意顏色，在之後的 Symbol 嵌套中就可以更改圖標的顏色了。
組件規範由於篇幅有限，本文只介紹通用類組件，解構並歸類後，得出以下內容（設計師可以根據項目情況自行補充）
但僅僅解構分類是不夠的，想要完成一整套 Symbol 組件庫，還需要將解構後的組件拆分為單獨的元素 Symbol，以方便嵌套並組成 Symbol 組件。
篇幅有限，我們通過 List 組件舉例分析：
同上文製作 Symbol 組件庫的思路一樣，對於單一組件，同樣運用解構 → 拆分 → 重構的思路。不同的是，單一組件需要考慮到組件的不同形式 / 狀態。
「 解構為模塊 」
將 List 模塊化解構，得到 背景 Background、分割線 Divider、左側內容 Left、右側內容 Right
「 拆分為元素 」
左、右兩側內容還可以繼續拆分，得到 圖標 Icon、標題 Title、文字 Text、箭頭 Arrow
「 添加其他形式 / 狀態 」
僅涵蓋一種形式 / 狀態並不能稱之為完整的規範，我們需要考慮到List常見的所有形式
如圖，分割線的各種狀態，左右側內容的各種形式都需要考慮在內。對比前文拆分的結果，去除重複項，你會發現多出了一個開關 Switch 元素（Arrow、Check屬於Icon類），把它加入列表，就得到了構成 List 組件的所有元素 Symbol。
是不是有點眼熟？沒錯，這些元素 Symbol 正是基礎規範與圖標規範中的內容。
「 Symbol嵌套（重構）」
反向進行上面三步的思路，進行 Symbol 嵌套：首先將最基礎的元素 Symbol 組合成模塊化 Symbol，然後將模塊化 Symbol 組合成為 List 組件。
由於使用了 Symbol 嵌套，所以最後組合而成的 List 組件可以在右側的 Overrides 中進行各個模塊與元素的設置。
重複利用解構為模塊、拆分為元素、添加狀態/形式、重構（元素 Symbol → 模塊 Symbol → 組件 Symbol）這 4 個步驟，完成組件規範列表中的所有組件，這套利用了 Symbol 功能製作的通用規範組件庫就完成了。
寫在後面1. 如何將Symbol組件庫運用在設計稿中？
將製作好的 Symbol 組件庫保存為 .sketch 文件，在 Sketch 上方菜單中找到：Sketch—Preferences—Libraries 中，點擊下方 Add Library… 按鈕，將 .sketch 文件導入即可。
2. 如何規範化管理Symbol組件庫？
當 Symbol 名稱中存在 「 / 」 符號時，Sketch 會將他們作為組獨立對待。舉個慄子：兩個 Symbol，一個名為 「 Button / normal 」，另一個名為 「 Button / pressed 」，這兩個 Symbol 將被歸類在 Buttom 分組中。
當然，也可以使用 Sketch Manager⁷ 插件來幫助你規範化管理你的 Symbol。
⁷ Symbols Manager插件：http://sketch.cm/plugins/114
相對於 Sketch 那死板的修改名稱管理 Symbol 組件庫的方法，Symbols Manager插件能夠以類似Finder的形式來幫助你查看、修改、刪除你的組件庫。當然，9.99 刀買斷的價格、加上只有搭梯子才能正常使用的限制也許會讓你望而卻步。
然而我們相信，正版意識、英文化組件管理、以及為優秀內容付費的概念會慢慢滲透到每個設計師的潛意識當中。
3. 如何令Symbol組件更加靈活？
Resizing 智能縮放是 Sketch 39 中加入的新功能，有多智能呢？
看看 Sketch 官方的答案 https://sketchapp.com/docs/layer-basics/constraints
如何在 Symbol 組件庫中運用呢？舉個慄子：
可運用 Resizing 的類似組件還有很多，在製作 Symbol 組件庫中稍加留意，就能讓你的 Symbol 更加的靈活易用。
4. Symbol的拓展使用
Humaaans 是由 Pablo Stanley 提供的可免費用於商業或個人的插畫圖庫。你可以替換人物的髮型、膚色、上衣、褲子、鞋子…也可以旋轉各元素的方向，再添加一點氛圍，它便是能適用於各種場合的插圖。
△ 內容來自網絡，官網連結 https://www.humaaans.com/
Avataaars 同樣是來自 Pablo Stanley 的可免費用於商業或個人的頭像素材庫，頭像中的任何元素都可以 DIY 組合，包含頭像、鬍子、眼睛、眼鏡、臉部以及膚色均可自由搭配。（內容來自網絡，官網連結 https://avataaars.com/）
最後，希望設計師在建立 Symbol 組件庫的過程中，得到的不僅是設計效率的提升，還有其他各個方面的知識儲備與能力提升。