By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
Figma变体组件,创建更高效的设计资产!
2021-06-23 12:16:33    369    0    0
emengweb
 
 

图片

图片来自 Figma官网


Figma作为一个线上协作设计平台,因其强大的组件功能,越来越受到设计团队的青睐。

为帮助用户对组件进行更加高效的管理,2020年11月初,Figma在其网站上发布了组件的变体功能。

Figma官网:https://help.figma.com/hc/en-us


本文主要通过变体组件的创建过程,来向您介绍本次更新中值得关注的功能


目录


图片


以下分为五个章节来叙述:


一.变体组件是什么
二.从零构建变体组件
三.现有组件迁移
四.管理变体组件
五.代码逻辑

以下内容会按照构建顺序进行拆解

一.变体组件是什么


图片


变体组件是什么?

变体组件是一种基于组件的状态属性。


为什么需要变体组件

变体组件能在创建组件和构建设计系统时,帮助用户统一管理组件的多种类型、尺寸、以及状态;可以达到优化设计层级的目的。


图片

多人协作使用变体组件快速且统一


前后变化

使用变体组件前,单个组件的多种类型、状态的管理相对紊乱,而创建变体组件后能够通过资产面板快速选择及切换。

演示:

图片


Before

Figma发布组件变体之前,用户要使用组件,得通过冗杂的资产列表去搜索组件想要切换组件时需在右侧属性面板中翻找组件列表。


After

创建变体组件之后,简化了资产面板组件列表;用户切换选择组件在右侧属性面板中也进行了分类。


图片


二.从零构建变体组件


创建组件

组件是什么:组件是UI界面设计中复用性较高的对象,在Figma中组件(Component)是可以复用的任意对象,通过创建组件可以对该对象进行统一管理。

组件详情文章:如何利用Figma构建组件?


示例:按钮

简单的介绍一下按钮组件的建立过程,后续我们会用到它来创建组件变体


图片


第一步:绘制按钮组件

将图标/文字/矩形背景尺寸排列好


第二步:自动布局

选择图标和文字后,在右侧点击自动布局


第三步:创建组件

全选按钮元素,右键「Create Component」按钮创建组件()


以上3步是创建一个基础按钮组件的步骤,众所周知,按钮组件在设计系统中是一个拥有多种形态的组件。那么在创建变体组件之前,我们需要同时创建其他类型的按钮组件。


组件分类与命名规则

想要创建变体组件,我们尽可能的完善该组件的状态、尺寸、以及组合形式,通过合理的分类排布能够帮助我们更有效的创建。


例如:按钮组件会有类型、尺寸及状态的分类。

在给组件命名时,我们通常也会以分类的排序来进行组件的命名。(例如:Type/类型下会有主要「primary」/次要「secondary」/幽灵「ghost」/虚线「dash」这四个具体名称值;Size/尺寸下会有大尺寸「large」/中尺寸「medium」/小尺寸「samll」三种尺寸值;State/状态下会有默认「default」/悬停「hover」/点按「press」/禁用「disable」四种状态值。)

那么一个大尺寸正常状态下的主要组件的命名为:Button/primary/large/default


图片

按钮组件分类展示


创建变体组件

完成上面的组件创建及命名过程后,我们选择所有按钮组件创建变体组件


第一步:整理并确保每一个都是组件状态

将按钮按照分类方式排列并检查每一个是否都创建成组件()。


第二步:命名

每一个组件都有它自己唯一的名称,双击图层列表修改名称;例如:Button/secondary/medium/default


第三步:全选创建变体

选择所有需要创建变体属性的组件,点击右侧属性面板中的创建变体按钮。

 


第四步:创建后的状态

当组合创建变体属性后,你就可以在右侧属性面板中看到变体的分类属性和值。


图片

步骤详细图


变体组件的属性和值

变体组件的属性和值 (Property&Value)是用来管理变体组件的主要参数,通过修改变体组件的属性和值能够合理管理组件的变体状态。


属性(Property)

属性是变体组件的可变参数,相当于一个变体组件的大分类。例如:按钮组件可以分为「类型按钮」「尺寸按钮」以及「状态按钮」。

值(Value)

值是每个变体组件属性下的可选择项。比如:在按钮类型里分「主要/次要/幽灵/···」等。


图片


使用变体组件

所有按钮组件创建成变体组件后,我们可以在左侧资产「Assets」中拖拽按钮组件至中心画板中,尝试使用一下。


图片


三.现有组件迁移


图片


 

整理现有组件

如果您已有组件库,想要迁移组件到组件变体,那么您可以将组件按照您所想的分类方式进行分类。
示例组件:输入框组件


第一步:整理组件

将输入框按照类型/尺寸/状态/有无提示整理排列。当然你也可以按照你所想的分类顺序进行组件分类。


第二步:检查组件

检查要创建组件变体的组件是否都为组件(❖),而不是实例(◇)


第三步:批量命名

在右侧图层列表中选择需要重命名的组件,右键 Rename。


图片


输入框组件

以AI Design为例,现有输入框组件展示,在输入框变体组件示例中将有无提示作为开关属性(True/False)。


图片

AI Design System输入框组件展示


批量命名

批量命名能帮你快速添加前缀或者修改部分命名,提高创建组件变体的效率。

重命名文章Rename Layers(Figma官方文章)


第一种:统一前缀

选中需要重命名的图层,右键Rename快速重命名,在Rename输入框中输入前缀名称,点击Current name按钮。


图片


第二:批量部分命名

选中需要重命名的图层,右键Rename快速重命名,在Mactch输入框中输入要匹配的命名,在Rename to中输入你想修改的名称


图片


第三:添加数字后缀

选择图层列表右键Rename,点击Number⬆️,那么图层命名则会从上往下按顺序命名。

 


图片


创建变体组件

整理并检查所有输入框组件后,全选组件点击「Combine as variants」创建变体组件。最后在右侧属性面板中查看输入框组件变体。


图片


修复变体组件的冲突值

修复带有冲突值的错误变体组件,集中体现在某些变体组件使用了相同的属性和值。如果任何变体组件具有完全相同的值组合,则Figma会告知您存在冲突。即使变体组件本身在外观上有所不同,您也会看到此错误。
要解决此问题,您需要添加或更新受影响的变体组件的值,使它们具有唯一的值组合。


图片


 

第一种:Master组件的复用导致冲突值

因直接复制组件,而未做任何改变创建成组件的变体组件,会出现冲突值问题。

解决方案:修改其中一个组件变体的样式,保证每个组件变体样式的特殊性。


第二种:创建变体组件时未保证它属性的唯一值而导致的冲突值

两个变体组件的命名属性和值创建成一样也会导致冲突值问题

解决方案:修改其中一个变体组件的命名,检查并对比命名和变体组件是同一个,确保每个变体组件的属性唯一值性。


四.管理变体组件


图片


第一种/修改名称

- 重命名属性:单击属性,然后输入更符合该属性的描述名称。
- 重命名值:双击值并输入新名称。


图片



第二种/排序

- 重新排序属性:选择组件变体集,在右侧属性面板中,选择属性列表左边,直至左侧图标出现,拖动排序。
- 重新排序值:直接选中值拖动排序,但只可在其父集间排序,不可跨其父集。


图片


第三种/删除属性

- 选择组件集,将鼠标悬停在右侧属性面板变体上,点击「—」按钮,即可删除该属性。
- 在删除属性前,请确保没有任何变体使用它。


图片


第四种/新增组件或属性

- 选择该组件变体集,将鼠标悬停在右侧属性面板变体上,点击「···」按钮,可选择新增组件变体。
- 或者新增属性。


图片



五.代码逻辑


图片


命名方式和斜杠「/」

在前端代码逻辑中,常以「/」来进行区分,Figma将这一想法同步化,默认第一个「/」前的名称为组件名称,此后的每一个都是该组件的属性分类;「/」之间以值的名称来命名。

示例:componentname/property1:Type=volue:primary/property2:Size =value:large/property3:State =value:default

 


图片


最后


快来创建你的变体组件吧!

AI Design在Figma更新变体功能第一时间进行了变体组件转换,Figma更新组件变体功能对组件库资产的管理有巨大的改善,它的核心是用来高效管理多状态属性的组件。整篇文章从两个方向介绍如何创建变体组件,无论是从零开始创建变体组件还是现有组件库迁移,创建过程的关键步骤在于分类命名。变体组件能够从一定程度简化组件库层级,也能解决实际应用的效率问题。



上一篇: Figma 社区游玩指南

下一篇: 用自动布局创建动态设计

369 人读过
文档导航