How to explode your artboards
In this experimental Rotato feature you can make beautiful exploded effects at the push of a button. Here’s a few examples
What you'll need
Adobe XD or Sketch. We'll call the one you're using "your design app" from here.
An artboard the size of the device you'll use in Rotato. iPhoneX and the generic phone are 375x815.
Rotato 65 or newer
How do it, at a glance
In your design app, select the artboard you want to explode
Go to Plugins > Rotato > Explode in Rotato or press option + cmd + e
Switch to Rotato
Adjust layer levitation in the Looks sidebar
Rotate, animate and export
Installing the plugin
This one's easy. Go to Rotato's top menu and choose
Install plugin for the design app you're using.
Understanding your layers in 3D space
Take a look at the layers in your artboard. The top-level layers are the ones that Rotato turns into floating 3D elements. Groups will appear as a single 3D element in Rotato. This is good for buttons with a glyph and a background, as an example.
These layers in your design app
…will look like this in Rotato
The layers in inside the red circle shows what ungrouped layers at the top-level will look like in Rotato.
Simply to go the bottom of the
Looks sidebar, and adjust the
Levitation value. Tip: You can drag sideways on the value's label rather than typing in a number.
Click the Snapshot button at any point and get a crisp 4K PNG of your exploded masterpiece. This is great for specifications for UIs that have a lot of elements. In presentations, but be prepared to hear people whisper "wooow."
Animate exploded artboards
You can animate your exploded artboard just like any other animation in Rotato. But with exploded layouts you can also animate the levitation of the floating 3D elements.
1. Go to the Animations sidebar
2. Position your 3D device and set your levitation in the Looks sidebar
3. In the Animations sidebar, click Add view
4. Position your 3D device again, and set your levitation
5. In the Animations sidebar, click Add view
You now have two keyframes. Click Play (▸) on one to animate to it. Click Render ( O ) to save that animation as a high-definition video in 60 frames per second.
Optional: Change the center of the rotation
By default, Rotato rotates around the center of the device scene. You can change this by holding down command and clicking on the device or one of the floating 3D layers at the position of your choosing.
Here's a few examples where we've set the rotation center on the red 24 date layer.
To reset the rotation center, click the first reset button at the top of any side bar.
Tips and known issues
The exploded artboard feature is still in a very early experimental state. You may encounter behaviors you didn't expect. Try one of these tips. If they don't work out, let us know on firstname.lastname@example.org.
Keep your layers in high resolution or vectors. Rotato will export @5x, to allow you to get close to some of the elements.
For the same reason, use the native resolution, as suggested by your design app when you create a new artboard. E.g. for the iPhone XS: 375 x 815
Drop shadows can look weird as they interfere with the added dimension and lighting, so consider turning those off before you explode your artboard
Symbols may be positioned a bit off in 3D space. If you experience this, try detaching from the symbol before you explode your artboard
Clipping: In XD, Rotato will not crop the parts of the layers that are cropped by the artboard. This in itself can create some cool effects, but if you'd rather not, we suggest you make a quick mask to keep all layers inside the artboard's bounds.