2026 年 11 月 12 日，Figma 上线了原生的 3D 变换（3D transform） 效果：不用插件、不用切到 Blender 或 Spline，直接在画布上把图层沿 X、Y、Z 轴旋转，再配合透视（Perspective）和景深（Depth）搭出有空间感的画面。很多人第一次用会遇到“调了景深没反应”“子图层全被压扁”之类的问题。本文按官方帮助中心的说明，把 Figma 3D 变换怎么用 拆成可照做的步骤，并给出三个常见场景的实操和排障清单。

先说结论

• 3D 变换在右侧栏 Effects（效果）→ + → 3D transform 里添加，所有付费方案和免费方案都能用，但需要 Full 席位并拥有文件编辑权限。
• 它是 CSS 3D，不是 3D 建模：适合倾斜样机、卡片空间排布、翻转动画，不能导入模型或做网格编辑。
• 想让景深（Depth）看得出效果，父级 Frame 需要开启 Keep nested layers 3D（保持嵌套图层 3D），并加上 Perspective 或给父级本身做 3D 旋转。

3D 变换能做什么、谁能用

根据 Figma 帮助中心，3D 变换可以作用在矢量、图片、Frame、组件和文字图层上，是非破坏性效果：图层内容依旧可以编辑，文字、填充（包括 Shader 填充）会跟着变换一起渲染，随时可以隐藏或删除效果。

使用条件：

项目	要求
方案	所有方案（All plans）
席位	Full 席位
权限	文件编辑权限
状态	发布时为 Beta，插件 API 也标注“可能变动”

席位类型不清楚的话，可以先看本站的 Figma 会员方案与价格指南。

第一步：给图层添加 3D 变换

1. 在画布或图层面板中选中一个图层。
2. 在右侧栏 Effects 区块点击 +。
3. 下拉菜单选择 3D transform。
4. 拖动画布上出现的手柄，绕 X、Y、Z 轴旋转；需要精确数值时，展开效果设置直接输入角度。
5. 调整 Depth，让图层沿 Z 轴前后移动。

三个轴的含义：

• X 轴：前后俯仰（像把手机屏幕往后仰）
• Y 轴：左右偏转（像推开一扇门）
• Z 轴：在画布平面内顺/逆时针旋转，效果和普通旋转接近

拖动时画布会实时预览。小技巧：同一个 Frame 里的多张卡片可以各自加 3D 变换，分别设置不同角度，比整体旋转更有层次。

第二步：用 Perspective 控制“镜头距离”

只有旋转时，画面常常显得“平”。这是因为还缺少透视。官方的比喻很好记：Perspective 像是把镜头推近或拉远，Depth 是在场景里移动物体。

1. 选中包含 3D 图层的父级 Frame。
2. Effects → + → Perspective。
3. 在设置里调整透视距离（单位为像素）。

数值越小，镜头越近，近大远小越夸张；数值越大，效果越含蓄。滑块的最小、最大值会根据所选 Frame 的尺寸自动调整，起点是一个不会让镜头“穿进”图层的安全距离。

注意：如果子图层都没有 3D 变换，加了 Perspective 也看不出任何变化。

第三步：Depth、旋转原点与背面

Depth（景深）

选中已加 3D 变换的图层，在效果设置里填写 Depth，正负值都可以，让多张卡片一近一远。Depth 不生效是最常见的问题，原因几乎都是父级没有开启 Keep nested layers 3D，或者父级既没有 Perspective 也没有 3D 旋转。

旋转原点（Origin point）

默认绕中心旋转。想让卡片像书页一样绕左边缘翻开，就点击效果设置顶部的旋转点图标，可以：

• 手动输入原点的 X、Y 值
• 在图层上直接拖动原点
• 从九宫格面板里选一个预设位置

背面显示（Backface）

图层转到背对观察者时，Backface 决定背面是否可见；可见时显示的是正面的镜像。要做正反两面图案不同的卡片，官方建议用两个独立图层分别做正面和背面，并把两者的背面都隐藏。

关键开关：Keep nested layers 3D 与 Turn into flat plane

在父级 Frame 上选择 Keep nested layers 3D，所有子图层会处在同一个 3D 空间里：各自保留旋转与景深，可以互相穿插，前后关系由空间位置决定，而不是图层顺序。

开启后父级有几项属性会受限：

• 不透明度（Opacity）：被禁用
• 混合模式、Shader、其他效果、裁切内容（Clip content）：不可用
• 填充和描边：已有的会被自动隐藏

如果父级必须用这些属性，就改选 Turn into flat plane（转为平面），把 3D 内容“拍平”到父级的二维平面上。常见用法是把一个 3D 组合放进海报或卡片这类平面设计里。拍平后，3D 空间在这一层结束，更上层的 Frame 不会再显示这个开关。

这两个选项分别对应 CSS 的 transform-style: preserve-3d 和 transform-style: flat。

三个实战场景

场景一：倾斜的 App 样机

1. 把 App 截图或设计稿放进一个手机外框 Frame。
2. 给外框加 3D 变换：Rotate X 约 20°、Rotate Y 约 -25°（数值按画面调）。
3. 在更外层的展示 Frame 上加 Perspective，从较大的值开始往小调，直到透视自然。
4. 屏幕内容依然可编辑，改文案不用重新做样机。

场景二：用 6 个面拼一个立方体

1. 画 6 个同尺寸正方形作为立方体的面。
2. 分别设置旋转和 Depth：前后两面 Depth 为正负半边长，左右两面 Rotate Y ±90°，上下两面 Rotate X ±90°（再配合 Depth 推到位置）。
3. 父级 Frame 开启 Keep nested layers 3D，再给父级加 3D 旋转，就能整体转动立方体。

如果不想手算，也可以直接让 Figma agent 来做，官方给出的示例提示是：「Arrange these layers as the faces of a cube and animate it rotating.」生成后再在时间轴里微调关键帧。

场景三：翻转卡片动画

1. 做正面、背面两个图层，背面先设 Rotate Y 180°，两者都隐藏 Backface。
2. 父级开启 Keep nested layers 3D 并加 Perspective。
3. 切到 Motion 模式，在 3D 变换设置里给父级的 Rotate Y 加关键帧：0° → 180°。
4. 可以同时给 Perspective 加关键帧，让翻转过程更有“推近”感。

Motion 时间轴、物理弹簧等用法可以参考本站的 Figma Motion 物理动效与高级动画实战。

交付给开发：Dev Mode 里的 CSS 对应关系

3D 变换直接映射为 CSS。在 Dev Mode 选中图层即可查看并复制 transform 值：

Figma 设置	CSS
Rotate X / Y / Z	rotateX() / rotateY() / rotateZ()（单位：度）
Depth	translateZ()（单位：px）
Perspective	perspective
Keep nested layers 3D / Turn into flat plane	transform-style: preserve-3d / flat
Backface	backface-visibility

根据插件 API 文档，可编辑的 3D 变换按 translateZ() rotateX() rotateY() rotateZ() 的固定顺序组合，前端还原时保持这个顺序能避免角度对不上。用 AI 编码工具开发的团队，也可以通过 Figma MCP 把带 3D 效果的设计直接交给编码代理。

常见问题

调了 Depth 为什么没变化？

检查父级 Frame 是否开启了 Keep nested layers 3D，并且父级有 Perspective 或 3D 旋转。

子图层为什么看起来是平的？

很可能某一层父级被设成了 Turn into flat plane，改回 Keep nested layers 3D 即可。

加了 3D 变换还能改内容吗？

可以。直接编辑，或者点眼睛图标暂时隐藏效果，改完再打开，设置不会丢。

免费版能用吗？

帮助中心标注为所有方案可用，但需要 Full 席位与编辑权限。免费版的其他限制见 Figma 免费版限制够不够用。

更多官方新功能的中文摘要，可以在本站 Figma 更新日志 查看；常用操作见 Figma 快捷键大全。

参考来源

• Figma Release Notes：Design in 3D, natively in Figma, and ship directly to code（2026-11-12） (opens new window)
• Figma 帮助中心：Create 3D effects in Figma Design (opens new window)
• Figma 插件 API：Transform3d (opens new window)
• Figma 插件 API：Scene3d (opens new window)