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的 設計師，作者，父親和創建者