通過這套簡短但內(nèi)容豐富的教程系列，我將向您展示如何建立一個功能強(qiáng)大的多功能設(shè)計入門套件的堅實(shí)基礎(chǔ)，讓您在Figma中快速啟動下一個項目。

盯著空白畫布發(fā)呆綜合癥（S. B. C. S. S. ）一去不復(fù)返了!

PS: 如果您想了解更多信息，請查看本教程系列的第一部分。

好了，我們開始吧..... 

圖標(biāo)！圖標(biāo)！圖標(biāo)！一個好的入門套件需要圖標(biāo)!

每一個好的設(shè)計入門套件都需要一套好的圖標(biāo)，從一開始就需要一個好的圖標(biāo)!

正如我在第一部分提到的那樣，一個強(qiáng)大的入門套件的核心要素是

顏色

排版

立面和陰影

圖標(biāo)

其他的核心組件，如按鈕、輸入、模態(tài)等...........都是緊隨其后，我將在第三部分中更多的介紹。

為你的初始構(gòu)建找到一個輕量級的，但變化多端的圖標(biāo)集。

對于我自己的入門套件；Figma的Cabana，我希望有一個相當(dāng)可觀的、但不是超大的圖標(biāo)集。

我的目標(biāo)是要有不同數(shù)量的圖標(biāo)供我選擇，在風(fēng)格上不會太奇特，并且有填充和線條選項，這就是為什么我選擇了Eva這個開放源碼的超棒的套裝。

當(dāng)然，由于你所做的項目，以及你所提供的資產(chǎn)，圖標(biāo)集很可能會在某些時候發(fā)生變化，但對于一個普通的Vanilla圖標(biāo)集來說，它可以讓你在個人項目中使用，或者是早期的comps，像Eva這樣的圖標(biāo)集就很完美。

哦。在我們進(jìn)入最后一節(jié)之前。另一個我強(qiáng)烈推薦的開源圖標(biāo)集，也是我過去用過很多次的一個，是Cole Bemis的美麗的Feather Icon Set。

你不喜歡Eva Icons嗎？那你就去找Feather吧 不接受任何替代品！

想更好地組織你的圖標(biāo)？馬上為自己準(zhǔn)備一個圖標(biāo)整理器吧!

當(dāng)我把圖標(biāo)添加到我自己的工具包時，我的首選武器是IconJar。已經(jīng)使用它多年了。它就是好用，而且效果很好。非常推薦它。

從他們的介紹中可以看出…..

IconJar讓你不用再去翻閱設(shè)計資源文件夾，這樣你就可以輕松地使用圖標(biāo)了。你的個人圖標(biāo)組織者總是只需輕輕一按，就能為你提供完成工作所需的一切。

IconJar只適用于Mac，但如果你是Windows用戶也不要絕望，你還有Nucleo，這是我強(qiáng)烈推薦的另一款應(yīng)用。

警告.....

Nucleo是一個由29689個圖標(biāo)組成的漂亮的圖標(biāo)庫，也是一個收集、自定義和導(dǎo)出所有圖標(biāo)的強(qiáng)大應(yīng)用。

回到我的工具包中，在我之前創(chuàng)建的主組件頁面上，我簡單地把Eva圖標(biāo)集中的圖標(biāo)一個一個地放進(jìn)去。

IconJar最酷的地方在于，它可以在插入圖標(biāo)的時候，將已經(jīng)應(yīng)用了24pt的Bounding Box，這有助于在你的設(shè)計中保持對齊和視覺上的一致性。

然后，就把我之前制作的主基色風(fēng)格貼在上面......

............選擇一個命名慣例來幫助我的圖標(biāo)分類（類似于我在第一部分中創(chuàng)建的圖標(biāo)）......

圖標(biāo)/警示圈/填充

圖標(biāo)/警示圈/線

...然后簡單地將其轉(zhuǎn)換為組件（Alt + Cmd + K）。

現(xiàn)在，這部分似乎有點(diǎn)費(fèi)時，并進(jìn)入世俗的領(lǐng)域，但我還沒有找到一個Figma插件，可以幫助自動化這個過程的某種方式，所以手動它是暫時的。

我以前說過，借助Grayskull的力量（80年代的老電視參考），我再說一遍...........把關(guān)鍵的元素準(zhǔn)備好，有時會很費(fèi)時，也很世俗，然后你就可以進(jìn)入下一部分的入門套件中更多的內(nèi)容了。

第二部分（完）

第一部分：如何在Figma中構(gòu)建ui設(shè)計入門套件（第一部分）