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:派生组件数据布局版本(不知道干嘛的)。

结尾

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


相关阅读,

剖析 Figma 数据结构:不同图形的特有属性

剖析 Figma 图形对象的基本属性

学到了!Figma 原来是这样表示矩形的

什么?Figma 的 fig 文件格式居然解析出来了

相关推荐
xjt_0901几秒前
浅析Web存储系统
前端
foxhuli22938 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统