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

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

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

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

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

  • 变体组件是什么
  • 从零构建变体组件
  • 现有组件迁移
  • 管理变体组件
  • 代码逻辑

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

变体组件是什么

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

1. 变体组件是什么?

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

2. 为什么需要变体组件?

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

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

3. 前后变化

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

演示:

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

Before

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

After

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

从零构建变体组件

1. 创建组件

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

组件详情文章:

2. 示例:按钮

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

第一步:绘制按钮组件

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

第二步:自动布局

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

第三步:创建组件

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

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

3. 组件分类与命名规则

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

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

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

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

△ 按钮组件分类展示

4. 创建变体组件

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

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

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

第二步:命名

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

第三步:全选创建变体

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

第四步:创建后的状态

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

△ 步骤详细图

4. 变体组件的属性和值

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

属性(Property)

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

值(Value)

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

5. 使用变体组件

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

现有组件迁移

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

1. 整理现有组件

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

第一步:整理组件

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

第二步:检查组件

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

第三步:批量命名

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

2. 输入框组件

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

△ AI Design System输入框组件展示

3. 批量命名

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

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

第一种:统一前缀

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

第二种:批量部分命名

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

第三种:添加数字后缀

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

4. 创建变体组件

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

5. 修复变体组件的冲突值

修复带有冲突值的错误变体组件,集中体现在某些变体组件使用了相同的属性和值。如果任何变体组件具有完全相同的值组合,则Figma会告知您存在冲突。即使变体组件本身在外观上有所不同,您也会看到此错误。

要解决此问题,您需要添加或更新受影响的变体组件的值,使它们具有唯一的值组合。

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

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

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

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

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

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

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

管理变体组件

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

第一种/修改名称

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

重命名值:双击值并输入新名称。

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

第二种/排序

重新排序属性:选择组件变体集,在右侧属性面板中,选择属性列表左边,直至左侧图标出现,拖动排序。

重新排序值:直接选中值拖动排序,但只可在其父集间排序,不可跨其父集。

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

第三种/删除属性

选择组件集,将鼠标悬停在右侧属性面板变体上,点击「—」按钮,即可删除该属性。

在删除属性前,请确保没有任何变体使用它。

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

第四种/新增组件或属性

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

或者新增属性。

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

代码逻辑

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

1. 命名方式和斜杠「/」

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

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

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

最后

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

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

欢迎关注作者微信公众号:「AsiaInfo Design」

Figma重大功能更新!学会用「变体组件」让设计效率翻一倍!

收藏 255
点赞 36

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。