figma设计_如何在Figma中构建设计入门套件（第1部分）
figma設(shè)計(jì)
Figma教程 (Figma Tutorial)
Do you like staring at a blank canvas every time you start a new project in Figma?
每次在Figma中啟動(dòng)新項(xiàng)目時(shí)，您是否喜歡盯著一塊空白的畫布？
I’m guessing you’re not a big fan right, but it’s a practice that you’ve possibly followed from time to time?
我猜你不是一個(gè)忠實(shí)擁護(hù)者，但這是您可能不時(shí)遵循的一種做法？
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?
如果您可以更快地啟動(dòng)設(shè)計(jì)項(xiàng)目并立即進(jìn)入自由流動(dòng)的創(chuàng)意空間，這會(huì)更好嗎？
Well my dear friends, this is where a Design Starter Kit can come to your assistance. Cue the intro music!
親愛(ài)的朋友們，這是設(shè)計(jì)入門套件可以為您提供幫助的地方。 提示介紹音樂(lè)！
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?
那么，您可能會(huì)問(wèn)什么是設(shè)計(jì)入門工具包？ 每個(gè)人都在那個(gè)我們稱為#DesignTwitter的泡沫中談?wù)摰摹霸O(shè)計(jì)系統(tǒng)”之一嗎？
Not quite. Is it a valuable, and essential part of an overall Design System? Absolutely.
不完全的。 它是整個(gè)設(shè)計(jì)系統(tǒng)的重要組成部分嗎？ 絕對(duì)。
Is it one of those ‘UI Kits’ that you see on design marketplaces all the time?
它是您始終在設(shè)計(jì)市場(chǎng)上看到的“ 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.
也不是。 與以某種美學(xué)風(fēng)格創(chuàng)建或服務(wù)于特定行業(yè)的“一打一打UI工具包”不同，入門工具包的基本外觀和感覺(jué)更具香草味，并且不會(huì)將您鎖定為特定樣式。 您可以根據(jù)自己的項(xiàng)目添加自己的解釋，這是開(kāi)放的。
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.
我更喜歡將它看作是更多的組件庫(kù)和樣式指南 。 它使您能夠預(yù)先構(gòu)建，準(zhǔn)備使用這些核心UI元素，使您的創(chuàng)造力得以釋放，并使您能夠比以前更快地專注于設(shè)計(jì)項(xiàng)目的細(xì)微差別。 就這么簡(jiǎn)單 。
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!
知道，我喜歡下一個(gè)男人/女人一樣喜歡繪制矩形，但是我不想經(jīng)歷創(chuàng)建通用UI元素(如Buttons ， Form Inputs ， Modals ， Cards以及每次我之間的所有事物)的麻煩開(kāi)始一個(gè)新項(xiàng)目。 不！
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 ，并在此過(guò)程中幫助您更好地了解如何為自己創(chuàng)建一個(gè)功能強(qiáng)大的多功能套件，使您可以開(kāi)始下一個(gè)項(xiàng)目。
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中創(chuàng)建了自己的入門工具包，因此我將不時(shí)地交叉引用該工具，以讓您了解不同的工具如何處理此類工具包。
為什么要先構(gòu)建強(qiáng)大的調(diào)色板 (Why you should build a strong Color Palette before anything else)
When you start creating your own Starter Kit inside of Figma, you want to start with your Color Palette first, and when doing so, aim to keep your Base Colors to a minimum where possible (ie; the usual suspects — Primary, Secondary, and Tertiary). Of course, it makes sense for the purposes of flexibility, and variety to then expand on those Base Colors by offering varying degrees of Tints (Lighter variants), and Shades (Darker variants).當(dāng)您開(kāi)始在Figma內(nèi)創(chuàng)建自己的入門工具包時(shí)，您想從 調(diào)色板 首先，在這樣做時(shí)，要保持您的 基色 在可能的情況下(例如，通常的嫌疑犯- 主 ， 次要的 和 第三 )。 當(dāng)然，出于靈活性的目的，這是有意義的，然后通過(guò)提供不同程度的 色調(diào)(較淺的變體) 和 陰影(深色變體) 。
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.
我已經(jīng)說(shuō)過(guò)了，我再說(shuō)一遍，您可以創(chuàng)建一個(gè)美觀且易于使用的網(wǎng)站，或者僅使用出色的Color和Type選擇并擁有更廣泛的Tints和Shades的應(yīng)用程序調(diào)用時(shí)會(huì)帶來(lái)大量的多功能性。
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?
現(xiàn)在，您可以通過(guò)在Figma的“顏色面板”中調(diào)整HSL選項(xiàng)的“ 飽和度 ”和“ 亮度”值，從初始基礎(chǔ)顏色創(chuàng)建各種色調(diào)和陰影，但這是一個(gè)耗時(shí)的過(guò)程，誰(shuí)來(lái)對(duì)得起？
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
可以在以下鏈接中找到一種我用來(lái)使整個(gè)“色調(diào)和陰影”創(chuàng)建過(guò)程更快的工具，并且我強(qiáng)烈推薦該工具： 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值即可快速，輕松地生成“色調(diào)和陰影”，然后可以為您生成完美計(jì)算的“色調(diào)和陰影”。
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!
然后，您可以選擇要在工具包中使用的色調(diào)和底紋，然后簡(jiǎn)單地跨選擇的十六進(jìn)制值進(jìn)行復(fù)制，然后將其插入相關(guān)的“填充”選項(xiàng)中。 給我省時(shí)的五個(gè)人！
Before we move on, let me give you a simple tip on naming conventions when it comes to your Color Palette…
在繼續(xù)之前，讓我給您一個(gè)有關(guān)調(diào)色板的命名約定的簡(jiǎn)單提示...
I highly recommend using something as simple as the following…
我強(qiáng)烈建議您使用以下簡(jiǎn)單的內(nèi)容…
Primary / Base
主要/基礎(chǔ)
Secondary / Base
中學(xué)/基礎(chǔ)
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.
使用正斜杠(/)將對(duì)您的顏色進(jìn)行分類，并在需要時(shí)幫助快速?gòu)摹皺z查器”面板中找到相關(guān)的顏色。
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.
您還需要考慮實(shí)現(xiàn)標(biāo)準(zhǔn)的紅色(錯(cuò)誤) ， 綠色(成功)和黃色(警告) 基色 ，例如在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.
黑色和深淺不一的灰色也是絕對(duì)必須的。 您無(wú)需在這里過(guò)度使用Gray變體，大約4或5可以為您將來(lái)的項(xiàng)目提供足夠的多樣性。
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.
除了強(qiáng)制性的白色外 ，我還建議添加不透明度不同的白色。 這些變體非常適合例如在您想要在顏色或圖像的頂部插入圖標(biāo)的情況下使用，從而使您輕松地讓多少或更少的顏色或圖像泄漏出去。
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.
并且不要忘記這些多用途的品牌色彩 。 您會(huì)發(fā)現(xiàn)自己在許多項(xiàng)目中都要求使用它們，并且與主調(diào)色板同時(shí)創(chuàng)建它們很有意義。 對(duì)于我自己的入門工具包，我選擇了多種多樣的選擇，為自己將來(lái)的產(chǎn)品提供了很多選擇。
And last, but not least, a healthy selection of Gradients always comes in handy. Who doesn’t love a good Gradient right?
最后但并非最不重要的一點(diǎn)是，總是可以輕松選擇健康的漸變 。 誰(shuí)不喜歡一個(gè)好的漸變對(duì)嗎？
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.
現(xiàn)在，基本套件絕對(duì)需要漸變色嗎？ 也許不是，但是就像我之前提到的那樣，如果將來(lái)的項(xiàng)目需要它們，那么在初始構(gòu)建的開(kāi)始就立即實(shí)施它們可以節(jié)省您的任何麻煩。
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.
如果您決定在初始構(gòu)建中添加漸變，請(qǐng)確保從一開(kāi)始就添加從左到右和從上到下的變體，以確保自己具有一定的多功能性。
給自己很多版式選項(xiàng)，以涵蓋臺(tái)式機(jī)和移動(dòng)設(shè)備的使用 (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構(gòu)建的，如果您對(duì)該工具有所了解，就會(huì)知道在創(chuàng)建文本樣式時(shí)，由于您必須創(chuàng)建單獨(dú)的樣式以覆蓋Alignment和Color變體。
Thankfully, in Figma things are kept much simpler.
幸運(yùn)的是，在Figma中，事情變得更加簡(jiǎn)單。
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將它們分開(kāi)，使您可以管理的文本樣式少得多，并且比Sketch當(dāng)前提供的文件更整潔，更輕便。 歡呼！
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.
即使這樣，在構(gòu)建自己的工具包時(shí)，我還是建議盡量嘗試遵循2字體系列規(guī)則，否則“文本樣式”面板可能會(huì)比實(shí)際所需的更加膨脹。
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.
對(duì)于我自己的工具包，我選擇Inter和Oxygen作為基本字體系列，是因?yàn)樗鼈兛梢院芎玫鼗パa(bǔ)，而且作為初始基本選項(xiàng)并不太裝飾。
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.
除了創(chuàng)建超大的顯示樣式 (在我的例子中為Uber和Hero)之外，我還使用Modular Scaling(我的正文文本大小設(shè)置為18pt ，比率為1.2 )為常見(jiàn)的H1至H5嫌疑人創(chuàng)建樣式。
The Body I set at a healthy 18pt to improve legibility, and reduce eye fatigue, especially when creating long-form content.
我將Body I設(shè)置為健康的18點(diǎn)，以提高可讀性并減少眼睛疲勞，尤其是在制作長(zhǎng)形內(nèi)容時(shí)。
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.
除了標(biāo)題和正文樣式之外，我還創(chuàng)建了Lead ， Small ， Caption和X-Small樣式，后者非常適合創(chuàng)建移動(dòng)設(shè)計(jì)，而前者則適合處理桌面項(xiàng)目。
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!
這里的命名約定完全取決于您以及您最滿意的內(nèi)容。 我知道有些人喜歡選擇一種命名結(jié)構(gòu)，例如標(biāo)題1到標(biāo)題6以及Body ， Body L ， Body S等……以及上百萬(wàn)種其他命名約定。 無(wú)論您的命名船如何漂浮！
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.
不過(guò)，我建議并遵循與調(diào)色板類似的模式，再次使用那些可信賴的正斜杠(/)對(duì)文本樣式進(jìn)行分組，并使它們更易于引用。
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…)
對(duì)于這2個(gè)字體家族及其各種樣式(例如Hero，H1，Body等)，我建議創(chuàng)建一個(gè)Regular和Bold權(quán)重變量作為最低要求。 當(dāng)然，您可以隨時(shí)添加此設(shè)置以適合您的個(gè)人喜好(例如：淺色，半粗體等)。
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.
為了確保整個(gè)設(shè)計(jì)的一致性，我建議確保所有文本樣式都與“ 基線網(wǎng)格”對(duì)齊，在我的Cabana案例中，這是一個(gè)4pt的“基線網(wǎng)格” 。 再次根據(jù)您決定使用的字體系列，隨意擰緊或放松線高。
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 .
我還建議為兩個(gè)字體家族都創(chuàng)建樣式(即Hero，H1，Body等)。 在初始設(shè)置中還需要做更多的工作，但是它使您可以自由地在兩種字體之間輕松地進(jìn)行交換，并且在例如要將字體系列X替換為標(biāo)題，將字體系列Y替換為Body或字體時(shí)不受限制。反之亦然。 從一開(kāi)始就給自己靈活性，以后再來(lái)回保存。
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.
在繼續(xù)之前，我必須承認(rèn)，再說(shuō)一遍Sketch，該工具確實(shí)使更改字體系列(一旦所有樣式都就位)的過(guò)程比Figma當(dāng)前的工作簡(jiǎn)單得多。
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中，您只需從檢查器中選擇一個(gè)不同的系列(即，將Inter換成Proxima Nova)，所有這些樣式都會(huì)立即用新的系列更新。 目前，在Figma中，您必須手動(dòng)執(zhí)行操作，一次需要每個(gè)樣式。 我知道糟透了！
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!
但是，請(qǐng)不要失望，有一個(gè)非常棒的插件，我強(qiáng)烈推薦來(lái)自才華橫溢的Jan Six的一個(gè)名為Batch Styler的插件。 有了這個(gè)超級(jí)方便的插件，您可以一次更改多種樣式，并對(duì)所有手動(dòng)傻話說(shuō)“ 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.
任何好的入門工具包的核心樣式中，最后一個(gè)除了“調(diào)色板”和“版式樣式”之外還有“ 高程和陰影” 。
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.
我建議為原色和次要 基色創(chuàng)建適合于淺色和深色設(shè)計(jì)的陰影，以及可能的陰影(及其伴隨的高程，即20％，40％，60％等)，以使自己從一開(kāi)始就具有更多的多功能性。
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.
在這里總結(jié)之前，請(qǐng)記住顏色 ， 版式以及某些情況下的陰影和高程樣式是任何出色的入門工具包的關(guān)鍵基礎(chǔ)要素，并且您隨后創(chuàng)建的每個(gè)組件都將以某種形狀或形式呈現(xiàn)這些樣式。因此在創(chuàng)建其他任何東西之前先將它們放置到位是值得的。
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.
一旦有了這些核心樣式，就可以繼續(xù)添加更多基本元素(例如圖標(biāo))，并創(chuàng)建許多組件來(lái)構(gòu)建可靠的入門工具包，我將在本教程的后續(xù)部分中進(jìn)行介紹。這個(gè)小教程系列 。
You can check out Part 2 here.
您可以 在此處 查看第2部分 。
不想構(gòu)建自己的入門套件？ 看看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.
特價(jià)：由于當(dāng)前事件，請(qǐng)使用代碼CABANA30享受30％的折扣 。
https://cabanaforfigma.com
https://cabanaforfigma.com
Marc. Designer, Author, Father, and creator of mrcndrw.com
馬克 mrcndrw.com的 設(shè)計(jì)師，作者，父親和創(chuàng)建者
翻譯自: https://uxdesign.cc/how-to-build-a-design-starter-kit-in-figma-part-one-934d0536d92c
figma設(shè)計(jì)
總結(jié)
以上是生活随笔為你收集整理的figma设计_如何在Figma中构建设计入门套件（第1部分）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： pycharm-perl脚本
- 下一篇： [html] 你有使用过output标