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

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

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

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

文档

DOCUMENT

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

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

画布

CanvaS

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

画布的属性：

图框

FRAME

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

组

组是功能受限的图框。

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

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

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

区域

SECTION

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

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

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

布尔

BOOLEAN_OPERATION

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

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

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

组件

SYMBOL

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

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

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

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

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

组件实例

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

INSTANCE

结尾