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

明智地选择你的Master Components

那么，一个多功能、功能强大的设计入门套件是由什么组成的呢？

组件。

而且数量很多。

创建数百个组件是个大工程，但当它完成后，从那里开始，只需根据需要增加较小的增量，就会变得更加顺利。

这是创建一个入门套件中最需要花费你时间的部分。不要指望在一个晚上喝着热可可就能把你的主组件抽出来。恐怕你必须要多留出一点时间。

罗马不是一天建成的，上次我在维基百科上查了一下，你的Master Components也不是一天建成的。

这是一个漫长的过程，但如果你想建立一些东西，让你以后能比你以前设计的产品更快、更简单，那就必须要做。

总是先从那些较小的组件开始

在建立主组件时，我先从什么开始？

按钮。

而且有很多这样的元素。

像按钮等较小的组件是任何项目中最常用的元素之一，所以首先创建这些组件是很有意义的，然后再去创建更大的组件，如模态、卡片和日历，这些组件在某个阶段不可避免地会以这些较小的组件为特色。

对于我自己的工具包，我创建了Primary.....

....和二级按钮.....

....有以下变体。

按钮/主要/大号/默认

按钮/主要/大号/图标

按钮/主要/大号/左图标

按钮/主要/大号/右图标

除了 "大 "选项之外，我还使用我之前创建的不同文字样式创建了 "中 "和 "小 “变体。

就像我在前面的部分中提到的，对于像设计入门套件这样的东西，从一开始就有太多总比太少好。

然后我转到了字段和输入，有如下的变体。

字段和输入/标准/大字段/默认值

字段和输入 / 标准 / 大型 / 默认 + 标签

字段和输入 / 标准 / 大型 / 文本区域

同样，有几种尺寸的变体："大 "和 "小"，以满足桌面和移动端的设计需求。

你的小组件将成为更大的组件中的一部分。

正如我之前对按钮和字段组件所做的那样，我知道它们将成为一个更大的组件（即卡片、模态）的一部分，所以我继续前行，并创建了其他较小的组件，如头像.....

...占位符....

....和Seek Bars..

这样做，让我能够将这些较小的组件嵌套在较大的组件内，当它来建立这些组件时，我就可以将这些较小的组件取出来。

现在，有一些人喜欢先创建一个大的组件（即卡片），然后把它所包含的所有元素（即按钮、占位符、头像等）分离出来，再分成更小的组件。

就我个人而言，我喜欢先设计这些较小的组件，把它们都准备好，这样我就可以跳转到创建一个较大的组件中，然后快速地从我所拥有的东西中挑选，直到我对最终的设计满意为止。对我来说，这样做会让我在制作这些类型的Component时更加流畅。

总之，我不想占用我的时间。我不想在这里占用你太多宝贵的时间。

下面是一些精选的部分：

头像

按钮组

日历

卡片

图表

评论

地图

媒体控件（视频和音频）

模态

通知

分页

占位符

工具提示

只要记住，像这样的入门套件是永远在发展的。它不会一成不变。所以你没有在你的套件中添加那些波浪形的图表组件？这不是什么大不了的事。你可以随时回来再添加这些。

只要记住，把最常用的UI元素添加到足够多的用例中去，你就可以完成你的初始构建了。

就像我之前提到的那样，构建出一个Kit的这一部分需要花费的时间是最长的，其中的一部分会质疑你一开始为什么要开始构建它，但要知道，一旦你把它构建出来，你的满足感是不可估量的，你再也不用担心开始一个设计项目时盯着空白的画布发呆了。这一定是件好事吧？

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

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