Figma入门-组件变体

Figma入门-组件变体

前言

在之前的工作中,大家的原型图都是使用 Axure 制作的,印象中 Figma 一直是个专业设计软件。

最近,很多产品朋友告诉我,很多原型图都开始用Figma制作了,并且很多组件都是内置的,对各种原型图的制作及其友好,只需熟悉一下基本的操作即可上手。

所以我打算一探究竟,听说的终究是听说,自己上上手才是真的。

所以接下来的文章我打算记录从0开始上手 Figma 的过程。

本系列直接从实操开始,有所错漏或者操作错误,还请大家指正。

如果有更高效的使用方式,也欢迎交流。

本篇文章我们来讨论组件变体的使用,一键管理多状态组件。

变体(Variants)功能是Figma中一个革命性的特性,它允许设计师创建和管理具有不同状态或属性的组件。

什么是变体

Figma中的变体是一种允许设计师创建和管理具有不同属性或状态的组件集合的功能。

通过变体,设计师可以将多个相关的组件组织在一起,形成一个统一的组件集,从而简化设计流程,提高设计的一致性和可维护性。

如果你创建过一个组件的多个状态,则可以尝试一下变体

从零开始创建变体

比如我们要做一个移动端底部导航栏,那么就需要去弄好每个导航被选中的样式

这里我们已经设置好了选中第一个导航的样式,那么还需要设置另外的三个;

我们选择创建组件 (ctrl+alt+k) ,不选创建为多个组件因为我们这四个圆就是一组

再点击创建变体

之后的变体直接点击【+】创建就行了,我们创建四个变体,分别设置四个变体的选中状态

然后这样就创建好了,如果需要更改变体名称,需要注意的是命名需要遵循 key=value 这样的规则

变体的使用

分别取上不同的名字后如果我们要去在页面以这个变体做交互,那么我们先在变体内做简单的交互,例如第二个变体点击第一个圆切换到第一个变体以此类推;

其实是可以在变体内就把交互动作设置完,例如下图,但太麻烦了我们去页面做

来到页面,我们把刚刚设置的变体拖出来充当一下移动端的底部导航栏。

我给每组变体的命名就是 第( )个;

我们可以点击第二三四个圆分别给他们做上交互,可以看到动作为【修改为】,然后选对应值;

这样设置完后就简单的做出了一个变体交互

总结

在前面的文章中,我们就用过一些带配置项的组件,它们的实现方式应该就是组件变体。

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

相关推荐
向上的车轮4 天前
UI产品经理基础(四):用价值链视角来分析项目需求
产品经理
梓贤Vigo6 天前
【Axure高保真原型】纵向图片轮播
交互·产品经理·axure·原型
结构化知识课堂6 天前
Axure项目实战:智慧城市APP(四)医疗信息(动态面板、选中交互应用)
人工智能·智慧城市·交互·产品经理·axure·动态面板
Black_Rock_br6 天前
使用 Cursor、MCP 和 Figma 实现工程化项目自动化,提升高达 200% 效率
运维·自动化·figma
百事不可口y7 天前
【产品小白】需求分析的进阶
ui·产品运营·产品经理·axure·需求分析·用户运营
风流 少年11 天前
产品经理总结
产品经理
东边有耳13 天前
银行核心账务设计入门必读
后端·架构·产品经理
Mapmost16 天前
【性能优化黑科技·认知篇】你的三维场景为什么卡?先搞懂这几个指标!
性能优化·交互设计
猴哥聊项目管理17 天前
信创环境下TOP5甘特图工具对比:从功能到适配性测评
项目管理·产品经理·甘特图·团队协作·项目管理软件·国产信创·甘特图工具
Dontla18 天前
Figma介绍(基于云的协作式界面设计工具,主要用于UI/UX设计、原型制作和团队协作)
ui·ux·figma