最近使用 AI 做还原视觉相关的提效项目，在 AI 还没出来之前也刚好做过 Figma 相关的实践和项目，趁此机会温故知新。分享给有需要的同学~

一、Figma 原始数据结构

目前通过 AI 获取到的 Figma 数据，通常都经过一层转换，并不是 Figma 的原始数据。要想获取原始结构，需要通过 API 获取，返回的是 JSON 格式的数据，主要包含以下几块：

文件基本信息

{
至于"name"，"haha 教程",// 文件名称
"lastModified": "--05T03::14Z",// 最近修改时间
"thumbnailUrl": "https://xxxxx",// 缩略图
"version": "","role": "viewer","editorType": "figma","linkAccess": "inherit","nodes": {} // 内容信息
}

内容信息

"nodes": {
说到":"，{
"document": {},// 文档信息
"components": { // 组件相关
再看":"，{
说到"key"，"a859937fe23b4182a41301d18670ff3d722a0c85","name": "按钮","description": "","remote": true,"documentationLinks":
说到},":"，{
"key"这方面，"82d6496dfd8eb1f47924bf4e77acd32effc6506c","name":"tipsicon",...
}
},"componentSets": {},"schemaVersion":,"styles": {} // 样式信息
}
}

文档结构

"document":{
再看"id"，" : ","name":"Frame ","type":"FRAME","scrollBehavior":"SCROLLS","children": // 页面内容
}

节点信息概览

children 中会出现各种节点类型，下面是常见类型总览：

tr> tr> tr> tr> tr> tr> tr>

类型	说明	有子节点	特殊属性
DOCUMENT	文档根	✅	-CANVAS 页面
CANVAS	页面画布	✅	-backgroundColor
FRAME	画板/框架	✅	-layoutMode,clipsContent
GROUP	分组容器	✅-SECTION 分区、FigJam 功能
COMPONENT组件定义	✅componentPropertyDefinitions
COMPONENT_SET	变体集	✅	componentId。overrides
INSTANCE	组件实例	-	componentId,overrides
RECTANGLE	矩形	❌	cornerRadius
ELLIPSE	椭圆❌
LINE线条❌
VECTOR 矢量 ❌
TEXT 文本 ❌ tr>	BOOLEAN_OPERATION 布尔运算 ✅ tr>	SLICE 切片 ❌

. 节点通用属性

{
说到"id"，" :",// 唯一 ID
至于"name"，"节点名称","type":"FRAME",// 节点类型
"visible":true,"locked":false,"opacity":"",“blendMode”:“PASS_THROUGH”,“absoluteBoundingBox”:{
至于“x”，“y”:,“width”:,“height”:
},“absoluteRenderBounds”:{
从“x”来看，“y”:,“width”:,“height”:
},“constraints”:{ // 对齐约束
“vertical”:“TOP”,“horizontal”:“LEFT”
},“effects”:,// 阴影、模糊等
“fills”:,“strokes”:,“children”:
}

. 各节点类型详解

. DOCUMENT

{
“id”:“这方面，”,“name”:“Document”,“type”:“DOCUMENT”,“children”:
}

. CANVAS——每个页面对应一个 Canvas 节点。

{
“id”:“这方面，”,“name”:“Page Canvas”,“type”:“CANVAS”。“backgroundColor”:{“r”:,”g”:,”b”:,”a”:},“children”:
}

. FRAME——最常见的容器节点。

{
说到“type”，“FRAME”。“clipsContent”：true，“layoutMode”：“VERTICAL”，// 自动布局方向…其他自动布局属性，“cornerRadius”：。“children”：
}

. GROUP——纯粹的分组容器，没有自己的样式。

{
“id”的观点是。”:”,“name”： ”Group ”,“type”： ”GROUP ”,…}

. RECTANGLE——最基础的形状，可承载图片填充。

{
…通用属性，“cornerRadius”：,// 圆角
“rectangleCornerRadii”：。// 四角圆角可单独设置
“fills”：,…}

. ELLIPSE—支持环形等高级属性。其实，

{
…通用属性，不过，„effects“:。„arcData“:{
„startingAngle“…,„endingAngle“…
,// 完整圆 = 2π
„innerRadius“…// 有值时为环形
}
}

. TEXT—富文本处理稍显复杂，是很多同学的痛点。

{
…通用属性，„characters“：“%\
OFF”，// 文本内容
„characterStyleOverrides“：。„styleOverrideTable“：{…},„style”：{ // 基础文字样式
„fontFamily“…,“fontSize”，,“textAlignHorizontal“…}
}

• ⚠️ 痛点：如何从 characters、style、characterStyleOverrides + styleOverrideTable 中恢复完整的富文本？需要自行合并覆盖表，老实说，
• ⚠️ 痛点：不同语言换行符导致字符索引错位。需要统一处理，
• ⚠️ 痛点：某些文字在 Figma 中使用了混合样式，解析时容易遗漏局部样式。

. VECTOR—主要用于图标或自定义形状。

{
从"type"来看，"VECTOR","strokeCap":"ROUND","strokeJoin":"ROUND","fillGeometry":。"strokeGeometry":
}

. BOOLEAN_OPERATION—如 UNION、INTERSECT 等组合形状。

{
说到"id"，" : ","name":"Union","type":"BOOLEAN_OPERATION"。"booleanOperation":"UNION",...
}

. INSTANCE—引用 COMPONENT 并可覆盖属性。

{ 再看"id"，" : ","name":"Mask group","type":"INSTANCE","componentId":" : "。// 对应 COMPONENT 的 ID "overrides": // 本实例特有的覆盖属性 }

• ⚠️ 痛点：通过 componentId → COMPONENT → componentPropertyDefinitions → overrides 完整还原实例化后的真实属性非常繁琐。
• ⚠️ 痛点：当组件内部还有嵌套 Auto Layout 时需要递归解析才能得到最终渲染尺寸。
"

. COMPONENT—可视化复用的基础单元。

`` `` `

``

---