Figma 组件：增强你的设计系统
在数百个屏幕上更新相同的 UI 组件非常麻烦。但有更好的方法 - Figma 组件使更新设计元素变得像更改一个主副本一样简单。
让我们深入了解组件的工作原理以及如何有效地使用它们。
组件到底是什么？
组件是可重复使用的设计元素（例如按钮、卡片、导航栏），您可以在整个设计中使用它们。它们的工作原理如下：
非常整洁，对吧？
您实际上可以定制什么？
组件实例中的所有内容并非都可以更改。以下是您正在处理的内容：
**无法更改：**
**可以改变：**
变体：功能更多的 Figma 组件
有时你需要同一组件的不同版本。这时变体就派上用场了。
以按钮组件为例 — 您可能需要：
您无需创建单独的组件，而是可以通过变体在一个地方处理所有这些状态。
创建第一个组件
它非常简单：
对于变体：
如何在设计中使用 Figma 组件
何时应该使用 Figma 组件？
组件非常适合：
节省时间的专业技巧
命名组件和属性
保持简单但清晰。你不需要一本小说——只要知道它是什么就行。
组件名称应该一目了然，格式为“组件/属性值”
✅ 这样做：
❌不是这个：
组件组织
考虑一下您的团队将如何使用这些组件。将相关内容分组在一起：
使用多维组件集
当您构建需要扩展的设计系统时，Figma 中的多维组件集将改变游戏规则。它们不仅仅是 Figma 的巧妙技巧——这种方法反映了 Material-UI (MUI) 等流行组件库处理变化的方式。
这个想法是：您无需创建大量单独的组件，而是使用属性来定义不同维度的变化。让我们通过一个按钮示例来分解它：
这比放置 18 个独立组件要简洁得多。
✅ 执行以下操作：**按钮/轮廓/主要/悬停**
❌ 不是这个：**Button/PrimaryOutlinedonHover**
管理 Figma 组件中的更改（不破坏所有内容）
组件的问题是——更改可以同时影响许多设计。这很强大，但也可能令人恐惧。
避免灾难的一些提示：
处理已删除的组件
如果您不小心删除了主组件，请不要惊慌。只要还剩下一个实例，您就可以恢复整个组件。
何时打破 Figma 组件的规则
有时您需要将实例与其主实例分离。这没问题，但请先尝试以下操作：
仅当上述方法均无效时才分离。为什么？因为分离的实例不再从主组件获取更新。
组件的真正威力
组件的作用不仅仅是保持事物井然有序。它们还可以：
将 Figma 组件转换为代码
如果您使用 Builder 的 Visual Copilot Figma 插件，您可以利用组件映射功能在 Figma 文件中的设计组件与其对应的代码组件之间创建直接链接，以确保项目的输出一致。从 Figma 到代码不应只是将设计转化为代码；而应该是将它们转化为代码。
底线
Figma Components 乍一看似乎需要额外的工作，但这样做是值得的。开始在下一个项目中使用它们 — 即使只是用于按钮和卡片。一旦你看到它们节省了多少时间，你就再也不会回头了。
请记住：Figma 组件的最大错误不是使用错误，而是使用不够。
想要了解有关将 Figma 设计转换为代码的更多信息？查看我们的 Figma 到代码转换指南。