起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何以Sketch創建組件庫——Styling與Symbol應用
編輯導語：在日常開發過程中，構建組件庫是必不可少的一環，原子設計就是可以解決搭建頁面的問題；本文作者分享了關于如何使用sketch搭建組件庫的方法以及過程，我們一起來看一下。
我分享了一篇原子設計的原創文章，里面詳細講述了Brad大師所創建的原子設計方法論，以及基于此所搭建的原子設計系統，同時還挖了個搭建組件庫的坑。
今天，讓我們從理論走向實踐，來看看如何使用sketch搭建組件庫；整個講解過程我秉承著知行合一的精神親自實踐，但愿這種深入淺出的表達能為你帶來即時收獲。
一、為什么要用Sketch創建？
還記得在原子設計這篇文章中被我diss的“一次性設計”嗎？對，就是我今天產出的這個東西只用一次，下一次碰到新的類似的場景用不上它；就好像一次性碗筷，用完即仍，不僅僅沒有辦法復用，而且無體系、非模塊的處理方式也十分摧殘我們的精力。
原子設計解決的就是這個問題，基于原子產出的設計可以大大提升設計本身的復用率，只需要花費很少的時間，就可以用組件迅速得搭建出一個頁面。
而sketch的核心大招——symbol功能，恰恰對應了原子設計的理念，基于symbol創建的組件可以多個頁面復用，并且復用后的樣式可以基于定義的樣式庫自由改動，而不影響symbol本身（后續所有翻譯都統稱symbol為組件）。
二、定義樣式
在創建組件之前，我們需要先定義styling（樣式）。
新版本的sketch中除了以往我們熟知的字符樣式和圖層樣式外，還新增了顏色變量這個新的功能，這個我們放后面著重說。
三、創建與復用一個樣式
1. 字符樣式
調整好一個字符后，通過新建即可將其定義到字符樣式庫，之后我們想對某些文本信息復用樣式，直接在外觀面板中調用（可以直接搜索對應的字號，方便快捷）。
2. 圖層樣式
而我們所能定義的圖層樣式通常可以包含“樣式”面板中所有的選項，填充、邊框、陰影、內模糊及模糊這些樣式都可以定義到庫中；具體創建與調用方法和字符樣式一致，這里不細講。
3. 顏色變量
69版本新增了一個顏色變量的功能，這個顏色變量的神奇之處就在于，形狀和文字圖層都可以共用一個顏色，修改了顏色變量即可實現全局更新。
舉個栗子，我想把這這倆按鈕換個顏色：
在以往，我們需要在fill（填充）、border（邊框）和text（字符）三個地方進行修改，才可以全部更換。
但是如果我們使用顏色變量，那就可以一鍵修改。
如何使用顏色變量？還是這個按鈕的例子。
首先，我們給主色創建一個顏色變量，創建好會它會自動在顏色變量面板中生成。
之后，確保我們的對象都使用了顏色變量（色板icon處于激活狀態就是正在使用）。
之后，我們只需要在變量中一鍵修改，即可迅速實現文本、填充和線框的全局迭代，非常非常得方便。（是不是有點像ai的重新著色？）
當然，如果你是想替換別的顏色，cmd+shift+F即可實現一鍵替換。（感覺更接近原子設計了）
4. 顏色變量的劣勢
可惜的是，覆蓋層目前依然僅支持圖層樣式和字符樣式，而沒有顏色變量的選項，你沒有辦法直接在組件中更換變量；也就是說，我想在頁面中添加一個新顏色的按鈕，那只能通過增加新的symbol來實現，這無疑增加了維護、迭代的難度。
所以，在sketch對顏色變量有所行動之前，我建議組件庫依舊使用圖層樣式來搭建顏色庫。
四、創建一個組件
比如我們要創建一個按鈕，直接在頂部工具欄點選“創建組件”這個紫色菱形icon。（舊版sketch是個環狀加載icon）
默認選擇的“發送組件到組件頁面”是指，你創建的這個組件不僅僅反映在當前的圖層中，同時將生成一個Symbol Source（后面統一翻譯為源組件）反映在組件頁面中。
五、調用一個組件
如果我們在一個頁面中想復用到這個按鈕，可以在菜單欄或者工具欄中直接調用。
不過一旦組件過多，查找某個組件其實是相當吃力的，不過！sketch在69版本推出了一個“組件視圖”功能，在這個可視化的宮格視圖下，你可以迅速找到你需要的組件。選中后右鍵點擊置入即可實現調用。
但是，這些并非最快捷的調用方法。
還記得mac的“spotlight（聚焦搜索）”嗎？自從習慣了聚焦搜索，我很久沒有再去訪達的文件夾手動找東西了；可以說這是mac系統得以高效辦公的一個精髓所在，你幾乎不需要在“找東西”上花費任何精力。
sketch大概是吸收到了spotlight的創意，在69版本中同時上線了“Insert Menu（插入菜單）”的功能。只需要按下快捷鍵C，即可呼出一個面板。
面板采用了和組件視圖一致的更易辨識和區分的宮格布局。你可以通過側邊導航或者全局搜索迅速定位到你想要的組件，拖拽或者雙擊即可實現迅速調用！！最高效、也最推薦的調用方法，沒有之一。
六、編輯一個組件
1. 我對組件本身有意見
對組件本身有意見可以理解為想在源頭修改，即修改源組件。
可以雙擊圖層中的組件or組件視圖中的組件，進入組件頁面編輯。當對源組件進行編輯后，所有已經復用好的組件都會跟隨變化。
2. 我對組件樣式有意見
如果僅僅是樣式的問題，那就很好辦了。
我們只需要在右側的Overrides（覆蓋層）面板中替換成我們想要的樣式即可，這些樣式來自我們之前對顏色、文本樣式的預先定義；我們只是改動原子，所以并不會影響到源組件本身。
七、替換一個組件
組件選擇器中選擇即可，不用多說（如果組件存在嵌套，則覆蓋層也可以進行子組件的替換）。
八、管理一群組件
當你想要對一些事物進行高效管理時，分組是最關鍵的手段之一。
而sketch的symbol可以通過格式化的命名來高效得編組管理。
sketch獨特的命名格式是：xxx/…/xxx
“/”這個符號可以實現父子集的劃分，/之前的內容是/之后內容的父級，一次“/”即可實現一次編組，可以進行嵌套。
比如這四種不同的按鈕組件，就可以在各自名稱前加入“按鈕/”來將它們統一歸納到“按鈕“組中。
但是，一旦組件多起來，一個個的命名編組是一件非常痛苦的事情。
沒事，我們神奇的69版本又一次解決了這個痛點。
現在，我們不需要在把精力花費在這些沒有技術含量的重復勞動力上面，只需要不斷得創造它們，然后ctrl+G，Duang~Duang~，完美解決；而且也支持通過解組、拖曳來實現編組的調整。
九、嵌套一個組件
我在之前的原子設計文章中提到，原子設計的核心就在于它以原子、分子、組織、模板和界面這五個層級為基礎，來一步步得進行搭建。
而其中原子到分子、分子到組織、組織到模板的過程就屬于嵌套。落實到組件庫中，主要對應著原子到分子的嵌套。
下面這個按鈕就是典型的一個嵌套行為。我們希望這種文字+icon形式的按鈕能夠實現形狀、圖標的自由搭配；因此提前將各個形狀和圖標作為原子制定好symbol，然后再嵌套成為一個新的分子組件。
嵌套過程也很簡單，我們只需要選中原子（形狀組件、圖標組件和文本），進行二次創建即可。
最后，我們可以在覆蓋層自由得配置原子。
僅僅改動icon和形狀就能適配到不同的場景。即便后面業務有新的類似的功能需求，我們只需要在組件庫中增加icon、形狀即可。
不過，如果我們僅僅負責建立組件，而不考慮組件內容發生變化后的動態自適應和響應式是遠遠不夠的。這部分相對比較難懂，我單獨放在了下兩篇進行講解。
十、最后
sketch搭建組件庫的上篇就此結束，很多地方會涉及到sketch69版本上線的新功能，暫未更新的童鞋強烈建議去升級下版本，你會切實感受到不為工具所累的爽快感。
但愿這篇文章對你有所幫助。
作者：Andrewchen；微信公眾號：轉行人的設計筆記
本文由 @Andrewchen 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
后兩篇在哪里呀
贊！滿滿干貨，期待后兩篇！