Figma 组件化设计入门！NO.03 创建组件&组件变体

教程作者：@涛哥UI设计（授权转载）

交作业：微博搜索话题 #优设每日作业# 进入话题页即可发布作业

文章编辑：@十豆

一、关于教程

欢迎来到涛哥UI设计，这个系列教程我会带着大家学习如何在 Figma 中实现组件化设计。

通过第 3 节课的学习，你将掌握组件与组件变体的创建。

二、教程简概

详细操作请看文章开头的视频教程演示。

#01 创建组件

1. 在样式页面新建组件页面，创建示例按钮组件。
2. 右键点击元素选择“Create component”生成组件。
3. 在项目页面使用生成的组件。

#02 组件和子组件

1. 拖入画板的组件为子组件，可独立修改。
2. 原组件为主组件，主组件改动会影响子组件。
3. 子组件改动不影响主组件，可通过“Push to main component”传给主组件。

#03 创建组件变体

1. 框选多个子组件，如按钮的类型、尺寸和状态变体。
2. 点击“Create variants”生成组件变体。
3. 为变体添加维度属性，如按钮的类型、尺寸和状态。
4. 在每个维度内分类命名元素，构成变体选项。
5. 在项目中可通过变体属性进行切换。

学完这篇教程的人还在学…