Figma 数据结构：容器类图形的属性

大家好，我是前端西瓜哥。

今天我们来看看 Figma 的容器类图形的属性。

通用属性不讲，请看我之前的文章。

文档

DOCUMENT

文档是 Figma 文件的根目录，每个文件只有一个。

• documentColorProfile：颜色配置文件，默认为 SRBG。

另外，有一个比较特殊的内置画布 Internal Only Canvas，是用来保存变量的。

画布

CANVAS

Figma 下可以有多个画布，类似 Excel 的 sheet。

画布的属性：

• backgroundColor：背景色，rgba 对象；
• backgroundEnabled：是否有背景色。如果为 false，会用灰白相间的棋盘网格背景表示透明；
• exportBackgroundDisabled: 导出时是否不使用背景色；

图框

FRAME

• resizeToFit：缩放图框后，图形是否会自适应，用以区分图框和组；
• containerSupportsFillStrokeAndCorners：图框是否支持 fill、stroke、corner。如果为 true；
• frameMaskDisabled：是否裁切掉溢出内容；
• layoutGrids：网格布局，设置后会在画框顶部加一层网格线；

下面是一些 自动布局 相关属性，非常类似 CSS 的 flex 弹性布局。

• stackMode：自动布局使用的模式，主轴方向。HORIZONTAL（水平排列）、VERTICAL（垂直排列）、NONE
• stackWrap：换行模式。WRAP（换行，此时如果图框宽度固定，会自动换行，换行）、NO_WRAP（不换行）。
• stackSpacing：主轴方向间距；
• stackCounterSpacing：交叉轴方向间距；
• stackPrimarySizing：主轴方向的宽或高是为固定值（FIXED），还是自适应内容（RESIZE_TO_FIT_WITH_IMPLICIT_SIZE）；
• stackCounterSizing：同 stackPrimarySizing，但交叉轴方向；
• stackPrimaryAlignItems：主轴方向 item 的对齐方式；
• stackCounterAlignItems：次轴方向 item 的对齐方式；
• stackHorizontalPadding / stackVerticalPadding：水平方向和垂直方向 padding；
• stackPaddingRight / stackPaddingBottom：右 padding 和底 padding；

组

组是功能受限的图框。

和图框相比，主要区别为 组的 resizeToFit 为 true，另外也不会使用图框的某些属性，比如自动布局相关的属性。

除了功能少了，在某些功能上也有区别。

比如对于图框，fill 这些属性是应用到图框上的，改变图框的背景色；如果是组，修改 fill 这些属性，其实是在修改容器内的所有图形的 fill 属性。

区域

SECTION

区域常用于将多个图框编组分类，比如把登录相关的图框放在同一个区域内。

它没有图框的自动布局等特性。

区域不能被其他类型容器元素嵌套，比如图框，但可以自己嵌套自己。

• sectionStatusInfo：区域的状态信息，比如 { status: "BUILD" } 表示标记为可进入 dev 模式

布尔

BOOLEAN_OPERATION

可对多个图形进行布尔运算，得到一个布尔图形。

被布尔的原图形会保留下来，这样可以对原图形进行修改。

如果不希望保留原图形，可使用 Flatten（拍平）操作，合并为一个矢量网格图形。

• booleanOperation：使用的布尔操作类型，值有：UNION（并集）、INTERSECT（交集）、SUBTRACT（减去顶层）、XOR（差集）

组件

SYMBOL

组件，或者叫图元。是将一些图形入库，然后多次使用它。

比如设计稿的按钮设计都一样的，一个个复制粘贴比较难管理，要修改的时候就要一个个改，很麻烦。

这时候我们可以把构成按钮的图形保存为组件，在需要的地方引用。

• isSymbolPublishable：组件是否可发布；
• sharedSymbolVersion：组件版本；

有趣的一点是，组件可以嵌套。

组件如果被删除，它会被转移到内置画布中，成为变量一般的存在，这样可以保证引用它的实例能够找到原型。

组件实例

把图形设置为组件后，基于该组件生成图形，这种图形叫做 “实例”。

INSTANCE

• symbolData：描述引用的组件 id，以及覆盖的属性，有些属性是可以被覆盖的的，比如填充色用蓝色覆盖组件原来的白色；
• derivedSymbolData：继承组件后，实例的 geometry 值；
• derivedSymbolDataLayoutVersion：派生组件数据布局版本（不知道干嘛的）。

结尾

我是前端西瓜哥，欢迎关注我，学习更多图形编辑器知识。