Figma教程 (Figma Tutorial)

Do you like staring at a blank canvas every time you start a new project in Figma?

每次在Figma中啟動新項目時，您是否喜歡盯著一塊空白的畫布？

I’m guessing you’re not a big fan right, but it’s a practice that you’ve possibly followed from time to time?

我猜你不是一個忠實擁護者，但這是您可能不時遵循的一種做法？

Wouldn’t it be better if you could kick-start your design projects faster, and get your head into that free-flowing creative space instantly?

如果您可以更快地啟動設計項目并立即進入自由流動的創意空間，這會更好嗎？

Well my dear friends, this is where a Design Starter Kit can come to your assistance. Cue the intro music!

親愛的朋友們，這是設計入門套件可以為您提供幫助的地方。 提示介紹音樂！

So what is a Design Starter Kit, you may ask? Is it one of those ‘Design Systems’ that everyone talks about in that bubble we call #DesignTwitter?

那么，您可能會問什么是設計入門工具包？ 每個人都在那個我們稱為#DesignTwitter的泡沫中談論的“設計系統”之一嗎？

Not quite. Is it a valuable, and essential part of an overall Design System? Absolutely.

不完全的。 它是整個設計系統的重要組成部分嗎？ 絕對。

Is it one of those ‘UI Kits’ that you see on design marketplaces all the time?

它是您始終在設計市場上看到的“ UI套件”之一嗎？

It isn’t that either. Unlike those ‘dime to a dozen UI Kits’ which have been created with a certain aesthetic, or to serve a particular industry, a Starter Kit is more vanilla in its base look, and feel, and doesn’t lock you into a specific style. It’s open for you to add your own interpretation dependant on the project at hand.

也不是。 與以某種美學風格創建或服務于特定行業的“一打一打UI工具包”不同，入門工具包的基本外觀和感覺更具香草味，并且不會將您鎖定為特定樣式。 您可以根據自己的項目添加自己的解釋，這是開放的。

So what is it then?

那是什么呢？

I like to think of it as more of a Component Library and Style Guide rolled into one. Something which enables you to have those core UI elements pre-built, ready to go, allowing your creativity room to breathe, and enabling you to focus on the nuances of a design project much faster than you may have done previously. Simple as that really.

我更喜歡將它看作是更多的組件庫和樣式指南 。 它使您能夠預先構建，準備使用這些核心UI元素，使您的創造力得以釋放，并使您能夠比以前更快地專注于設計項目的細微差別。 就這么簡單 。

Y’know, I like drawing rectangles as much as the next man/woman but I don’t want to go through the hassle of creating common UI elements such as Buttons, Form Inputs, Modals, Cards, and everything in between each time I start a new project. Nah!

知道，我喜歡下一個男人/女人一樣喜歡繪制矩形，但是我不想經歷創建通用UI元素(如Buttons ， Form Inputs ， Modals ， Cards以及每次我之間的所有事物)的麻煩開始一個新項目。 不！

So with all that said, let me show you how I put together my own Starter Kit; Cabana for Figma, and in the process help you better understand what goes into creating a versatile and powerful Kit for yourself, enabling you to get your next project off to a flying start.

綜上所述，讓我向您展示如何組合自己的入門套件； Cabana for Figma ，并在此過程中幫助您更好地了解如何為自己創建一個功能強大的多功能套件，使您可以開始下一個項目。

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

盯著空白的畫布綜合癥(SBCS)消失了！

P.S. Due to the fact that I created my own Starter Kit in Sketch first, I will cross-reference that tool from time to time, just to let you see how the different tools handle creating a Kit such as this.

PS 由于我首先在Sketch中創建了自己的入門工具包，因此我將不時地交叉引用該工具，以讓您了解不同的工具如何處理此類工具包。

為什么要先構建強大的調色板 (Why you should build a strong Color Palette before anything else)

W

當您開始在Figma內創建自己的入門工具包時，您想從 調色板 首先，在這樣做時，要保持您的 基色 在可能的情況下(例如，通常的嫌疑犯- 主 ， 次要的 和 第三 )。 當然，出于靈活性的目的，這是有意義的，然后通過提供不同程度的 色調(較淺的變體) 和 陰影(深色變體) 。

I’ve said it before, and I’ll say it again, you can create an aesthetically appealing, and user-friendly site, or app with just great Color, and Type choices alone, and having that wider range of Tints, and Shades to call upon brings a generous amount of versatility for when you do.

我已經說過了，我再說一遍，您可以創建一個美觀且易于使用的網站，或者僅使用出色的Color和Type選擇并擁有更廣泛的Tints和Shades的應用程序調用時會帶來大量的多功能性。

Now you could go ahead and create the varying Tints and Shades from your initial Base Color by tweaking the Saturation, and Lightness values from the HSL option inside of the Color Panel in Figma, but that’s a time consuming process, and who’s got the time right?

現在，您可以通過在Figma的“顏色面板”中調整HSL選項的“ 飽和度 ”和“ 亮度”值，從初始基礎顏色創建各種色調和陰影，但這是一個耗時的過程，誰來對得起？

A tool that I use to make the whole Tints & Shades creation process even quicker, and one that I highly recommend, can be found at the following link: https://maketintsandshades.com

可以在以下鏈接中找到一種我用來使整個“色調和陰影”創建過程更快的工具，并且我強烈推薦該工具： https : //maketintsandshades.com

Here you can quickly, and easily produce Tints & Shades by simply pasting in your Base Color HEX value, which in turn will then produce perfectly computed Tints & Shades for you.

在這里，您只需粘貼您的Base Color HEX值即可快速，輕松地生成“色調和陰影”，然后可以為您生成完美計算的“色調和陰影”。

You then select which Tints & Shades you’d like to use inside of your Kit and then simply copy back across your chosen HEX values, which you can then insert into the relevant Fill options. Give me a time-saving high-five folks!

然后，您可以選擇要在工具包中使用的色調和底紋，然后簡單地跨選擇的十六進制值進行復制，然后將其插入相關的“填充”選項中。 給我省時的五個人！

Before we move on, let me give you a simple tip on naming conventions when it comes to your Color Palette…

在繼續之前，讓我給您一個有關調色板的命名約定的簡單提示...

I highly recommend using something as simple as the following…

我強烈建議您使用以下簡單的內容…

• Primary / Base

  主要/基礎

• Secondary / Base

  中學/基礎

Using the good ol’ forward slash (/) will categorise your Colors for you and aids in quickly finding the relevant Color from the Inspector panel when required.

使用正斜杠(/)將對您的顏色進行分類，并在需要時幫助快速從“檢查器”面板中找到相關的顏色。

You’ll also need to look at implementing the standard Red (Error), Green (Success), and Yellow (Warning) Base Colors for usage within Notifications, Badges, and Input Field Borders for example.

您還需要考慮實現標準的紅色(錯誤) ， 綠色(成功)和黃色(警告) 基色 ，例如在Notifications ， Badges和Input Field Borders中使用。

Black and varying shades of Grey are an absolute must too. You don’t need to go overboard with the Grey variants here, around 4 or 5 will give you enough variety for your future projects.

黑色和深淺不一的灰色也是絕對必須的。 您無需在這里過度使用Gray變體，大約4或5可以為您將來的項目提供足夠的多樣性。

As well as the obligatory White, I also recommend adding White with varying levels of Opacity. These variants are perfect for when, for example, you want to insert an Icon over the top of a Color or Image, letting you easily allow as much, or as little of the Color or Image to leak through.

除了強制性的白色外 ，我還建議添加不透明度不同的白色。 這些變體非常適合例如在您想要在顏色或圖像的頂部插入圖標的情況下使用，從而使您輕松地讓多少或更少的顏色或圖像泄漏出去。

And don’t forget those multi-purpose Brand Colors. You’ll find yourself calling upon these for many projects, and it pays to create them at the same time as your main Color Palette. For my own Starter Kit I opted for a generous variety, giving myself plenty of options for future products.

并且不要忘記這些多用途的品牌色彩 。 您會發現自己在許多項目中都要求使用它們，并且與主調色板同時創建它們很有意義。 對于我自己的入門工具包，我選擇了多種多樣的選擇，為自己將來的產品提供了很多選擇。

And last, but not least, a healthy selection of Gradients always comes in handy. Who doesn’t love a good Gradient right?

最后但并非最不重要的一點是，總是可以輕松選擇健康的漸變 。 誰不喜歡一個好的漸變對嗎？

Now, are Gradients an absolute must for a Base Kit? Maybe not, but like I’ve mentioned before, implementing them right at the start of the initial build can save you any back-and-to if a future project calls upon them.

現在，基本套件絕對需要漸變色嗎？ 也許不是，但是就像我之前提到的那樣，如果將來的項目需要它們，那么在初始構建的開始就立即實施它們可以節省您的任何麻煩。

If you do decide to add Gradients in your initial build make sure you give yourself some versatility by maybe adding both a Left to Right, and Top to Bottom variant from the get-go.

如果您決定在初始構建中添加漸變，請確保從一開始就添加從左到右和從上到下的變體，以確保自己具有一定的多功能性。

給自己很多版式選項，以涵蓋臺式機和移動設備的使用 (Give yourself plenty of Typography options to cover both Desktop and Mobile usage)

Like I mentioned earlier, my own Kit was built for Sketch initially, and if you’re knowledgable of that tool you’ll know that when it comes to creating Text Styles there that things can become quite overwhelming due to the fact that you have to create separate styles to cover Alignment, and Color variants also.

就像我之前提到的，我自己的工具包最初是為Sketch構建的，如果您對該工具有所了解，就會知道在創建文本樣式時，由于您必須創建單獨的樣式以覆蓋Alignment和Color變體。

Thankfully, in Figma things are kept much simpler.

幸運的是，在Figma中，事情變得更加簡單。

Unlike Sketch, which like I mentioned, ties Alignment, and Color together within the Text Style. Figma breaks these apart, allowing you to have a lot less Text Styles to manage, and makes for a much cleaner, and lighter file than what Sketch currently offers. Hurrah!

與我提到的Sketch不同，它在Text Style中將Alignment和Color綁定在一起。 Figma將它們分開，使您可以管理的文本樣式少得多，并且比Sketch當前提供的文件更整潔，更輕便。 歡呼！

Even so, when building out your own Kit I recommend, if possible, to try and stick to a 2 Font Family rule if possible otherwise your Text Style panel can become a little more bloated than you’d actually prefer.

即使這樣，在構建自己的工具包時，我還是建議盡量嘗試遵循2字體系列規則，否則“文本樣式”面板可能會比實際所需的更加膨脹。

For my own Kit, I chose Inter and Oxygen as the Base Font Families due to the fact that they complement each other really well, and they’re not too decorative as initial Base options.

對于我自己的工具包，我選擇Inter和Oxygen作為基本字體系列，是因為它們可以很好地互補，而且作為初始基本選項并不太裝飾。

As well as creating oversized Display Styles (in my case; Uber and Hero), I also created styles for the usual suspects of H1 to H5 using Modular Scaling, with my Body text size set at 18pt, and using a Ratio of 1.2.

除了創建超大的顯示樣式 (在我的例子中為Uber和Hero)之外，我還使用Modular Scaling(我的正文文本大小設置為18pt ，比率為1.2 )為常見的H1至H5嫌疑人創建樣式。

The Body I set at a healthy 18pt to improve legibility, and reduce eye fatigue, especially when creating long-form content.

我將Body I設置為健康的18點，以提高可讀性并減少眼睛疲勞，尤其是在制作長形內容時。

On top of the Headings, and Body styles, I created styles for Lead, Small, Caption, and X-Small, with the latter being perfect for when creating designs for mobile, and the former for when dealing with Desktop projects.

除了標題和正文樣式之外，我還創建了Lead ， Small ， Caption和X-Small樣式，后者非常適合創建移動設計，而前者則適合處理桌面項目。

The naming convention here is entirely down to you, and what you feel most comfortable with. I know some folks like to opt for a naming structure like Heading 1 through to Heading 6, and Body, Body L, Body S etc… and a million other kinds of naming conventions. Whatever floats your naming boat!

這里的命名約定完全取決于您以及您最滿意的內容。 我知道有些人喜歡選擇一種命名結構，例如標題1到標題6以及Body ， Body L ， Body S等……以及上百萬種其他命名約定。 無論您的命名船如何漂浮！

What I do recommend though, and following a similar pattern to your Color Palette, is to once again use those trusty forward slashes (/) to group your Text Styles and make them much easier to reference.

不過，我建議并遵循與調色板類似的模式，再次使用那些可信賴的正斜杠(/)對文本樣式進行分組，并使它們更易于引用。

Something like the following works great…

像下面這樣的東西效果很好…

• Lead 24 / Family #1 / Regular

  Lead 24 / Family＃1 / Regular

• Lead 24 / Family #2 / Regular

  Lead 24 / Family＃2 / Regular

With these 2 Font Families and their various styles (ie; Hero, H1, Body etc…) I suggest creating a Regular and Bold weight variant as the bare minimum. You can of course add to this to suit your personal preferences at any point (ie; Light, Semi-Bold etc…)

對于這2個字體家族及其各種樣式(例如Hero，H1，Body等)，我建議創建一個Regular和Bold權重變量作為最低要求。 當然，您可以隨時添加此設置以適合您的個人喜好(例如：淺色，半粗體等)。

To enable consistency throughout your designs, I suggest making sure that all of your text styles align to a Baseline Grid, which in my case with Cabana was a 4pt Baseline Grid. Again feel free to tighten, or loosen the Line Height dependant on the Font Family you decide to use.

為了確保整個設計的一致性，我建議確保所有文本樣式都與“ 基線網格”對齊，在我的Cabana案例中，這是一個4pt的“基線網格” 。 再次根據您決定使用的字體系列，隨意擰緊或放松線高。

I also suggest creating Styles (ie; Hero, H1, Body etc…) for both Font Families. It’s a little more work in the initial setup but it allows you the freedom to easily swap between the two Fonts, and doesn’t restrict you when for example you want to swap out Font Family X for Headings, and Font Family Y for Body or vice-versa. Give yourself the flexibility from the very beginning and save yourself any back-and-to at a later date .

我還建議為兩個字體家族都創建樣式(即Hero，H1，Body等)。 在初始設置中還需要做更多的工作，但是它使您可以自由地在兩種字體之間輕松地進行交換，并且在例如要將字體系列X替換為標題，將字體系列Y替換為Body或字體時不受限制。反之亦然。 從一開始就給自己靈活性，以后再來回保存。

Before we move on, I must admit, and again, referring back to Sketch, that that tool does make the process of changing a Font Family (once all your Styles are in place) a much simpler job than Figma currently does.

在繼續之前，我必須承認，再說一遍Sketch，該工具確實使更改字體系列(一旦所有樣式都就位)的過程比Figma當前的工作簡單得多。

In Sketch you simply select a different Family from the Inspector (ie; swapping out Inter for Proxima Nova) and all those Styles are instantly updated with the new family. In Figma currently you have to do things manually, each Style at a time. Sucks I know!

在Sketch中，您只需從檢查器中選擇一個不同的系列(即，將Inter換成Proxima Nova)，所有這些樣式都會立即用新的系列更新。 目前，在Figma中，您必須手動執行操作，一次需要每個樣式。 我知道糟透了！

But don’t despair peeps, there’s an awesome plugin that I highly recommend called Batch Styler from the mucho talented Jan Six. With this super-handy plugin you can change multiple styles at once, and say “Adios” to all that manual silliness. Hurrah once more!

但是，請不要失望，有一個非常棒的插件，我強烈推薦來自才華橫溢的Jan Six的一個名為Batch Styler的插件。 有了這個超級方便的插件，您可以一次更改多種樣式，并對所有手動傻話說“ Adios” 。 再次歡呼！

最后，不要忘記那些急需的“高程和陰影”！ (And finally, don’t forget those much needed Elevations and Shadows!)

One last addition to the core styles of any good Starter Kit, alongside your Color Palette, and Typography Styles are Elevations and Shadows.

任何好的入門工具包的核心樣式中，最后一個除了“調色板”和“版式樣式”之外還有“ 高程和陰影” 。

I suggest creating Shadows suitable for both Light, and Dark designs, as well as possibly Shadows (and their accompanying Elevations, ie; 20%, 40%, 60% etc…) for both your Primary, and Secondary Base Colors, allowing yourself a little more versatility from the start.

我建議為原色和次要 基色創建適合于淺色和深色設計的陰影，以及可能的陰影(及其伴隨的高程，即20％，40％，60％等)，以使自己從一開始就具有更多的多功能性。

Before we wrap things up here, remember that Color, Typography, and in some cases Shadow & Elevation Styles are the key foundational elements of any great Starter Kit, and every Component that you subsequently create is going to feature those Styles in some shape or form so it pays to get them into place first before you create anything else.

在這里總結之前，請記住顏色 ， 版式以及某些情況下的陰影和高程樣式是任何出色的入門工具包的關鍵基礎要素，并且您隨后創建的每個組件都將以某種形狀或形式呈現這些樣式。因此在創建其他任何東西之前先將它們放置到位是值得的。

Once you have those Core Styles in place then you can move forward with adding more foundational elements such as Icons, as well as creating the many Components that will build out a solid Starter Kit, and I’ll be touching upon these in later parts of this lil’ Tutorial Series.

一旦有了這些核心樣式，就可以繼續添加更多基本元素(例如圖標)，并創建許多組件來構建可靠的入門工具包，我將在本教程的后續部分中進行介紹。這個小教程系列 。

You can check out Part 2 here.

您可以 在此處 查看第2部分 。

不想構建自己的入門套件？ 看看Cabana for Figma… (Don’t want to build your own Starter Kit? Check out Cabana for Figma…)

SPECIAL OFFER: Due to current events, please use the code CABANA30 to receive 30% OFF.

特價：由于當前事件，請使用代碼CABANA30享受30％的折扣 。

https://cabanaforfigma.com

https://cabanaforfigma.com

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

馬克 mrcndrw.com的 設計師，作者，父親和創建者