在过去的几周里，我一直在构建我们 Gusto（我工作的地方）的 UI 套件，这是一个包含我们所有设计模式和组件的 Figma 文档，以便我们团队的设计师可以随时进入，选取他们需要的组件，然后继续解决他们试图解决的问题。
自从我开始以来，我学到了一些东西。首先，构建 UI 套件是一项非常精细的工作，需要很长时间（尽管在此期间它非常令人满意）。但最重要的是，将 Figma 组件嵌入到其他组件中就像魔法一样。
原因如下。
首先，需要说明的是，我试图将我们的组件分解成最小的、最小的块。例如，我们的面包屑、选项卡和进度条组件彼此独立，我将它们全部转储到一个“符号”页面中。
以下是如何开始构建表单元素的示例
据我所知，许多 UI 套件都是这样设计的——有一个欢迎页面介绍此文档的用途和使用方法；有一个“符号”页面，设计系统人员将在其中维护从按钮到表单的所有内容，作为符号或组件；然后通常还有一个页面包含这些符号的示例，表示最终的应用程序。
Shopify 的设计系统 Polaris 也是这样使用他们的 Sketch 文件的，但我从其他大型设计团队那里看到的许多示例也是如此。
但无论如何，回到我在 Figma 中的设计——请注意，在 ProgressBar/Two 和 ProgressBar/Three 组件的名称中使用了正斜杠 (/)。
好吧，这是 Figma 用于识别 实例 的命名约定。这意味着当设计师从 UI 套件中拖入 ProgressBar 组件时，他们可以在不同的选项之间切换，如下所示
这很不错！但是，一旦我将我们的 UI 分解成这些微小的组件，我便开始思考如何将这些部分组合在一起，以便让我们的设计团队更容易使用。我很快意识到，在我们的应用程序中，我们有像面包屑或进度条这样的导航项目，但它们始终与标题相关联。一旦我弄清楚了这一点，我就开始了一系列名为 Header/Default、Header/Breadcrumbs、Header/ProgressBar 等的新组件，这些组件都嵌入了所有这些组件。
因此，现在当设计师将 Header 组件拖入他们的模型中时，他们可以执行以下操作
我们正在切换不同的 Header 实例，目前看起来效果并不明显。但是！由于我们在 Header 组件中嵌套了组件，因此设计师可以跳到子组件（如 ProgressBar）中并对其进行更新
多么整洁啊！同样，这目前看起来并没有特别有用，但在更大的组件中嵌套组件意味着您可以开始以巧妙的方式使用它们。
有趣的地方在于：在 Gusto，我们为客户类型提供了两种不同的 UI。我们有运行工资单的管理员，以及可以访问其帐户以查看他们已获得多少报酬的员工。两者都有不同的导航和选项，因此我为它们创建了两个组件：Frame/Admin 和 Frame/Employee。
这两个组件具有侧边栏和导航项目，但随后被放置到一个名为 Layout/Default 的单独组件中，我们在其中放置了 Header 组件。但是，由于这些组件是实例并嵌套在一起，因此我们可以开始将 UI 的各个部分组合在一起以获得我们想要的精确界面。
现在，每当设计师需要在不同的 UI 之间切换时，他们可以使用这些嵌套组件和实例以超快的速度在它们之间切换。我刚刚开始尝试使用它，但想法是通过使用这些嵌套组件，您可以让人们能够在其中切换不同的变体，同时还为更大的布局提供一个不错的 API。
如果您在 Figma、Sketch 或其他设计工具中使用实例——请告诉我！我一直在寻找改进此方面的方法，但我认为这肯定是一个良好的开端。