TL;DR: Figma 3D transforms launched in open beta on November 12, 2026. The new effect lets you rotate text, images, vectors, frames and components along the X, Y and Z axes, add depth and perspective, and animate the result in Figma Motion. It’s non-destructive, so the original layer stays editable. It’s open to Full seat users on all plans, and every 3D layer maps to real CSS (rotate, translateZ, perspective, transform-style) that developers can copy from Dev Mode.
Figma 3D transforms answer one of the longest-running requests on the Figma forum: a native way to tilt and rotate things in real 3D space without faking it with skews, plugins or exported mockups. Figma previewed the feature at Config 2026 and switched on the open beta this week. Below we explain what the effect does, how to use it step by step, what each setting means in CSS terms and where the limits are right now.
What are Figma 3D transforms?
According to Figma’s November 12 release notes, 3D transform is a new effect, which means it sits in the same Effects panel as drop shadows and blurs rather than being a separate mode. You can apply it to vectors, images, frames, components and text, then rotate the layer with on-canvas handles and live previews.
Figma’s help center guide says the effect is non-destructive: layers remain editable, and text and fills (including shader fills) render with the transformed layer. You can hide or remove the effect at any time and get your flat design back.
It works together with a second new effect, Perspective, which you put on a parent frame to give everything inside it a shared viewpoint. Figma’s own analogy is useful: perspective is like moving a camera closer to or farther from a scene, while depth is like moving an object within that scene.
Who can use it
- Plans: all plans, per Figma’s help center.
- Seat: you need a Full seat and edit access to the file.
- Status: open beta, so Figma warns behavior can change and you may hit bugs or performance issues.
How to use 3D transforms in Figma (step by step)
Here’s the basic workflow from Figma’s documentation:
- Select a layer on the canvas or in the Layers panel.
- Click + in the Effects section of the right sidebar.
- Choose 3D transform from the dropdown.
- Drag the on-canvas handles to rotate around the X, Y or Z axis, or open the effect settings and type exact rotation values.
- Adjust Depth to move the layer forward or back along the Z axis.
- Select the parent frame, add the Perspective effect and set the distance in pixels.
A smaller perspective value brings the viewpoint closer and makes the 3D look more dramatic. A larger value pushes it farther away and makes it subtle.
The key settings explained
| Setting | What it does | CSS equivalent |
|---|---|---|
| Rotate X | Tilts the layer forward or backward | rotateX() |
| Rotate Y | Tilts the layer left or right | rotateY() |
| Rotate Z | Spins the layer clockwise or counterclockwise in the canvas plane | rotateZ() |
| Depth | Moves the layer closer to or farther from the viewer | translateZ() |
| Perspective (on parent frame) | Sets the camera distance for nested 3D layers | perspective |
| Keep nested layers 3D | Keeps children in one shared 3D space so they can intersect | transform-style: preserve-3d |
| Turn into flat plane | Flattens the 3D composition onto the frame’s 2D plane | transform-style: flat |
| Backface | Shows or hides the mirrored back of a layer when it rotates away | backface-visibility |
You can also move the origin point so a card swings from an edge like a door instead of spinning from its center.
Why your depth changes might not show up
This is the gotcha most people will hit first. Figma’s FAQ says that if changing Depth does nothing, the parent frame probably isn’t set to Keep nested layers 3D, or it has no perspective or 3D rotation of its own. Turn that option on, then add Perspective to the parent.
Be aware that enabling Keep nested layers 3D disables some properties on that parent frame: opacity is locked, blend modes, shaders, other effects and clip content become unavailable, and existing fills and strokes are hidden. If you need those, Figma says to use Turn into flat plane, which ends the shared 3D space at that frame.
What you can make with it
Figma’s guide lists four starter use cases, and they cover most real-world needs:
- Device and ad mockups: tilt a screen or banner into position while the content inside stays editable.
- Cards in space: give a set of cards different rotations and depths, then add perspective to the parent frame.
- Simple 3D objects: position flat layers as the faces of a cube and keep them 3D inside a parent frame.
- Flips and rotations: keyframe a card turning over or a composition rotating.
In its launch blog post, Figma’s Brand Studio team describes going further: typography repeated along the Z axis, type wrapped around rectangular tubes turned into components, and a flower built from vector shapes and colored with a gradient-map shader. Those are Figma’s own showcase examples, so treat them as what’s possible rather than a typical result.
Animating 3D in Figma Motion
Switch to motion mode and you can add keyframes straight from the 3D transform settings for Rotate X, Rotate Y and Depth, plus keyframe Perspective to change the sense of distance during an animation. Figma Motion itself got an update on November 10 with physics-based springs and Lottie export previews, per the release notes, so 3D flips can now use more natural easing.
Using the Figma agent
You can also ask the Figma agent to do the work. Figma’s documented example prompts include “Arrange these layers as the faces of a cube and animate it rotating.” Keep in mind that the agent has drawn from Figma AI credits since it became generally available on October 6, 2026, according to Figma’s AI credit FAQ, while applying 3D transforms manually doesn’t need the agent at all.
From design to code: CSS in Dev Mode
The part developers will care about most: every 3D transform maps to standard CSS. Open Dev Mode, select a 3D layer and you can inspect and copy its exact transform values. Figma says depth corresponds to translateZ, the nested-layer setting to transform-style and the Perspective effect to perspective.
Figma also says coding agents connected to the Figma MCP server can read and create 3D designs, which links what you explore on the canvas with what gets built. If you’re new to the handoff side, our explainers on what a design system is and UI vs UX design cover the basics.
Limits and things to watch
- It’s a beta. Figma’s beta features page says features can change and may have bugs or performance issues.
- Full seats only for editing. Collab, Dev and View seats can’t apply the effect in shared files.
- It’s not a 3D modeling tool. You’re rotating flat layers in space, the same model as CSS 3D transforms. You won’t get meshes, lighting or imported 3D models.
How it compares with this week’s other design tool news
Figma’s launch lands in a busy week for design software. Adobe used its MAX conference to announce new Creative Cloud agent features and a Firefly prototyping tool called Builder, which we covered in our Adobe MAX 2026 roundup. If you’re still choosing a main design tool, our comparisons of Figma vs Canva and Figma vs Framer go deeper on pricing and workflows.
Bottom line
Figma 3D transforms aren’t trying to turn Figma into Blender. They bring the 3D tricks web designers already use in CSS (tilted mockups, card flips, perspective layouts) onto the canvas, keep everything editable and hand developers matching code. If you have a Full seat, it’s worth opening the playground file Figma published and trying a simple card flip before using it in client work, since the beta may still change.
Sources
- Figma release notes (Nov 10 and Nov 12, 2026)
- Figma Help Center: Create 3D effects in Figma Design
- Figma Blog: How 3D transforms and Figma’s agent brought a launch video to life
- Figma Help Center: What Figma features are in beta?
- Figma Help Center: AI credit updates FAQ
The Teck Hustlers Editorial Team covers technology, business, finance and gaming news for readers who want the story behind the headline. Every article is researched, written and edited by our in-house team, checked against company announcements, filings and reputable reporting, and updated when new facts emerge. We focus on what each development means for founders, professionals, investors and everyday users. Have a tip or a correction? Reach us through our contact page.
