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

每次在Figma中启动一个新项目时，你是否喜欢盯着空白的画布看？

我猜你应该不是忠实拥趸吧，但这是你可能不时遵循的做法？

如果你能更快地启动你的设计项目，让你的头脑瞬间进入自由流动的创意空间，那不是更好吗？

那么，我亲爱的朋友们，这就是设计入门套件可以帮助你的地方。

那么，你可能会问，什么是设计入门套件？它是那些大家在我们称之为#DesignTwitter的泡沫中谈论的 "设计系统 "之一吗？

不完全是。它是一个有价值的，也是整个设计系统中必不可少的一部分吗？当然是的。

它是你在设计市场上经常看到的那些 "UI套件 "之一吗？

它也不是那样的。不同于那些 "一打一打的UI套件"，它是以特定的审美或服务于某一行业的 "一打一打的UI套件"，入门套件在外观和感觉上都比较平淡，不会把你锁定在一个特定的风格中。它是开放的，你可以根据手头的项目加入自己的演绎。

那么，它是什么呢？

我喜欢把它看成是一个组件库和风格指南。它可以让你预置那些核心的UI元素，让你的创意有了充分的发挥空间，让你比以前更快地专注于设计项目的细微差别。就这么简单，真的很简单。

你知道吗，我和其他男人/女人一样喜欢画矩形，但我不想在每次开始一个新的项目时，都要去创建一些常见的UI元素，如按钮、表单输入、模态、卡片，以及中间的一切。不!

因此，说了这么多，让我向您展示一下我是如何组装出我自己的入门套件；Cabana for Figma，并在此过程中帮助您更好地了解创建一个多功能、功能强大的套件，让您的下一个项目有一个飞跃的开始。

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

PS：由于我先在Sketch中创建了自己的入门套件，所以我将不时地交叉引用该工具，只是为了让你看到不同的工具是如何处理创建像这样的套件的。

为什么你应该先建立一个强大的调色板？

当您开始在 Figma 中创建自己的入门套件时，您希望首先从您的调色板开始，并且在这样做的时候，尽可能将您的基础色保持在最低限度（即：通常的主色、次色和三色）。当然，为了灵活性和多样性的目的，在这些基础色的基础上提供不同程度的色调（浅色系）和深色系（深色系）来扩展是有意义的。

我以前说过，现在我再说一遍，你可以创建一个美学上有吸引力的、用户友好的网站或应用程序，只需在颜色和类型选择上有很好的颜色和类型选择，而且有更多的色调和色调范围，可以为你带来更多的通用性。

现在，您可以通过调整Figma中颜色面板内的色彩面板中的HSL选项中的饱和度和亮度值来创建不同的色调和色调，但这是一个耗时的过程，谁有时间呢？

我使用的一个工具，可以让整个着色和色调创作过程更加快速，我强烈推荐的一个工具，可以在以下链接中找到：https://maketintsandshades.com

在这里，您可以通过简单地粘贴您的基础色HEX值来快速、轻松地生成色调和色调，然后反过来，它将为您生成完美的色调和色调。

然后选择你想在你的工具包中使用的色调和色调，然后简单地复制回你选择的HEX值，然后你可以插入到相关的填充选项中。给我来个省时的击掌吧!

在我们继续前进之前，让我给你一个简单的提示，当涉及到你的调色板的命名惯例…..

我强烈推荐使用下面这样简单的东西……

初级/基础

中级/基础

使用好的斜线(/)可以为你分类颜色，并在需要时帮助你从检查员面板中快速找到相关的颜色。

您还需要考虑实现标准的红色（错误）、绿色（成功）和黄色（警告）基色，例如在Notifications，Badges和Input Field Borders中使用。

黑色和不同颜色的灰色也是绝对必要的。在这里，你不需要过多地使用灰色的变体，4到5种左右的灰色就足够让你在以后的项目中使用。

除了必须的白色，我还推荐添加不同级别的不透明度的白色。这些变体非常适用于比如说，当你想在颜色或图像的顶部插入一个图标，让你可以轻松地让颜色或图像的颜色或图像的颜色或图像的颜色或图像的不透明度有多有少。

不要忘记那些多用途的品牌颜色。你会发现自己在很多项目中都会用到这些颜色，所以在制作主调色板的同时，也要把它们和你的主调色板同时使用。在我自己的入门套件中，我选择了大量的品种，为自己以后的产品提供了很多选择。

最后，但并非最不重要的是，健康的渐变总是派上了用场。谁不爱一个好的渐变呢？

现在，Gradients是基础套件的绝对必要条件吗？也许不是，但就像我之前提到的那样，在初始构建的开始就实施它们，可以节省你在未来的项目中需要它们的时候，可以省去任何来回的麻烦。

如果你真的决定在你的初始构建中添加光栅，那么请确保你可以通过从一开始就添加从左到右和从上到下的变体，给自己一些通用性。

为自己提供大量的排版选项，以涵盖桌面和移动端使用

就像我之前提到的，我自己的工具包最初是为Sketch建立的，如果你对Sketch工具很熟悉，你就会知道，当你在那里创建文本样式时，由于你必须创建单独的样式来覆盖对齐和颜色变化，所以事情可能会变得非常麻烦。

值得庆幸的是，在 Figma 中，事情就简单多了。

不像Sketch，就像我提到的那样，Sketch将Alignment和Color捆绑在Text Style中。Figma 将这些内容分开，让您可以减少很多文本样式的管理，并且比 Sketch 目前提供的文件更干净、更轻巧。欢呼吧!

即便如此，在建立自己的工具包时，我建议，如果可能的话，尽量坚持2个字体家族的规则，否则你的文本风格面板会变得比你实际喜欢的更加臃肿。

对于我自己的Kit，我选择了Inter和Oxygen作为基础字体家族，因为它们之间的互补性非常好，而且作为初始的基础选项，它们的装饰性不强。

除了创建超大的显示样式（在我的案例中，Uber和Hero），我还使用模块化缩放法（Modular Scaling）为H1到H5创建了常用的样式，我的Body文本大小设置为18pt，比例为1.2。

我将Body设置为18pt，以提高可读性，减少眼睛疲劳，尤其是在创建长篇内容时。

在标题和主体样式的基础上，我还创建了铅字、小标题、小标题和X-Small、Caption和X-Small的样式，后者非常适合在移动端创建设计，而前者则适合在桌面项目中使用。

这里的命名惯例完全取决于你，以及你觉得最舒服的命名方式。我知道有些人喜欢选择像Heading 1到Heading 6这样的命名结构，还有Body、Body L、Body S等等...........以及其他一百万种命名方式。无论你的命名方法是什么，都可以。

我的建议是，按照类似于你的调色板的模式，再次使用那些值得信赖的前向斜线（/）来组合你的文字样式，让它们更容易参考。

像下面这样的东西就很好用…..

Lead 24 / Family＃1 / Regular

Lead 24 / Family＃2 / Regular

有了这两个字体系列和它们的不同风格（即：Hero, H1, Body等），我建议创建一个普通和粗体的变体。当然，你可以在任何时候根据自己的个人喜好来添加（即：轻体、半粗体等）。

为了使你的设计保持一致，我建议确保你所有的文字样式都与基线网格对齐，在我的案例中，Cabana的基线网格是4pt的基线网格。同样的，根据你决定使用的字体系列，可以随意收紧或松开线条高度。

我也建议为两个字体家族创建样式（即：Hero、H1、Body等）。这在最初的设置中是一个小的工作，但它允许你在两种字体之间自由切换，并且不会限制你，例如，当你想把字体家族X换成标题，把字体家族Y换成正文，或者反之亦然。从一开始就给自己提供了很大的灵活性，让自己在以后的工作中省去了来回奔波的麻烦。

在我们继续前进之前，我必须承认，再次提及Sketch，该工具确实使更改字体家族的过程（一旦您的所有样式都到位后）比Figma目前所做的工作要简单得多。

在 Sketch 中，您只需从检查器中选择不同的字体家族（即：将 Inter 换成 Proxima Nova），所有的字体就会立即更新为新的字体家族。而在Figma中，目前你必须手动操作，每次都要对每个样式进行更新。我知道这很糟糕!

但不要绝望，我强烈推荐一个很棒的插件，叫做Batch Styler。有了这个超级花哨的插件，你可以一次改变多个风格，并说 "Adios "所有的手动傻事。再一次万万岁!

最后，别忘了那些急需的立面和阴影

在任何一个好的入门套件的核心风格中，除了你的调色板和排版风格之外，还有最后一个核心风格，那就是凸起和阴影。

我建议为你的主色和次要基色创建适合明暗两色设计的阴影，以及可能的阴影（及其伴随的凸起，即20%、40%、60%等），让自己从一开始就有更多的通用性。

在我们把事情总结到这里之前，请记住，颜色、排版，以及在某些情况下，阴影和仰视风格是任何优秀的入门套件的关键基础元素，而你随后创建的每一个组件都会以某种形式或形式来展示这些风格，所以在你创建其他任何东西之前，先把它们做好，是很有必要的。

一旦你有了这些核心样式，你就可以继续添加更多的基础元素，如图标，以及创建许多组件，以构建出一个坚实的入门套件。