Figma released the 3D transform effect as an open beta on November 12, 2026. It tilts and rotates text, images, vectors, frames, and components in space and staggers them in depth, while the original underneath remains editable. A Full seat is required, meaning the license with editing rights, which is available in every plan.
There are also features for animation and for handoff to developers: In Figma Motion, you set keyframes for the rotation, and in Dev Mode you copy the values as CSS.
You select a layer, click the plus in the Effects section of the right sidebar, and choose 3D transform. On the canvas, you drag the handles to rotate the layer around the X, Y, or Z axis, or you type in the values exactly in the settings. Depth moves the layer forward or backward along the Z axis.
The sense of space comes from Perspective, and it is set on the parent frame, not on the individual layers. The Figma help page describes the value as the camera distance: A smaller value brings the viewpoint closer and strengthens the effect, while a larger one makes it more subtle. Perspective changes nothing visible if none of the nested layers has the 3D transform effect.
Which properties does Figma lock in the shared 3D space?
Depth only takes effect once you turn on Keep nested layers 3D on the parent frame. The layers then keep their own rotation and depth and can intersect or sit in front of one another. In return, Figma locks several properties on the parent frame.
What Keep nested layers 3D locks
On the parent frame, as of November 12, 2026, open beta
- Layers keep their own rotation and depth
- Layers can intersect or sit in front of one another
- Opacity cannot be set
- Blend modes, shaders, and other effects are not available
- Existing fills and strokes are hidden
- Turn into flat plane lays the layers flat on the frame again
Source: Figma Learn
You choose Turn into flat plane if you need opacity, blend modes, or shaders on the frame. Figma then lays the nested layers flat on the 2D surface of the frame. This way, the 3D composition can be placed into a normal layout, such as a card or a poster.
How does the effect get into animation and code?
In Figma Motion, you switch to Motion mode and create the keyframes in the effect's settings. Rotate X, Rotate Y, Depth, and Perspective are available as keyframe values; Figma does not list rotation around the Z axis there. In Dev Mode, you copy the values as CSS: Depth corresponds to translateZ, Perspective corresponds to perspective, and Keep nested layers 3D corresponds to transform-style: preserve-3d. The blog also mentions AI agents that write code. Via the Figma MCP server, an interface for agents, they read out the 3D effects and create them.
The Figma agent also applies the effect. As tasks, the help page mentions, for example, arranging layers as the sides of a cube and making them rotate, or making cards tilt. Since October 6, 2026, the agent consumes AI credits from the monthly allowance of your seat, as our report on the Figma agent shows. Figma does not quantify how many credits a 3D task costs; consumption depends on the prompt, actions, and context.
What this means for you
It's best to try the effect first on a mockup you need anyway: You tilt a screen or a poster into position, and the content remains editable. It's best to choose Turn into flat plane right away if you later need a background color or opacity on the frame, instead of searching for the vanished fills.
Before handing off to developers, you compare translateZ, perspective, and transform-style in Dev Mode with what the page is supposed to show in the browser. Because the effect is still in open beta, it's best to hold off on client projects whose layout depends on the effect.
Figma does not mention any regional restriction. The help page is available in English; whether the German interface translates terms like Perspective and Depth into German could not be verified.
Figma announced the open beta on November 12, 2026, in its blog.
Sources
