Figma Button Components (Variables, Tokens, Variants & Component Properties ) | Design System Part 5

Summary

本视频教程介绍了如何设计一个包含240种变体的按钮组件库。通过八个步骤：规划、构建、着色、变量化、命名、组件化、原型制作，详细展示了从设计到实现的完整过程。视频还提供了Figma的练习文件和图标资源链接，适合初学者和有经验的设计师。

Takeaways

• 📚 本期视频是设计系统系列的第二阶段，主要关注组件设计。
• 🔍 即使之前没有跟上系列，观众也可以从中间开始学习。
• 📎 视频描述中提供了练习文件和Figma的注册链接。
• 🔘 视频首先介绍了如何设计按钮，这是设计系统中最常见的组件之一。
• 🎨 设计按钮的八步系统包括：规划、构建、着色、变量化、命名、组件化、原型化和最终完成。
• 🖌️ 按钮设计中考虑了两种类型（主要和次要）、不同状态、形状（圆形和圆角）和大小（小、中、大）。
• 🌈 按钮的颜色设计包括主色和次色，以及不同的状态（默认、悬停、聚焦、选中、禁用）。
• 🔢 变量化步骤中，创建了用于控制按钮边框半径、填充、图标大小和间距的标记（tokens）。
• 🔄 使用模式（modes）来创建不同尺寸的按钮，如小、中、大。
• 🏷️ 命名和组件化步骤中，通过命名工具将按钮的不同属性（如类型、状态、形状、大小、图标）标准化。
• 📐 最后，通过组件属性将按钮的文本和图标设置为可替换的，以便在设计面板中轻松更改。

Q & A

视频的主要内容是什么？

视频主要讲解如何在设计系统中创建按钮组件，包括规划、构建、上色、变量化、命名、组件化和原型设计等步骤。

创建按钮组件的八个步骤是什么？

创建按钮组件的八个步骤是：规划、构建、上色、变量化、最大化、命名、组件化和原型设计。

如何规划按钮的类型和状态？

通过定义按钮的类型（如主要和次要）、形状（如全圆角和圆角）、大小（小、中、大）以及状态（默认、悬停、聚焦、选中和禁用）来规划按钮。

在构建按钮时，首先需要做什么？

在构建按钮时，首先需要添加文本组件，然后将其放入自动布局中以控制填充和间距。

如何上色按钮以区分主要和次要按钮？

主要按钮使用品牌颜色填充，次要按钮使用灰色背景和品牌颜色的边框来区分。

如何创建按钮的变量并应用这些变量？

创建按钮的变量，如圆角、间距、水平和垂直填充、图标大小等，并应用到按钮的各个部分，以便在不同模式下控制它们。

如何使用命名方式为组件添加属性？

通过在组件命名前加上属性名称和属性值，例如'type=primary'，'state=default'等，以命名方式为组件添加属性。

如何将按钮转换为组件集？

选择所有按钮，创建一个组件集，然后所有的变体和属性将自动生成并可用。

如何为组件添加文本组件属性和实例交换属性？

为文本组件添加一个文本属性（如'Label'），并为图标实例添加一个实例交换属性，以便在实例中快速更换图标。

如何在实例中使用这些属性？

在实例中可以通过设计面板更改按钮的文本和图标，从而快速应用和切换不同的属性。