Figma中使用变体(variant)设计Button(按钮)组件的思路讲解

75

Figma中使用变体(variant)设计Button(按钮)组件的思路讲解

Figma设计按钮

我创建了一个具有4个属性的按钮。例如,在图像中,您看到一个具有以下属性的变体:大小;大号;款式 文字+图标,类型;初级,悬停;离开。

让我提供有关该按钮的更多信息。示例按钮的填充值为:左右16px,上下5px。图标的高度和宽度为34px。字体,SF Pro Rounded Bold 34px。最后,背景色为#194FDA。此按钮是组件的变体。

并且所有变体如下所示;

我使用变体,一切都很好。那如果我想改变我的风格指南怎么办?例如,当我想更改用作主要颜色的颜色时,选择带有所有变体的Button组件。然后,从右面板一起更改颜色。而已;

注意:我尚未从样式指南中更改“原色”。为了更易于理解和进行比较,我分离了按钮上的颜色样式。

我可以做到,尽管选择每个都具有挑战性。通过这种方式,我可以完全更改颜色,笔触属性,效果属性和填充值。但是,当涉及到排版,图标功能等时,该过程将变得更加困难。例如,我们通常在框架中使用图标。因此,当我们要更改图标时,我们必须单击多次,直到选中框架中的图标。想象一下,您为10个图标完成了此操作……烦人。

如果尝试,即使集体选择,也会看到过程花费很长时间。

设计主按钮

解决方案;在变体之外创建主组件。它有3个变种为小,中,大小属性。

主按钮组件

主组件做什么?在创建新组件时,我们从主组件中获取一个实例,并将更改应用于该实例。因此,所有变体都连接到主组件。简而言之,当我对主组件进行更改时,此更改将反映在所有变体中。我将GIF上的24px图标替换为34px,并且在所有变体中都可以看到它;

应该考虑什么?

重要的!从主组件创建变体时,首先复制所有实例,最后选择多个组件会更正确。这样,所有变体将是直接连接到主组件的嵌套组件。让我告诉你我的意思;

图1

我在图1中复制了两个按钮。从主组件复制后,我创建了按钮组件以从这两个主组件继承它。这是我使用的方法。

下图是我避免但不推荐使用的方法;

图2

在这里,我创建了第一个副本作为组件。然后我将其命名为First Instance。然后,我复制了“第一实例”组件并将第二个副本创建为一个组件。我将其命名为Second Instance。

如果看图2,我们可以看到嵌套的结构。如果我们只想对图2中的First Instance进行更改,则这是不可能的,因为Second Instance继承自它。我们所做的所有更改也将应用于“第二实例”组件。

但是在图1中,我们可以分别更改每个组件。每个组件仅继承于主组件。

结果

使用主组件将使我们免于手动样式更改。我们都将节省时间,而且绝对会减少工作量。如果适合您的系统,我建议您尝试一下。注意:请注意仅继承主组件✌️

继续阅读与本文标签相同的文章

技巧教程

ProtoPie原型作品分享【第一期】

2021-1-31 22:44:57

干货

2020年应该使用哪种UI设计工具?设计工具的现状分析

2020-6-5 2:42:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索