恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【04】Figma Variants组件集/变体组件
0.0°
2020-11-26 原创文章 经验/观点 举报 2916 8 5 0

这个月初,Figma更新了其组件功能,称为"Variants"(变体组件/组件集/超级组件),直接让Figma的组件功能的实用性再上了一个台阶,使我们可以更加高效的去创建组件,管理组件。芜湖~起飞~~~


Figma 官方对其超级组件使用的说明,害怕英文的同学可以查看这个链接,有个老哥已经将原版的翻译了一遍:https://www.figma.com/community/file/906004463907915536


按照官方的教程走完一遍之后真的是感觉世界都明亮了,脑子里直接蹦出四个字”太好用了!“,刚好最近进行到我们一个项目的设计交付和对接阶段,借着这个机会对页面中的组件进行了一下细致的梳理,使用过程中的感受还是蛮爽的

扯了这么多,那么这个变体组件到底是个啥呢


1- 什么是变体组件


变体组件其实就是支持我们对样式相近或者功能类型的组件整合成一个整体,这样在”Assets“板块里就避免出现那种一大堆看着眼花缭乱的相似组件了,我们可以根据自己的需要对组件进行分组和整理。

以按钮为例可以对按钮进行多组分类,没个变体组件的集合 包含主标题,属性,值三个属性,可以在创建是直接通过"/"进行分组。这个在之前已经熟悉"/"分组的同学需要稍微适应一下,这里Figma 官方有个比较清晰地图可以看出这一套流程。

从左到右看,第一个单词为变体组件集名称,一般会以功能进行划分,从第二个单词开始就是属性的分类,上图中分别有 [‘Variant’ , 'Size' , 'Stata' , 'Icon'] 四组,而这四组属性分别有对应的值(一对多)。


除了在命名的时候进行属性和值的设置,在创建好变体组件集之后,也可以通过右侧的功能按钮进行属性和值的添加。


如果需要添加一个属性的值需要通过添加一个变体,然后改变其某一属性的命名,这样就实现了一个值的情况的添加。


创建好的变体组件,在Assets栏目里值只有一个默认的示意组件展示,避免了之前那种一堆组件迎面扑来的混乱。

这样在使用的时候直接从资产面板里拖拽出来,再根据实际情况进行属性的更换就好了。



2-在项目中实际应用变体组件


下面我们来看下在实际的工作流中如何用变体组件提升自己的效率吧~

在刚刚完成的项目流程中我将页面中用到的主要组件都做了梳理:



01.开始做一套变体组件

上面便是这次要实现的一套标签组件集,这里说些题外话,Figma的一些细节做得真是太出色了。在画板中选中这个组件集后,资源面板会相应的激活提示是该组件,同时面板中的组件集会提示包含的组件的值的数量,上面这组一共有16个变体。


02.先创建一组基础的标签样式

我们先通过 Figma 特别出色的 Frame 和 自动布局来创建一组标签样式,直接在画板中输入文字,然后使用快捷键 ctrl+alt+G 或者 commond+alt+G 给文字添加一个Frame, 然后再右边的属性栏里点击Auto Layout 旁边的+号为Frame添加自动布局效果。

这里已经是新版的Auto Layout 3.0了,通过控制排版选项和padding值控制文字在布局中的位置,这里我给的是 水平垂直居中,上下间距4,左右间距12。


下面对该模块命名为 标签/蓝色/百分比/图标/激活 ,看过上面的介绍就可以知道,我在这里相当于给了一个变体组件集的名称——标签,并同时设置了4个属性值:蓝色,百分比,图标,激活。


添加完之后可以在画板中看到我们已经归类的组件集,并且属性栏里也出现了4个属性名称和默认的属性值,然后我们可以针对这几个属性名称和属性值进行调整,直接鼠标双击属性值就可以输入名称了。


03. 创建颜色的变体样式

有个这个变体集之后,就可以直接点击里面的组件进行复制了,每复制添加一个,记得对它的值进行定义,变体集里如果有同名的组件的话,只会默认显示一个。

这里我先创建的其他两种颜色样式的常规文字标签,这样后面添加其他样式时颜色选项里就有现成的颜色可用啦,新创建的组件直接改变其第一个 颜色 值里的属性值名称就好了,分别成为绿色和橙色。


这样我们就得到了一组可以切换颜色的组件,使用是直接从资源面板里拖到画板里使用就可以了,需要更改其他颜色的话就在右侧的属性面板里选择颜色名称就好了~

你会发现这里颜色的选择方式和之前更新变体组件前的操作方式一样,都是通过列表进行选择,不过下面的激活状态却变成了一个开关的样子,这个开关切换需要通过给到特定的值实现。目前Figma的建议是 Ture / False 以及 on / off ,将属性设置为这两个值边可以看到这个开关效果,当然超过两个值的话就需要用列表进行呈现了。



04. 创建百分比的变体样式

与上面的类似,创建有无百分比的组件样式可以使用同样的过程,不过这里我们可以结合一下Auto Layout 这样在后面我们更改组件数值时,整个标签的宽度也可以自动的去适应文字。

具体的方式就是,先复制以文字,由于前面在创建常规样式时已经添加了一层自动布局,因此一复制新添加的文字就会自动排列在后面。

接下来将两个文字同时选中再添加一层 Auto Layout,这样就可以通过元素间距的数值选项来控制两个文字间的距离了,填上相应的数值,样式就创建完毕啦~

最后记得将属性值改一下,将激活和未激活状态的蓝色按钮的百分比 都改为 on。


完成创建后,就可以实现使用开关按钮控制标签里百分比的显示与否了,使用同样的流程,把绿色的百分比组件样式也添加一下吧~(项目中没有用到橙色的百分比样式)


05.创建带图标的变体样式

添加图标的过程与上面类似,只需要将图标添加到新增加的组件里面,并设置好组件集的命名就可以了。

为了演示方便,这里我已经做好了一个关闭的icon放在整个项目里了,只需要从资源面板里拖出来这个关闭icon放在文字后面。

同样的,选中图标和文字设置一个 Auto Layout ,再调整一下自动布局里内容的位置模式就大功告成啦~


经过这一系列的骚操作,我们就得到了这样一个简洁又明了又可执行性相当高的组件集合~


简单整齐的资源面板,排版舒适的画板展示,操作方便的属性面板~~  Wow  Awesome!令人忍不住赞叹一声,这才是组件该有的样子,Sketch 快去墙角画圈圈!


3-总结


Figma更新组件变体功能对组件库资产的管理有巨大的改善,整个组件的使用效率直接翻倍提升了,越来越多的共享的UI Kit已经开始大量被创造出来了,设计师们可以通过这些kit包极大的提升自己的工作效率,甚至直接可以被开发组现成的套用。

组件化的是一个趋势,Figma在这个时间点的更新,也极大的促进了这个趋势的进展,设计师朋友们快去形成自己组件体系吧,这样才能在未来的UI行业的发展中不被无情的抛下~




Powered by Froala Editor

更新:2020-11-26

收藏

8人已收藏

爱笑的Plus

聊着产品,做着设计,喝着咖啡,笑着生活

  • 11

    作品

  • 46

    粉丝

  • 75

    关注

  • 小尤 IP形象设计
  • Pokémon-宝可梦系列 C4D案例小结
  • 佳作丨知识库云端记录APP
  • 【03】Figma 组件和自动布局的应用

    猜你喜欢

      2020-11-26 原创文章 经验/观点 举报 2916 8 5 0

      【04】Figma Variants组件集/变体组件

      0.0°

      你确定要举报【04】Figma Variants组件集/变体组件

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年11月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录