How to create an exploded design in Figma

An exploded view separates a design's layers in 3D so you can show how the interface is assembled.

Prepare the frame

Keep the elements you want to separate at the top level of the Figma frame. Group elements that should remain together.

Render the layers

1. Open Rotato and its Figma plugin.
2. Select the frame in Figma.
3. Enable Exploded Layers in the plugin.
4. Click Render and review the result.
5. Use Place on Page for a still, or switch to Rotato to refine it.

Refine the separation

Select the imported device and adjust its Explosion controls. Inspect the result from the angle you plan to use; large separation can reveal overlaps that are invisible from the front.

For motion, follow animate exploded layers.