如何在Figma中构建ui设计入门套件（第二部分）

通过这套简短但内容丰富的教程系列，我将向您展示如何建立一个功能强大的多功能设计入门套件的坚实基础，让您在Figma中快速启动下一个项目。

盯着空白画布发呆综合症（S. B. C. S. S. ）一去不复返了!

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

好了，我们开始吧..... 

图标！图标！图标！一个好的入门套件需要图标!

每一个好的设计入门套件都需要一套好的图标，从一开始就需要一个好的图标!

正如我在第一部分提到的那样，一个强大的入门套件的核心要素是

颜色

排版

立面和阴影

图标

其他的核心组件，如按钮、输入、模态等...........都是紧随其后，我将在第三部分中更多的介绍。

为你的初始构建找到一个轻量级的，但变化多端的图标集。

对于我自己的入门套件；Figma的Cabana，我希望有一个相当可观的、但不是超大的图标集。

我的目标是要有不同数量的图标供我选择，在风格上不会太奇特，并且有填充和线条选项，这就是为什么我选择了Eva这个开放源码的超棒的套装。

当然，由于你所做的项目，以及你所提供的资产，图标集很可能会在某些时候发生变化，但对于一个普通的Vanilla图标集来说，它可以让你在个人项目中使用，或者是早期的comps，像Eva这样的图标集就很完美。

哦。在我们进入最后一节之前。另一个我强烈推荐的开源图标集，也是我过去用过很多次的一个，是Cole Bemis的美丽的Feather Icon Set。

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

想更好地组织你的图标？马上为自己准备一个图标整理器吧!

当我把图标添加到我自己的工具包时，我的首选武器是IconJar。已经使用它多年了。它就是好用，而且效果很好。非常推荐它。

从他们的介绍中可以看出…..

IconJar让你不用再去翻阅设计资源文件夹，这样你就可以轻松地使用图标了。你的个人图标组织者总是只需轻轻一按，就能为你提供完成工作所需的一切。

IconJar只适用于Mac，但如果你是Windows用户也不要绝望，你还有Nucleo，这是我强烈推荐的另一款应用。

警告.....

Nucleo是一个由29689个图标组成的漂亮的图标库，也是一个收集、自定义和导出所有图标的强大应用。

回到我的工具包中，在我之前创建的主组件页面上，我简单地把Eva图标集中的图标一个一个地放进去。

IconJar最酷的地方在于，它可以在插入图标的时候，将已经应用了24pt的Bounding Box，这有助于在你的设计中保持对齐和视觉上的一致性。

然后，就把我之前制作的主基色风格贴在上面......

............选择一个命名惯例来帮助我的图标分类（类似于我在第一部分中创建的图标）......

图标/警示圈/填充

图标/警示圈/线

...然后简单地将其转换为组件（Alt + Cmd + K）。

现在，这部分似乎有点费时，并进入世俗的领域，但我还没有找到一个Figma插件，可以帮助自动化这个过程的某种方式，所以手动它是暂时的。

我以前说过，借助Grayskull的力量（80年代的老电视参考），我再说一遍...........把关键的元素准备好，有时会很费时，也很世俗，然后你就可以进入下一部分的入门套件中更多的内容了。

第二部分（完）

第一部分：如何在Figma中构建ui设计入门套件（第一部分）