Figma 容器类图形的属性

大家好，我是前端西瓜哥。今天我们来看看 Figma 的容器类图形的属性。通用属性不讲，请看我之前的文章。

**文档 DOCUMENT** 

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

node tree {
children: [
frame1,
frame2,
frame3,
// ...
]
}

**画板 ARTBOARD** 

画板是 Figma 中的画布，每个文件可以有多个画板。

node tree {
children: [
frame1,
frame2,
frame3,
// ...
]
exportSettings: {
suffix: ".png",
format: "PNG"
}
}

**页面 PAGE** 

页面是 Figma 中的一个独立设计区域，每个文件可以有多个页面。

node tree {
children: [
page1,
page2,
page3,
// ...
]
}

**帧 FRAME** 

帧是 Figma 中最常见的容器类图形，它可以包含其他图形元素，并对其进行布局和控制。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**组 GROUP** 

组是 Figma 中另一个常见的容器类图形，它可以将多个图形元素组合在一起，并作为整体进行操作。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**组件 COMPONENT** 

组件是 Figma 中一种可重用的图形元素，它可以被多次实例化，并进行个性化设置。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**变体 VARIANT** 

变体是组件的不同版本，它可以具有不同的样式、颜色、形状等。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**实例 INSTANCE** 

实例是组件的一个副本，它可以继承组件的属性，并进行个性化设置。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**蒙版 MASK** 

蒙版是 Figma 中一种用于遮挡其他图形元素的图形元素。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**切片 SLICE** 

切片是 Figma 中一种用于导出图形元素的图形元素。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**文本 TEXT** 

文本是 Figma 中一种常见的图形元素，它可以包含文字、数字和符号。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**向量 VECTOR** 

向量是 Figma 中一种常见的图形元素，它可以包含路径、形状和点。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**矩形 RECTANGLE** 

矩形是 Figma 中一种常见的图形元素，它可以具有不同的宽度、高度和颜色。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**椭圆 ELLIPSE** 

椭圆是 Figma 中一种常见的图形元素，它可以具有不同的宽度、高度和颜色。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**多边形 POLYGON** 

多边形是 Figma 中一种常见的图形元素，它可以具有不同的边数、形状和颜色。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**星形 STAR** 

星形是 Figma 中一种常见的图形元素，它可以具有不同的边数、形状和颜色。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**线条 LINE** 

线条是 Figma 中一种常见的图形元素，它可以具有不同的长度、粗细和颜色。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**箭头 ARROW** 

箭头是 Figma 中一种常见的图形元素，它可以具有不同的形状、大小和颜色。

node tree {
children: [
rect1,
rect2,
rect3,
// ...
]
}

**图像 IMAGE** 

图像