Create 3D effects in Figma Design

Apply 3D transform to rotate layers and add depth to your designs in Figma Design. Use them to create tilted mockups, arrange objects in space, or animate a card flipping over.

You can apply 3D transform to vectors, images, frames, components, and text. 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.

Use 3D transform and Perspective effects together to position layers in space and control how depth appears in a design.

Apply a 3D transform

1. Select a layer on the canvas or in the Layers panel.
2. Click plus in the Effects section of the right sidebar.
3. Choose 3D transform from the dropdown menu.
4. Drag the on-canvas handles to rotate the layer around the X, Y, or Z axis. You can also open the effect settings and enter rotation values for precise adjustments.
5. Adjust Depth to move the layer along the Z axis.

Figma previews your adjustments on the canvas as you drag or change values.

Rotate layers in 3D

Rotate a layer along three axes:

• X axis: Tilt the layer forward or backward
• Y axis: Tilt the layer left or right
• Z axis: Spin the layer clockwise or counterclockwise in the plane of the canvas

Click to reset the rotation.

Apply perspective to a frame

Perspective controls the sense of distance within a frame. Objects closer to the viewer appear larger, while objects farther away appear smaller.

Think of perspective as moving a camera closer to or farther from a scene, and depth as moving an object within that scene. Apply perspective to a parent frame to give its transformed layers a shared viewpoint.

1. Select a parent frame containing layers with 3D transform.
2. Click in the Effects section of the right sidebar.
3. Choose Perspective from the dropdown menu.
4. Open the effect settings and adjust the perspective distance in pixels.

The Perspective slider’s minimum and maximum values adjust to the dimensions of your selection. The range starts at a safe camera distance to help prevent the camera from clipping through the layers, and extends to a distance where perspective is barely visible.

For example, apply perspective to a frame containing tilted cards, then adjust each card’s Depth to make some appear closer and others farther away.

Apply depth to a 3D layer

Depth moves a layer closer to or farther from the viewer. For example, you can give several cards different depth values to position them at different distances within a scene.

1. Select a layer with 3D transform applied.
2. Click the 3D transform effect in the right sidebar to open the effect properties.
3. Add a value to the Depth property.

To make changes in Depth visible, enable Keep nested layers 3D on the parent frame, then apply Perspective or rotate the parent in 3D.

Set the origin point

The origin point determines the point around which a layer rotates. Change it to control how the layer pivots. For example, set it to make a card rotate around and edge instead of its center.

1. Select a frame with 3D transform applied to it.
2. From the right sidebar, click the 3D transform effect to open the settings.
3. Click .
4. From here, you can:
   • Manually set origin for the X and Y values
   • Manually drag the [ICON] on the layer
   • Select an origin point from the panel

Show or hide the backface

From the settings, use Backface to control whether the back of a layer is visible when it rotates away from the viewer. When visible, the back shows a mirrored version of the front.

To create a card with different artwork on each side, use separate layers for the front and back, and hide their backfaces.

Keep nested layers 3D

Use Keep nested layers 3D on a parent frame to keep its nested layers in a shared 3D space. Layers retain their individual rotations and depth positions, so they can intersect and appear in front of or behind one another according to their positions.

For example, arrange individual layers as the faces of a cube, then keep them 3D in a parent frame to rotate the assembled cube.

To keep nested layers 3D:

1. Select a parent frame containing a layer with a 3D transform effect.
2. In the right sidebar, choose Keep nested layers 3D.

The control is also available on a frame containing another frame that keeps its nested layers 3D.

Turn a composition into a flat plane

Choose Turn into flat plane to display the nested 3D layers on the parent frame’s 2D plane. Use this when you want to place a 3D composition within a flat design, such as a card or poster.

Flattening ends the shared 3D space at that frame. Frames farther up the hierarchy will not show the control for that flattened content.

Apply perspective to a frame

1. Select a parent frame containing layers with 3D transform.
2. Click plus in the Effects section of the right sidebar.
3. Choose Perspective from the dropdown menu.
4. Open the effect settings and adjust the perspective value.

A smaller perspective value brings the viewpoint closer and makes the effect more pronounced. A larger value moves the viewpoint farther away and makes the effect more subtle.

For example, apply perspective to a frame containing tilted cards, then adjust each card’s Depth to make some appear closer and others farther away.

Examples of 3D transform effects

Use 3D transform and perspective to:

• Create mockups: Tilt a screen or advertisement into position while keeping its content editable.
• Arrange cards in space: Give cards different rotations and depth values, then apply perspective to their parent frame.
• Assemble a cube: Position flat layers as faces, then keep them 3D within a parent frame.
• Animate a flip or rotation: Add keyframes to turn a card over or rotate a composition.

Edit, hide, or remove a 3D transform

To edit a 3D transform:

1. Select the layer with the effect applied.
2. In the Effects section of the right sidebar, open the 3D transform effect settings.
3. Adjust its properties.

To temporarily hide the effect, click the eye icon next to it. Click to show the effect. Hiding the effect preserves its settings and the layer’s underlying content.

To remove the effect, click next to it.

Animate 3D transform

Combine 3D transform with motion to create rotating objects, flipping cards, or tilting screens.

Switch to motion mode and add keyframes from the 3D transform effect settings. Use the timeline to review and adjust keyframes for:

• Rotate X: Rotation around the X axis.
• Rotate Y: Rotation around the Y axis.
• Translate Z: Position in depth.

You can also keyframe perspective to change the sense of distance during an animation.

Learn more about animating designs in Figma Motion.

Use the agent to apply 3D transform

Ask the agent to apply and edit 3D transform, add motion to an existing design, or do both in one prompt.

For example:

Arrange these layers as the faces of a cube and animate it rotating.

Animate these cards so they tilt and rotate.

Review the result on the canvas and adjust any keyframes the agent creates in the timeline.

View 3D transform in Dev Mode

3D transform map to CSS, so developers can inspect the rotation and depth used in a design.

1. Open Dev Mode.
2. Select a layer with a 3D transform effect.
3. Inspect and copy the CSS transform values.

Depth corresponds to translateZ in CSS. The nested-layer setting corresponds to transform-style, and the Perspective effect corresponds to perspective.

You can also use a coding agent connected to the Figma MCP server to implement a design with its 3D effects.

Frequently asked questions

Why doesn’t changing depth affect my design?

Check that the parent frame keeps its nested layers 3D. Apply perspective or a 3D rotation to a parent frame so changes in depth are visible.

Why do my nested layers look flat?

Check whether a parent frame is set to Turn into flat plane. Choose Keep nested layers 3D to retain their positions within a shared 3D space.

Can I edit a layer after applying a 3D transform?

Yes. You can edit its content with the effect applied, or temporarily hide the effect while you make changes.