Figma 组件化设计入门！NO.04 组件变体的应用

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

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

文章编辑：@十豆

一、关于教程

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

本节课将教大家如何在 Figma 中应用组件变体设计，通过模拟一个B端注册页面来展示。

二、教程简概

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

#01 建立输入框组件

1. 绘制输入框组件,根据尺寸、填充状态和交互状态设定3种属性。
2. 命名属性，使用斜杠划分不同属性。
3. 建立组件变体，在右侧生成不同属性。

#02 建立单选组件

1. 绘制两种单选状态，命名为on和off。
2. 建立组件变体，右侧以开关形式表示两种状态。

#03 在项目中应用组件

1. 拖拽输入框、单选组件到注册页面。
2. 调整组件位置、编辑文本，设计出简单的注册页面。

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