Figma教程 (Figma Tutorial)

With this short, but informative Tutorial Series I aim to show you how to build the solid foundations of a powerful, and versatile Design Starter Kit, enabling you to start your next project in Figma faster than ever before.

通过这个简短但内容丰富的教程系列，我旨在向您展示如何构建功能强大且用途广泛的Design Starter Kit的坚实基础，从而使您能够以前所未有的速度启动Figma中的下一个项目。

Staring at a Blank Canvas Syndrome (S. B. C. S.) be gone!

盯着空白的画布综合症 (SBCS)消失了！

PS: If you want to get up to speed, check out Part One of this Tutorial Series here.

PS： 如果您想起步快，请 在此处查看 本教程系列的第1部分 。

Ok. Let’s do this…

好。 我们开工吧…

图标。 图标。 一个好的入门工具包需要图标！ (Icons. Icons. A good Starter Kit needs Icons!)

Every good Design Starter Kit needs a great set of Icons right from the get-go!

每个优秀的设计入门套件从一开始就需要大量的图标！

Like I mentioned in Part One, the core elements of a powerful Starter Kit are -

就像我在第一部分中提到的那样，功能强大的入门套件的核心要素是-

• Colors

  色彩

• Typography

  版式

• Elevations & Shadows

  高程与阴影

• Icons

  图示

Other Core Components such as a Buttons, Inputs, Modals etc… are a close second, and I’ll be touching more on these in Part Three.

其他核心组件，如按钮 ， 输入 ， 模态等……紧随其后 ，在第三部分中，我将详细介绍这些组件。

为您的初始构建找到轻巧但多样的图标集 (Find a lightweight, but varied Icon Set for your initial build)

For my own Starter Kit; Cabana for Figma, I wanted a fairly substantial, but not oversized Icon Set.

对于我自己的入门套件； Figma的Cabana ，我想要一个相当坚固但不大的Icon Set。

I aimed for something that had a varied amount of icons to choose from, was not too quirky in its style, oh and had both Fill and Line options available to me, and that’s why I settled on the superb Open Source set; Eva.

我的目标是要有各种各样的图标可供选择，并且样式不太古怪，哦，并且我可以同时使用“ 填充”和“ 行”选项，这就是为什么我选择了出色的开放源码集的原因； 伊娃

Of course, the Icon Set will most probably change at some point due to the project you’re working on, and the assets you’ve been provided, but for a plain ol’ Vanilla Icon Set that is there for you to use on say, personal projects, or early stage comps, a set like Eva is perfect.

当然，由于您正在进行的项目和提供的资产，图标集很可能会在某些时候发生变化，但是对于普通的香草图标集，您可以在其中使用，个人项目或早期演出，像Eva这样的组合是完美的。

Oh. Before we move onto the last section. Another Open Source Icon Set that I highly recommend, and one that I’ve used many times in the past, is the beautiful Feather Icon Set by Cole Bemis.

哦。 在我们进入最后一部分之前。 我强烈推荐的另一个开源图标集是Cole Bemis编写的漂亮的Feather Icon Set ，它是我过去多次使用的。

Eva not your thang? Go with Feather. Accept no substitutes!

伊娃不是你的唐吗？ 和羽毛一起去。 不接受替代品！

想要更好地组织您的图标？ 让自己成为Icon Organizer的代言人！ (Want to organize your Icons better? Get yourself an Icon Organizer pronto!)

My weapon of choice when adding Icons to my own Kit is IconJar. Have used it for years. It just works, and works well. Cannot recommend it enough.

将图标添加到我自己的工具包中时，我选择的武器是IconJar 。 已经使用了多年。 它只是工作，而且效果很好。 推荐不够。

From their blurb…

从他们的迷糊…

IconJar leaves digging through your design resources folders behind so you can use icons without hassle. Your personal icon organizer is always just one click away and offers you everything you need to get the job done.

IconJar会在后面浏览设计资源文件夹，因此您可以轻松使用图标。 您的个人图标组织者总是一键之遥，并且为您提供完成工作所需的一切。

IconJar is Mac only, but if you’re a Windows user do not despair, you have the awesome Nucleo to call upon, another app which I highly recommend.

IconJar仅适用于Mac，但如果您是Windows用户，请不要失望，您可以致电Nucleo ，这是我强烈推荐的另一个应用程序。

Blurb alert…

模糊警报…

Nucleo is a beautiful library of 29689 icons, and a powerful application to collect, customize and export all your icons.

Nucleo是一个包含29689个图标的漂亮库，并且是一个功能强大的应用程序，用于收集，自定义和导出所有图标。

Back in my Kit, and on a Master Components page that I’d created earlier, I simply dropped in, one by one, icons from the Eva Icon Set.

回到我的工具包中，以及在之前创建的“ 主组件”页面上，我只是简单地逐一插入了Eva Icon Set中的图标 。

The cool thing with IconJar is that it will insert your icons with a 24pt Bounding Box already applied, which aids alignment and visual consistency within your designs.

IconJar的好处是，它将在您的图标上插入一个已经应用的24pt边界框 ，这有助于设计中的对齐和视觉一致性 。

Then, it was just a case of attaching the Primary Base Color Style that I’d created previously…

然后，这只是附加我之前创建的“ 基色”样式的情况……

…choosing a naming convention to aid with categorization of my Icons (similar to what I’d created in Part One)…

…选择命名约定以帮助对我的图标进行分类(类似于我在第一部分中创建的内容)…

• Icon / Alert Circle / Fill

  图标/警报圈/填充

• Icon / Alert Circle / Line

  图标/警报圈/线

…and then simply converting it to a Component (Alt + Cmd + K).

…然后将其简单地转换为组件 ( Alt + Cmd + K )。

Wash. Rinse. Repeat.

洗净，漂洗。 重复。

Now, this part will seem a little time-consuming, and entering the realms of mundanesville, but I’ve yet to find a Figma Plugin that can help automate this process in some way, so manual it is for the time being.

现在，这部分似乎很耗时，并且进入了mundanesville的领域，但是我还没有找到一个Figma插件，它可以以某种方式帮助实现此过程的自动化，因此暂时是手动的。

I’ve said it before, and by the power of Grayskull (old 80’s TV reference there) I’ll say it again… Get the key elements in place, the sometimes time-consuming, and mundane out of the way, and then you can dive on into the juicier parts of your Starter Kit, which is coming up in the next part.

我已经说过了，借助Grayskull(那里有80年代的电视参考)的力量，我会再说一遍……将关键要素放到适当的位置，有时会很费时，而且平凡，然后您可以深入研究入门工具包中比较有趣的部分，这将在下一部分中介绍。

You can check out Part 3 here.

您可以 在此处 查看第3部分 。

Don’t want to build your own Starter Kit? Check out Cabana for Figma… Due to current events, please use the code CABANA30 to receive 30% OFF.

不想构建自己的入门套件？ 查看Cabana for Figma …由于当前事件，请使用代码CABANA30享受30％的折扣 。

Marc. Designer, Author, Father, and creator of mrcndrw.com

马克 mrcndrw.com的 设计师，作者，父亲和创建者