本篇對(duì)新手非常友好，我們的目標(biāo)是撥開(kāi)層層迷霧，如直男般硬核，看完就會(huì)用！

Libraries功能早在sketch 47的時(shí)候就已經(jīng)加入，但我當(dāng)時(shí)掃了眼官方的介紹感覺(jué)真是高深莫測(cè)，網(wǎng)絡(luò)資料也覺(jué)得有些繞就一直沒(méi)有去了解，只是在工作中用到了部分功能。

直到前幾天小伙伴問(wèn)我這個(gè)怎么用，趁著這個(gè)契機(jī)我才決心從頭學(xué)習(xí)它，今天就來(lái)和大家分享我建組件庫(kù)的過(guò)程和思路，希望和大家一起學(xué)習(xí)討論。

如果你也和我一樣，既想了解這個(gè)功能又覺(jué)得麻煩有些地方看不懂，不妨就先從本篇入門(mén)吧。

什么是Libraries

Libraries是幫助我們更方便使用組件的工具。先看一下如果不使用Libraries的時(shí)候是怎么解決這個(gè)問(wèn)題的。

我們可能會(huì)有一個(gè)專(zhuān)門(mén)的sketch文件，里面是各種各樣已經(jīng)確定下來(lái)的組件，需要用的時(shí)候，打開(kāi)這個(gè)文件復(fù)制粘貼到你要用的文件里。

其實(shí)這里我們離Libraries已經(jīng)不遠(yuǎn)了，因?yàn)長(zhǎng)ibrary的前身也是一個(gè)普通的sketch文件，只不過(guò)是把需要用到的圖標(biāo)、按鈕、文字等都預(yù)設(shè)整理成symbol，然后添加到sketch系統(tǒng)中。所以沒(méi)有想象中的麻煩，只需要加上幾步，就可以省去每次都打開(kāi)文件復(fù)制粘貼的步驟，隨時(shí)使用了。

下面就來(lái)看一下我們?cè)趺磥?lái)建立自己的組件庫(kù)吧。

如何使用

1.順序

第一步可以確定一下建立的順序，避免因?yàn)闆](méi)有規(guī)律而造成一些重復(fù)工作。

這里我們需要先考慮一下“顆粒度”的概念。大家應(yīng)該都玩過(guò)1024這個(gè)游戲，游戲里2合成4，4合成8，8合成16……，“2”就是這個(gè)游戲的最小顆粒度。

同樣在搭建自己的組件庫(kù)的時(shí)候，我們也應(yīng)該從最小的顆粒度入手，逐漸合成更高級(jí)的組件。比如我是從“顏色→圖標(biāo)→文字→按鈕→組件 ”，這樣當(dāng)你建按鈕的時(shí)候，就可以直接使用之前已經(jīng)建好的顏色和文字。

2.命名

命名按照自己的習(xí)慣中英文都可以，關(guān)鍵是整理時(shí)要有清晰的思路。從命名開(kāi)始，建立清晰的分組，以便之后的查找使用。這里是用“/”來(lái)分層級(jí)，比如“按鈕/主要操作/常態(tài)”。

3.建立

有了清晰的思路，就可以按照定好的順序逐步建立了。下面以顏色和圖標(biāo)來(lái)舉例。首先我們建立好顏色的symbol，如下圖。

接下來(lái)開(kāi)始建立是圖標(biāo)的，將圖標(biāo)圖層設(shè)置為蒙版后選擇插入顏色的symbol，這樣圖標(biāo)和顏色就發(fā)生了嵌套關(guān)系，切換圖標(biāo)的顏色非常方便。同樣如果修改了顏色，那么所有使用該顏色symbol的元素也會(huì)一起改變。

4.導(dǎo)入添加

準(zhǔn)備好文件后下一步是將文件導(dǎo)入，選擇sketch→preferences，中文是“偏好設(shè)置”。打開(kāi)后選擇Libraries→Add library，把文件添加進(jìn)入。

添加成功后新建一個(gè)文件看看成果吧。點(diǎn)擊symbols，找到我們剛才添加的文件就可以插入使用我們預(yù)設(shè)好的組件了，到這一步我們已經(jīng)完成了自己本地組件庫(kù)的建立和使用。

5.共享和同步

建好了自己的組件庫(kù)，也可以把它分享給別人，關(guān)于共享和同步有很多方法，比如……不過(guò)大多都有一些技術(shù)門(mén)檻，使用起來(lái)比較麻煩。

下面只介紹兩種我認(rèn)為操作簡(jiǎn)單、好控制，不需要過(guò)多設(shè)置和管理的方法，分別是：人工同步和sketch cloud 同步（個(gè)人覺(jué)得可以滿(mǎn)足多數(shù)使用需要了，對(duì)其它方法有興趣的小伙伴可以研究一下相關(guān)資料）。

· 人工同步

每次更新后的sketch文件發(fā)送給大家，由大家自己添加到Libraries，把舊文件刪除就可以了，雖然每次需要手動(dòng)添加刪除，但是這個(gè)方法不需要設(shè)置什么沒(méi)有技術(shù)門(mén)檻，對(duì)于更新不那么頻繁的中小團(tuán)隊(duì)使用沒(méi)什么問(wèn)題。

· Sketch Cloud 同步

這個(gè)方法是把sketch文件傳到Sketch Cloud，然后開(kāi)放該文檔或者分享給指定的人，接受分享的人將文件添加到Libraries，之后的更新Sketch就會(huì)自動(dòng)下載了，是比較方便的方法了。不過(guò)這相當(dāng)于把文件存在了云，需要注意信息安全，如果是保密的項(xiàng)目就需要評(píng)估一下是否使用了。

以上就是我建組件庫(kù)的過(guò)程和思路了，這也是我第一次系統(tǒng)的整理使用，希望和大家一起學(xué)習(xí)討論，如果有推薦的方法歡迎留言討論哦~

不少APP都選擇了較寫(xiě)實(shí)的圖標(biāo)。

劃重點(diǎn)

· 順序建立，從最小的顆粒度入手，逐漸合成更高級(jí)的組件。

· 建組件的時(shí)候要有清晰的思路。命名以“/”來(lái)分層級(jí)，建立清晰的分組。

作者： 焱小玖

公眾號(hào)：海鹽社