Figma组件属性基础理解和使用

Figma社区文件地址

https://www.figma.com/community/file/1106836088544716224

最近Figma更新了一个和变体类似的功能,叫做组件属性,组件属性和变体的搭配使用会让您的组件库更加的精简和完善,但是又很多朋友仍旧不理解组件属性的好处和怎么去使用他们,今天这篇文章就是教大家理解和基础的使用组件属性的

1.举例说明<组件属性>的好处

如果我们要做一个简单的button组件,需要满足以下条件:

  • 按钮有大、中、小三种尺寸
  • 按钮左侧右侧都可能出现图标,图标出现可能在左侧,也可能在右侧,可能同时出现,可能不出现

按照的以前的常规的可控性强的组件变体思路,应该要做一个带有12个组件的变体,如下面两图中所示:

Figma组件属性基础理解和使用
只用变体时

但是在最近更新的新的功能中有了<组件属性>这个功能之后,实现同样的功能只需要下图所示的包含三种组件的变体就可以(不要在意我对类型的命名,只是方便理解)

Figma组件属性基础理解和使用
变体+组件属性设置

更方便的是——编辑按钮文本文字更加方便,怎么个方便法看图中的GIF

Figma组件属性基础理解和使用
Figma组件属性实例

小结一下:

合理的利用<组件属性>功能更加细化了变体的设置类型,在与旧的变体设置组件的基础上,达到同样变体效果的情况下,产生更少的组件,在子组件的设置项也就更加方便使用了,例如直接修改文本文字

2.如何设置案例中的组件属性

下面给大家讲一下如何设置上述按钮中<组件属性>,,大家可以参考一下设置方法和思路,命名就不要参考了

2-1.先创建一个按钮主组件

Figma组件属性基础理解和使用

创建好这个按钮组件之后,通过上面的问题分析一下:

首先按钮的尺寸大小不适合组件属性,因为组件属性只有布尔类型、交换类型、以及文本类型三种,具体可以看官方文档,而此时我们只是创建了一个主组件,所以设置尺寸大小方法最后,现在只需要先设置组件属性即可

接下来分析组件属性,就三个属性:显示隐藏左侧图标显示隐藏右侧图标文字实现面板直接编辑

2-2 设置显示隐藏左侧图标和右侧图标(<组件属性>-布尔类型属性设置方法)

设置显示隐藏最好选择Boolean(也就是布尔类型,方便设置成开关的方式)

Figma组件属性基础理解和使用
设置显示隐藏最好选择Boolean

选择Boolean,然后输入显示左侧图标;再次面板中选中Boolean,然后输入显示右侧图标,操作看下图

Figma组件属性基础理解和使用

2-3.为按钮文字设置可编辑属性(<组件属性>-文本类型属性设置方法)

设置好了显示隐藏左右侧的图标之后,接着设置可编辑的文本属性,具体如下GIF所示

Figma组件属性基础理解和使用

2-4.最后设置变体(设置大、中、小三种类型的变体)

设置好了显示隐藏左右侧的图标之后,接着设置可编辑的文本属性,具体如下GIF所示

Figma组件属性基础理解和使用

2-5.思路总结

  • 就是在做组件之前,可以先设置好组件属性再设置成变体
  • 显示隐藏属性最好用布尔属性
  • 可编辑的文字用文本属性
  • 交换属性没做案例,就是跟从前交换子组件一样的
  • 组件属性+变体才能更快更灵活的打造组件库

2-6.什么时候用变体,什么时候用组件属性?

在以下情况下使用变体:

  • 发生重大的视觉变化,例如大小,颜色或其他样式的变体。
  • 需要传达一种交互状态(例如:悬停)

在以下情况下使用组件属性:

  • 组件具有可切换的配置(例如是否带图标的版本)
  • 组件具有需要自定义的实例或测试的实例

3.组件属性的一些参考文档

组件属性的一些参考文档,大家可以看下

作者:No-One,如若转载,请注明出处:https://www.uifig.com/2273.html

(2)
上一篇 2022年4月2日 下午3:44
下一篇 2022年5月19日 下午2:24

相关推荐

发表评论

您的电子邮箱地址不会被公开。