How to prep illustrations before animating in Rive

HLabs is a design agency that works with top publications like The Economist, Ars Technica, and Wired.

Hey, we’re HLabs! 👋 We specialize in digital web design, interactive storytelling, and no-code technology. Today, we'll share our tricks to transform illustrations into interactive animations.  

It all starts with our clients (they’re always the main characters!) sharing with us illustration files made in After Effects, Figma, or some other design tool, and then we take it from there to work our magic in Rive.  

Before our clients hand off illustrations to us, we send best practices for how to prep their files. The tips and tricks below help us animate efficiently so we have maximum time for creativity. We hope these tips inspire others to animate more, too. 

V is for vector

Choose vector over raster whenever possible as a medium for the illustration. It makes animating so much easier. 

Layering the file

When building characters or objects, be aware of how elements may be animated during production. Never clip elements, and always try to use layering and masks to hide what’s unnecessary, e.g., hands in pockets, arms behind objects, and hands/palms holding objects.

Release to layers

Please release all paths and shapes to layers. This will help with the animation layering process.

Naming the layers

You’re the original creator, so you know best what elements should be animated in your piece. Make sure to name all the relevant layers for our animators. This will enormously speed up the production process.

Header composition

Dimensions may vary based on the final piece format, but we set the illustration canvas to landscape orientation, 1920 x 1080px, and use a square safe area to create the composition in the middle. Make sure all the elements vital to the composition sit within the 1080 x 1080px safe area. 

These are the guidelines we use generally for animated illustrations in articles. The padding difference from above should be considered for any header or hero animation.

Inline composition

This composition should be designed on a square canvas using two overlapping safe area guides: landscape and portrait.

Landscape guide for desktop use: 1920x1080px.

Portrait guide for mobile use: 1530x1920px.

The intersection of these guides, 1530x1080px, should all the elements vital to the composition.

Page furniture

The online article should feel like one long masterpiece. So, apart from bringing your illustrations to life through animation, we also use elements from your artwork between the scenes. We call these elements “page furniture.” Please save a separate vector file with these for our design team. 

Chase the animation

Start building your own interactive animations with Rive — a design tool with a robust free tier for learners and seasoned professionals.  

The illustrations in this article came from the current The Economist x IBM series.