原文链接：https://www.uifig.com/2273.html
最近Figma更新了一个和变体类似的功能，叫做组件属性，组件属性和变体的搭配使用会让您的组件库更加的精简和完善，但是又很多朋友仍旧不理解组件属性的好处和怎么去使用他们，今天这篇文章就是教大家理解和基础的使用组件属性的
1.举例说明<组件属性>的好处
如果我们要做一个简单的button组件，需要满足以下条件：
- 按钮有大、中、小三种尺寸
- 按钮左侧右侧都可能出现图标，图标出现可能在左侧，也可能在右侧，可能同时出现，可能不出现
按照的以前的常规的可控性强的组件变体思路，应该要做一个带有12个组件的变体，如下面两图中所示：
只用变体时
但是在最近更新的新的功能中有了<组件属性>这个功能之后，实现同样的功能只需要下图所示的包含三种组件的变体就可以（不要在意我对类型的命名，只是方便理解）
变体+组件属性设置
更方便的是——编辑按钮文本文字更加方便，怎么个方便法看图中的GIF
小结一下：
合理的利用<组件属性>功能更加细化了变体的设置类型，在与旧的变体设置组件的基础上，达到同样变体效果的情况下，产生更少的组件，在子组件的设置项也就更加方便使用了，例如直接修改文本文字
2.如何设置案例中的组件属性
下面给大家讲一下如何设置上述按钮中<组件属性>,，大家可以参考一下设置方法和思路，命名就不要参考了
2-1.先创建一个按钮主组件
创建好这个按钮组件之后，通过上面的问题分析一下：
首先按钮的尺寸大小不适合组件属性，因为组件属性只有布尔类型、交换类型、以及文本类型三种，具体可以看官方文档，而此时我们只是创建了一个主组件，所以设置尺寸大小方法最后，现在只需要先设置组件属性即可
接下来分析组件属性，就三个属性：显示隐藏左侧图标、显示隐藏右侧图标、文字实现面板直接编辑
2-2 设置显示隐藏左侧图标和右侧图标（<组件属性>-布尔类型属性设置方法）
设置显示隐藏最好选择Boolean（也就是布尔类型，方便设置成开关的方式）
设置显示隐藏最好选择Boolean
选择Boolean，然后输入显示左侧图标；再次面板中选中Boolean，然后输入显示右侧图标，操作看下图
2-3.为按钮文字设置可编辑属性（<组件属性>-文本类型属性设置方法）
设置好了显示隐藏左右侧的图标之后，接着设置可编辑的文本属性，具体如下GIF所示
2-4.最后设置变体（设置大、中、小三种类型的变体）
设置好了显示隐藏左右侧的图标之后，接着设置可编辑的文本属性，具体如下GIF所示
2-5.思路总结
- 就是在做组件之前，可以先设置好组件属性再设置成变体
- 显示隐藏属性最好用布尔属性
- 可编辑的文字用文本属性
- 交换属性没做案例，就是跟从前交换子组件一样的
-
2-6.什么时候用变体，什么时候用组件属性？
在以下情况下使用变体：
发生重大的视觉变化，例如大小，颜色或其他样式的变体。
- 需要传达一种交互状态（例如：悬停）
在以下情况下使用组件属性：
若有收获，就点个赞吧
0 人点赞
