編輯導(dǎo)語：在日常開發(fā)過程中，構(gòu)建組件庫是必不可少的一環(huán)，原子設(shè)計(jì)就是可以解決搭建頁面的問題；本文作者分享了關(guān)于如何使用sketch搭建組件庫的方法以及過程，我們一起來看一下。

我分享了一篇原子設(shè)計(jì)的原創(chuàng)文章，里面詳細(xì)講述了Brad大師所創(chuàng)建的原子設(shè)計(jì)方法論，以及基于此所搭建的原子設(shè)計(jì)系統(tǒng)，同時(shí)還挖了個(gè)搭建組件庫的坑。

今天，讓我們從理論走向?qū)嵺`，來看看如何使用sketch搭建組件庫；整個(gè)講解過程我秉承著知行合一的精神親自實(shí)踐，但愿這種深入淺出的表達(dá)能為你帶來即時(shí)收獲。

一、為什么要用Sketch創(chuàng)建？

還記得在原子設(shè)計(jì)這篇文章中被我diss的“一次性設(shè)計(jì)”嗎？對(duì)，就是我今天產(chǎn)出的這個(gè)東西只用一次，下一次碰到新的類似的場(chǎng)景用不上它；就好像一次性碗筷，用完即仍，不僅僅沒有辦法復(fù)用，而且無體系、非模塊的處理方式也十分摧殘我們的精力。

原子設(shè)計(jì)解決的就是這個(gè)問題，基于原子產(chǎn)出的設(shè)計(jì)可以大大提升設(shè)計(jì)本身的復(fù)用率，只需要花費(fèi)很少的時(shí)間，就可以用組件迅速得搭建出一個(gè)頁面。

而sketch的核心大招——symbol功能，恰恰對(duì)應(yīng)了原子設(shè)計(jì)的理念，基于symbol創(chuàng)建的組件可以多個(gè)頁面復(fù)用，并且復(fù)用后的樣式可以基于定義的樣式庫自由改動(dòng)，而不影響symbol本身（后續(xù)所有翻譯都統(tǒng)稱symbol為組件）。

二、定義樣式

在創(chuàng)建組件之前，我們需要先定義styling（樣式）。

新版本的sketch中除了以往我們熟知的字符樣式和圖層樣式外，還新增了顏色變量這個(gè)新的功能，這個(gè)我們放后面著重說。

三、創(chuàng)建與復(fù)用一個(gè)樣式

1. 字符樣式

調(diào)整好一個(gè)字符后，通過新建即可將其定義到字符樣式庫，之后我們想對(duì)某些文本信息復(fù)用樣式，直接在外觀面板中調(diào)用（可以直接搜索對(duì)應(yīng)的字號(hào)，方便快捷）。

2. 圖層樣式

而我們所能定義的圖層樣式通?？梢园皹邮健泵姘逯兴械倪x項(xiàng)，填充、邊框、陰影、內(nèi)模糊及模糊這些樣式都可以定義到庫中；具體創(chuàng)建與調(diào)用方法和字符樣式一致，這里不細(xì)講。

3. 顏色變量

69版本新增了一個(gè)顏色變量的功能，這個(gè)顏色變量的神奇之處就在于，形狀和文字圖層都可以共用一個(gè)顏色，修改了顏色變量即可實(shí)現(xiàn)全局更新。

舉個(gè)栗子，我想把這這倆按鈕換個(gè)顏色：

在以往，我們需要在fill（填充）、border（邊框）和text（字符）三個(gè)地方進(jìn)行修改，才可以全部更換。

但是如果我們使用顏色變量，那就可以一鍵修改。

如何使用顏色變量？還是這個(gè)按鈕的例子。

首先，我們給主色創(chuàng)建一個(gè)顏色變量，創(chuàng)建好會(huì)它會(huì)自動(dòng)在顏色變量面板中生成。

之后，確保我們的對(duì)象都使用了顏色變量（色板icon處于激活狀態(tài)就是正在使用）。

之后，我們只需要在變量中一鍵修改，即可迅速實(shí)現(xiàn)文本、填充和線框的全局迭代，非常非常得方便。（是不是有點(diǎn)像ai的重新著色？）

當(dāng)然，如果你是想替換別的顏色，cmd+shift+F即可實(shí)現(xiàn)一鍵替換。（感覺更接近原子設(shè)計(jì)了）

4. 顏色變量的劣勢(shì)

可惜的是，覆蓋層目前依然僅支持圖層樣式和字符樣式，而沒有顏色變量的選項(xiàng)，你沒有辦法直接在組件中更換變量；也就是說，我想在頁面中添加一個(gè)新顏色的按鈕，那只能通過增加新的symbol來實(shí)現(xiàn)，這無疑增加了維護(hù)、迭代的難度。

所以，在sketch對(duì)顏色變量有所行動(dòng)之前，我建議組件庫依舊使用圖層樣式來搭建顏色庫。

四、創(chuàng)建一個(gè)組件

比如我們要?jiǎng)?chuàng)建一個(gè)按鈕，直接在頂部工具欄點(diǎn)選“創(chuàng)建組件”這個(gè)紫色菱形icon。（舊版sketch是個(gè)環(huán)狀加載icon）

默認(rèn)選擇的“發(fā)送組件到組件頁面”是指，你創(chuàng)建的這個(gè)組件不僅僅反映在當(dāng)前的圖層中，同時(shí)將生成一個(gè)Symbol Source（后面統(tǒng)一翻譯為源組件）反映在組件頁面中。

五、調(diào)用一個(gè)組件

如果我們?cè)谝粋€(gè)頁面中想復(fù)用到這個(gè)按鈕，可以在菜單欄或者工具欄中直接調(diào)用。

不過一旦組件過多，查找某個(gè)組件其實(shí)是相當(dāng)吃力的，不過！sketch在69版本推出了一個(gè)“組件視圖”功能，在這個(gè)可視化的宮格視圖下，你可以迅速找到你需要的組件。選中后右鍵點(diǎn)擊置入即可實(shí)現(xiàn)調(diào)用。

但是，這些并非最快捷的調(diào)用方法。

還記得mac的“spotlight（聚焦搜索）”嗎？自從習(xí)慣了聚焦搜索，我很久沒有再去訪達(dá)的文件夾手動(dòng)找東西了；可以說這是mac系統(tǒng)得以高效辦公的一個(gè)精髓所在，你幾乎不需要在“找東西”上花費(fèi)任何精力。

sketch大概是吸收到了spotlight的創(chuàng)意，在69版本中同時(shí)上線了“Insert Menu（插入菜單）”的功能。只需要按下快捷鍵C，即可呼出一個(gè)面板。

面板采用了和組件視圖一致的更易辨識(shí)和區(qū)分的宮格布局。你可以通過側(cè)邊導(dǎo)航或者全局搜索迅速定位到你想要的組件，拖拽或者雙擊即可實(shí)現(xiàn)迅速調(diào)用??！最高效、也最推薦的調(diào)用方法，沒有之一。

六、編輯一個(gè)組件

1. 我對(duì)組件本身有意見

對(duì)組件本身有意見可以理解為想在源頭修改，即修改源組件。

可以雙擊圖層中的組件or組件視圖中的組件，進(jìn)入組件頁面編輯。當(dāng)對(duì)源組件進(jìn)行編輯后，所有已經(jīng)復(fù)用好的組件都會(huì)跟隨變化。

2. 我對(duì)組件樣式有意見

如果僅僅是樣式的問題，那就很好辦了。

我們只需要在右側(cè)的Overrides（覆蓋層）面板中替換成我們想要的樣式即可，這些樣式來自我們之前對(duì)顏色、文本樣式的預(yù)先定義；我們只是改動(dòng)原子，所以并不會(huì)影響到源組件本身。

七、替換一個(gè)組件

組件選擇器中選擇即可，不用多說（如果組件存在嵌套，則覆蓋層也可以進(jìn)行子組件的替換）。

八、管理一群組件

當(dāng)你想要對(duì)一些事物進(jìn)行高效管理時(shí)，分組是最關(guān)鍵的手段之一。

而sketch的symbol可以通過格式化的命名來高效得編組管理。

sketch獨(dú)特的命名格式是：xxx/…/xxx

“/”這個(gè)符號(hào)可以實(shí)現(xiàn)父子集的劃分，/之前的內(nèi)容是/之后內(nèi)容的父級(jí)，一次“/”即可實(shí)現(xiàn)一次編組，可以進(jìn)行嵌套。

比如這四種不同的按鈕組件，就可以在各自名稱前加入“按鈕/”來將它們統(tǒng)一歸納到“按鈕“組中。

但是，一旦組件多起來，一個(gè)個(gè)的命名編組是一件非常痛苦的事情。

沒事，我們神奇的69版本又一次解決了這個(gè)痛點(diǎn)。

現(xiàn)在，我們不需要在把精力花費(fèi)在這些沒有技術(shù)含量的重復(fù)勞動(dòng)力上面，只需要不斷得創(chuàng)造它們，然后ctrl+G，Duang~Duang~，完美解決；而且也支持通過解組、拖曳來實(shí)現(xiàn)編組的調(diào)整。

九、嵌套一個(gè)組件

我在之前的原子設(shè)計(jì)文章中提到，原子設(shè)計(jì)的核心就在于它以原子、分子、組織、模板和界面這五個(gè)層級(jí)為基礎(chǔ)，來一步步得進(jìn)行搭建。

而其中原子到分子、分子到組織、組織到模板的過程就屬于嵌套。落實(shí)到組件庫中，主要對(duì)應(yīng)著原子到分子的嵌套。

下面這個(gè)按鈕就是典型的一個(gè)嵌套行為。我們希望這種文字+icon形式的按鈕能夠?qū)崿F(xiàn)形狀、圖標(biāo)的自由搭配；因此提前將各個(gè)形狀和圖標(biāo)作為原子制定好symbol，然后再嵌套成為一個(gè)新的分子組件。

嵌套過程也很簡(jiǎn)單，我們只需要選中原子（形狀組件、圖標(biāo)組件和文本），進(jìn)行二次創(chuàng)建即可。

最后，我們可以在覆蓋層自由得配置原子。

僅僅改動(dòng)icon和形狀就能適配到不同的場(chǎng)景。即便后面業(yè)務(wù)有新的類似的功能需求，我們只需要在組件庫中增加icon、形狀即可。

不過，如果我們僅僅負(fù)責(zé)建立組件，而不考慮組件內(nèi)容發(fā)生變化后的動(dòng)態(tài)自適應(yīng)和響應(yīng)式是遠(yuǎn)遠(yuǎn)不夠的。這部分相對(duì)比較難懂，我單獨(dú)放在了下兩篇進(jìn)行講解。

十、最后

sketch搭建組件庫的上篇就此結(jié)束，很多地方會(huì)涉及到sketch69版本上線的新功能，暫未更新的童鞋強(qiáng)烈建議去升級(jí)下版本，你會(huì)切實(shí)感受到不為工具所累的爽快感。

但愿這篇文章對(duì)你有所幫助。

作者：Andrewchen；微信公眾號(hào)：轉(zhuǎn)行人的設(shè)計(jì)筆記

本文由 @Andrewchen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。