在继续阅读之前，请记住并不是每个公司或产品都需要可扩展的设计系统。可能是因为它们：
- 产品非常小
- 项目有非常紧迫的截止日期
- 人力或资金资源短缺
何时设计能够随产品增长的组件？ #
- 大型或复杂的产品： 拥有一个或多个大型产品和复杂组件的公司通常需要具有相同分子结构的设计。
- 长期目标： 有时很难定义公司或产品的长期目标。目标可能会突然改变，因为我们会收到意外的资金注入，使我们能够延长项目的寿命。 在五年后的预测是一种魔力，但在一到两年内找到自己想要去的地方更容易。 如果你不知道自己航行的方向，可以问负责人他们如何看待自己一年后的情况。这将帮助你更优化地安排你的设计系统。
如何创建一个可扩展的设计系统？ #
关键是建立一个良好的分子结构。为了做到这一点...
1. 了解Brad Frost的“Atomic Design (opens new window)”概念。
2. 创建一个类别和子类别列表。
寻找所有在组件中共有的模式，并与开发团队对齐，使用相同的分类法。
最常见的是：
- 第一个类别：类型：这里你将找到最多的变体。我给出了一些我经常使用的示例：用途：主要的，次要的，第三的... 图标：图标，无图标，图标居左，图标居右... 文本： 第二类别：大小： …xs, sm, md, lg…
- 第三类别：状态： 默认，悬停，活动，焦点，禁用…
- 第四类别：反馈： 无， 默认，信息，错误，警告，成功
- 第五类别：数量： 1, 2, 3, 4, 5, 6, 7, 8, 9, 10…
- 第六类别：轴： 水平，垂直
一旦你根据设计和开发团队的需求对组件进行分类，就是时候继续下一步了。
3. 将类别分类成级别
级别是在构建组件的变体时创建的深度步骤。
每个级别允许设计师在figma的“设计面板”中配置一定数量的变体。
当一个组件超过4或5个级别时，我们可能会将其视为“模式”。 （由多个组件组合而成的复杂组件。）例如：卡片，表单...
（这部分将与制作变体同时进行设计）。 1st Level: 大小和数量
- 2nd Level: 状态和类型
现在您已经知道如何对组件进行分类和排序，开始构建它将变得更加容易。
请记住，在构建组件时，您必须按照上面的构建顺序进行（1级：类型，2级：大小，3级：状态，4级：反馈，数量…）。
❗提示：始终使用相同的分类法和顺序，并按升序对子类进行排序。❗（Primary、secondary、tertiary… 或 sm、md、lg、xl…）。
4. 构建组件
将您的组件分解为最基本和简单的“粒子”，即不同类型。为此，请查看重复最多的部分。对于“选项卡”，它将是一个“单元格”。
复制这些变体并更换字体，以获得更大的单元格。
将所有单元格转换为组件并将它们重命名为**“_Base”**。这样可以避免设计团队找到 在图书馆的 em。
复制所有组件并创建尽可能多的实例（原子），以满足所需的变体状态。
选择所有变体，将其转换回组件，并在 Figma 的“设计面板”中按下**“合并为变体”**。
选择变体的内部粒子。要做到这一点，点击下面的紫色圆圈，所有粒子将自动被一次性标记。
重置约束条件（全宽度/紧贴内容）到您创建的变体（原子）。当您将一个粒子放在一个原子内部时，通常不会调整此属性。
通过点击“设计面板”中的“+”属性，并选择“变体”选项来重命名变体。
创建您的第二级和第一类别。在“名称”中，我们将放置第一类别的名称（类型）。在“值”中，放置该属性的值，即子类别（文本、图标+文本、文本+图标、图标+文本+图标等）。
重复此过程以添加第三个 记得在所有组件中始终以相同的方式对类别（变种）和子类别（值）进行排序。
设计分子。Fisty创建了两个相同组件的实例，然后添加了自动布局和下方的边框。
将此块复制四次。并在第2个块中添加一个实例，在第3个块中添加两个实例，并在第4个块中添加三个实例。
重复上述过程，创建第2级别，其中包含第1类别（大小）和第5类别（数量）。
将设计系统视为俄罗斯套娃游戏，并将粒子组合在一起以创建原子和分子组件。这将使您能够快速扩展您的设计系统。
因此，当您明天需要更改变种的设计时，您只需重新设计第1个粒子。
如果您需要创建另一个变种（类型），您只需复制所有状态的原子，并在其中用另一个粒子替换。 当我的组件不能再增加时应该怎么办？
- 创建新的组件，不要修改已有的组件，以避免覆盖设备实例。
很多时候我们会不小心从组件中删除文本或图标，然后创建新的组件，因为这样更快，或者我们改变了一些属性，导致这些元素被覆盖。
所有这些都会妨碍我们设计团队的工作，他们被迫重写一些组件。
**Figma经常不允许我们使用已修改其变体的组件而不更新库。**这会导致设计团队感到被迫在同一时刻更新库，从而延迟交付时间。
为了避免这些烦人的时刻，如果我们没有其他方法来重置一些元素，最好的选择是创建一个新的组件。要做到这一点，复制你的组件，在这个新组件上进行修改，然后删除原来的组件。
在 将以下的Markdown翻译成中文，并删除第一级标题，同时删除其中的图片链接，尽量删除Markdown格式错误和一些无用的段落，重新修饰整篇文章，使文章读起来更自然：这样一来，旧的设计将保持完好，团队将能够继续使用新组件创建屏幕。
- 将组件库与样式分开。
有时候我们在满足设计团队的所有需求时迷失了方向。最后我们会创建出类似弗兰肯斯坦的组件。
为了避免这种情况，构建简单的组件。并通过文档教导他们如何自行创建更复杂的变体，“样式”。
例如：创建选项卡，然后团队可以将其添加到卡片、面板、页面等上面...不要创建由多个组件组合而成的“样式”，因为这样你将为每个产品设计可变的样式。
- 考虑是否真的有必要创建一个变体。
很多时候这只是个例，只会被使用一次。如果是这样的话，也许没有必要创建新的变体，可以通过修改现有的变体来解决。
现在你已经准备好了 开始创建您的可扩展设计系统🙌
最后，我要感谢所有自愿分享设计系统知识的公司和设计师。
我在这里分享两个我认为最好的设计系统：Polaris (opens new window) 和 Ant Design (opens new window)。
正如在我的工作中所说的，设计了多个组件后，发现它们都是按钮的修改：生活就像一个按钮！