Figma的属性设置

在Figma中，包含不同的图层和视觉元素，每个元素都会有相应的属性和参数。比如一个矩形，它有长和宽的属性，且它们有各自的参数值。

因为不同元素包含的属性不同，所以选中不同元素展示的属性面板并不是相同的，会有一定的差异。

属性面板中的属性被划分成了不同的模块分类，便于用户区分和适用，下面依次来解释最常用的属性模块：

1.图层操作：

图层操作是属性面板最上方的模块，会显示所选元素的类型名称（不是图层名），如果鼠标什么元素都没选中，那么系统就默认选择整个画布 Page。

图层操作严格来说并不是只是属性设置，而是将所选元素可以进行的一些特殊操作、功能放到这里来，比如将元素创建成组件、应用布尔、编辑路径等等。

在过去版本中，这些功能和选项是展示在顶部工具栏中，UI3后统一修改到属性栏顶部，所以不是很直观。

2.位置面板 Position

位置面板展示元素所处层级的相对坐标、位置。包括x、y轴的位置，以及旋转的数值。

如果元素处于画布Page内，上级没有其它编组，那么元素的位置是元素左上角的顶点相对于整个画布Page 的世界原点 (0,0)的X、Y值，且面板设置较为简单。

如果元素处于画框Frame内，那么元素的位置是元素左上角订单相对于上级画框的左上角顶点的 X、Y轴的距离，而不是相对于画布Page的世界坐标，且画板内会出现约束相关的设置。

3.布局面板 Auto layout

布局用于控制所选对象的大小和布局要素，一般布局包含下面这些模式：

• 选中单一普通图层：只能设置尺寸
• 选中单一字体图层：设置文本区域布局类型
• 选中多等间距图层：可以设置间距

当创建自动布局以后，则切换为自动布局 Autolayout面板，自动布局设置会在后面的章节中详解。

4.外观面板 Appearance

外观面板主要用来设置元素透明度、圆角、叠加模式。具有直角、锐角的图形支持圆角设置，矩形还可以单独设置四边圆角。而圆或不规则圆则不能进行圆角设置。

5.字体面板 Typography

用于进行字体属性设置的面板，只有选中字体元素后才可以设置。因为字体相关设置的知识点较为复杂，我们会在后面对它做详细的解释。

6.填充面板 Fill

用于对所选元素区域进行填充设置的面板，Figma允许给一个元素添加多层填充，它们会和图层一样具有层级排序效果。

7.描边面板 Stroke Setting

用于控制元素描边设置的面板，包含描边的颜色、位置、大小等。详细设置内可以对描边做出细节的调整，如切换成虚线描边和更改描边样式等。

如果所选图层是矩形类（包括Frame）图层，那么右下角就有一个矩形的独立设置图标，用于单独控制描边在矩形四周的显示，比如用它单独添加底部描边作为列表下划线使用。

8.效果面板 Effect

用于对图层创建特殊视觉效果，一个图层内也允许添加多种视觉效果，可以添加的种类如下：

• 内阴影 Inner shadow：在图层内部添加阴影
• 外投影 Drop shadow：在图层外部添加投影
• 图层模糊 Layer blur：图层本身产生高斯模糊
• 背景模糊 Background：图层有透明度时显示的下方内容模糊
• 噪点 Noise：给图层添加噪点效果
• 纹理Texture：给图层设置额外的纹理图案
• 玻璃Glass：模拟iOS的玻璃效果

9.导出面板 Export

将所选元素以特定格式导出到软件外部的面板，包括选择元素导出倍率、格式、色彩文件、质量等。

10.所选色彩 Selection colors

选中包含不同色彩的多个元素或编组时，那么就会弹出选中色彩面板。除了获知使用的填充色外，还可以在这里快速完成对颜色的调整或替换。

学习属性模块不要通过死记硬背，只要了解对应功能后进行界面设计的实操，很快就能全部掌握。