How to create an exploded design in Figma

This tutorial requires the Rotato for Figma plugin.

An exploded view is a visual technique that separates the layers of a product design, often along a single axis, in order to showcase its internal structure. It’s a powerful way to communicate the interface’s hierarchy, call out details, and add a cinematic flair—perfect for showcasing your design work in a more unconventional, attention-grabbing format.

Let’s take a look at how you can easily create an exploded view of your design in Figma, using the Rotato plugin today.

Creating the exploded view

First, make sure you have the Rotato App and our Figma plugin installed.

1. Open your Figma design file and run both the Rotato App and plugin.
2. Select the Figma frame you want to “explode.”
3. Check the Exploded Layers box below the detected device mockup model.
4. Click Render and wait.
5. Click Place on Page to add the rendering to your design file. That’s it!

Customizing

You almost always want to customize an exploded view.

To do that, once you’ve rendered the exploded design, click Adjust in Rotato in the plugin to open Rotato. There, you can adjust many things—from the background color and device to the environment preset.

When you’re finished, go back to your Figma file, hit Render one more time, and you can then insert the updated design back into your Figma file.

If you want to customize which layers get their own exploded plane, you can group those layers in Figma (select all and hit Command + G) before you create the exploded view. Read more in the in-depth tutorial on cinematic layer explosions under Understanding your layers in 3D space."

Animating your exploded design

When you create an exploded view, the Rotato sidebar gets a new control called Levitation, which controls the spacing between exploded layers. To update it, you can type in a new value or drag your mouse on the label below the text box to experiment—adjust it to make your exploded view feel more subtle or dramatic, depending on the effect you want.

When to use the exploded view in your design

Exploded views aren’t just eye candy. They offer clarity, especially when presenting to stakeholders who may not be familiar with interface layers. By breaking apart your design visually, you can emphasize the complexity of an app to external clients, help engineers understand the screen hierarchy before they start to build it, or simply because you want to create an engaging pitch deck, app store images, or for your portfolio.

But that’s not all Rotato has to offer. Our app also includes dozens of templates to help you create the perfect animated 3D mockup on any device. If you’re unsure about the exploded view, check out our template library to find something that fits your style.