每个设计师在打开Figma之前都会盯着空白的画布发呆几秒。而Figma组件有助于你更快速的开始工作。

Figma组件是什么？

它像是一个组件库和风格指南的结合体，能让设计师拥有那些预先构建好的核心UI元素，让个人的创造力自由发挥，比以前更快地专注于设计项目的细微差别。

大多数设计师喜欢画几何形体，但是又不想在每次开始一个新项目时都要重新经历一番创建常见UI元素设计的痛苦，比如按钮、表单输入、模态、卡片以及所有这些元素之间的一切。

本文将向大家展示如何组装自己的入门工具包，帮助大家更好地了解如何为自己创建一个多功能和强大的工具包，让下一个项目可以自由快速的开始。

•第一步，构建一个超大的调色板

当你开始在Figma里面创建你自己的入门工具包时，首先要从调色板开始，这样做的目的是尽可能把你的基本颜色保持在最小(例如：常见问题点：一级、二级和三级)。当然，出于灵活性和多样性的目的，通过提供不同程度的色调(较浅的变化)和阴影(较深的变化)来扩展这些基础颜色。

•第二步，创建一个美观的、对用户友好的网站

你可以创建一个美观的、对用户友好的网站，或者用漂亮的颜色和类型选择去创建一个应用程序，有很多色彩和阴影可以调用，让整个设计具备很大的灵活性。

•第三步，调整饱和度和亮度

在这一步，你可以在Figma的颜色面板的HSL选项中调整饱和度和亮度，从你的初始底色创建不同的色调和阴影，但这是一个耗时的过程，大多数设计师都没有这个时间。

我推荐大家使用一个工具使整个色调和阴影的创建过程更快，可以在以下链接找到:https://maketintsandshades.com

在这个网站里，你可以快速地产生色彩和阴影，只需粘贴基础颜色的十六进制值，它将会反过来为你生产和计算的色彩和阴影。

然后选择你想在工具包中使用的色调和阴影，复制所选择的十六进制值，之后就可以插入到相关的填充选项中。

关于调色板命名，我推荐使用如下的方式：

• Primary / Base

• Secondary / Base

• 使用斜杠(/)将会分类颜色和帮助你在有需要时快速找到相关的颜色

同时，你还需要实现标准的红色(错误)、绿色(成功)和黄色(警告)基本色，以便在通知、徽章和输入字段边框中使用。

黑色和不同深浅的灰色也是绝对必须的。你不需要过分使用灰色的变体，大约4到5个就可以给你未来的项目提供足够的多样性。

除了必要的白色，我推荐大家添加各种的不透明度的白色。例如，当你想要在颜色或图像的顶部插入一个图标时，这些变体是完美的，可以让你轻松地允许尽可能多或少的颜色或图像露出。

大家在进行时，不要忘记那些多用途的品牌颜色，你会发现自己在很多项目中都会用到这些颜色，同时把它们作为你的主调色板。对于我自己的入门工具包，我选择了多种多样的产品色，为自己未来的产品提供了大量的选择。

如果你决定在你的初始构建中添加渐变，那么就要确保你从一开始就添加从左到右和从上到下的渐变，从而给自己一些通用性。

更多知识干货以及其他海外留学的资讯可以关注UXD交互工业产品设计分享或者添加小助手，还可获取讲座直播哦~

|福利大放送 | WELFARE 
对于设计初学者，完成从0开始创作几乎是不可能的，就像学习过程中书读百遍其义自见一样。有了大量的积累，才能在脑海里建立素材库，这些素材库能帮助同学们完成最初的设计想法积累，基于这样的基础再进行个性化的创作，最终才能做出高质量的作品集。全球院校最新作品集免费拿！添加小助手即可获取：

UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外，我们提供不定主题的公开课和内部小组课，教学计划课程由三大部分组成，包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。

本文版权归UXD尤克斯所有  

部分图片来自于网络  

如有侵权请与我们联系