Figma adds editable 3D transforms with CSS handoff

Figma opened its 3D transforms beta on November 12. Designers can take text, artwork or interface elements already in a Figma Design file, tilt them in space and keep editing the original layers. Developers can inspect the rotation and depth used in that design and copy the CSS values from Dev Mode.

The beta is available across plans to people with a Full seat and permission to edit the file. Designers can set the effect on the canvas or ask the Figma agent to arrange layers. In shared files, directing the agent to edit requires a Full seat and edit access. Generating animations with the agent requires a Full seat on a paid plan.

A layer has a position. A frame has a viewpoint.

The effect works with text, vectors, images, frames and components. Designers can tilt an element around either of two axes, spin it in the plane of the canvas or adjust its depth. Figma shows the change as the designer moves a handle. The plugin documentation also says a 3D transform leaves the layout size of the layer intact. A tilted button can look narrower on the canvas and still occupy the same space in the layout.

Perspective belongs to the frame that contains the transformed layers. A set of cards can share one viewpoint while each card keeps its own distance and orientation. Figma describes a smaller perspective value as moving the viewpoint closer, making the sense of depth more pronounced. A larger value gives a subtler effect.

The parent frame controls whether nested layers retain their positions in shared 3D space. With that option on, some of the parent’s usual styling controls are unavailable, including opacity and certain effects. Its existing fills and strokes are hidden. Teams can display the composition as a flat plane within a larger layout, which ends the shared 3D space at that frame.

The timeline can animate the new effects

Figma introduced Motion in June as a timeline inside the design file. The November beta makes the new 3D effect available to that workflow. A designer can set one angle at the start of a card flip and another at the end. Both an individual layer’s depth and a container’s perspective can change during an animation.

For a card with different artwork on each side, Figma’s documentation describes using separate front and back layers and hiding their reverse sides. The artwork on each face remains editable. Figma also shows how its agent can arrange layers and apply motion in response to a prompt. The keyframes it adds can be reviewed and edited in the timeline.

Figma’s Brand Studio used 3D transforms in the feature’s launch video. In one sequence, its designers spaced repeated typography along the depth axis with the agent’s help and checked how it moved in Motion. Brand designers adjusted component colors and gradients while motion designers refined the movement on the same canvas, the company said. Asking the agent to work in Design draws on a shared balance of Figma AI credits for its AI tools. Usage varies with the complexity of the request and the actions the agent takes.

Dev Mode exposes the numbers behind the effect

In Dev Mode, developers can select a transformed layer and inspect its CSS values. A layer’s depth maps to translateZ, while the shared perspective and the treatment of nested layers map to CSS properties on the frame. Those values communicate where the layers sit and how they are viewed as part of the design handoff.

Access to Dev Mode depends on the plan and seat. Figma also documents a route for coding agents to use design information through its MCP server. Developers extending Figma itself get a separate set of plugin APIs for layer rotation, depth and shared perspective. The November 12 developer update lists these interfaces as beta and says they may change.