Figma 学习笔记 – Variants
2023-09-27 14:23:55 时间
参考
定义与用途
Variants 是 Component 的扩展使用方式. 它就像 HTML 元素的属性一样, 通过修改属性, 元素就会变成相应的样式.
通常我们用它来实现 state (状态), 比如: hover, focus, error.
创建
先把所有 Component 做出来 (当然后面要加也是可以的), 并且在旁边写上它对应的属性 (这样会比较容易管理).
假设我需要一个 submit button component, 它有 2 个属性, Size, Color 分别的值是 Big, Small, Red, Blue
笛卡尔积就会有 4 种样式下的 button (我们可以做一个抽象的 Component 来管理, 但我这里就简单做 4 个 component 演示就好)
替 Component 依据属性值命名, 用 / 作为分隔符
然后选中所有 Component 点击 combine as variants
如果 property 很多的话, 笛卡尔积到来它会比较乱
使用
创建一个 Instance 就可以选择属性了.
修改
如果要添加新的 property 或 component 可以通过右边操作栏的控件.
相关文章
- SpringCloud学习笔记(3)——Hystrix
- 【学习笔记73】设计模式
- Dubbo -- 系统学习 笔记 -- 示例 -- 只订阅
- Dubbo -- 系统学习 笔记 -- 目录
- matlab学习笔记11_2高维数组操作 squeeze,ind2sub, sub2ind
- 机器学习笔记之深度玻尔兹曼机(二)深度玻尔兹曼机的预训练过程
- 2022 年首发!这份 Spring 核心知识笔记让你彻底学明白 Spring
- LVS学习笔记及总结(思维导图版)
- [C#] Direct2D 学习笔记 (一)vb.net转换为c#
- UE4引擎学习笔记:Blueprints Visual Scripting->Basic Scripting
- Python学习笔记之浅拷贝和深拷贝
- MySQL基础学习笔记
- redis学习笔记
- Owl 学习笔记之一--app
- 【Struts2学习笔记(4)】指定需要Struts 2请求后缀的常量定义复杂的过程
- android学习笔记一
- 学习笔记(36):Python网络编程&并发编程-IO模型介绍
- 现代制造工程笔记04-精密超精密加工和特种加工(主要掌握加工原理加工条件)
- python类的学习笔记2