TL;DR: In this post, I go over some tips and tricks that can help designers use “abstract UI” animations—nothing fancier than Figma prototyping and Smart Animate—to quickly illustrate their work. If you’re interested in this, familiarity with the basics of Smart Animate is a prerequisite. I hope that this article is helpful, and welcome feedback and questions!

Thanks to Fiona Rolander and Cheechee Lin for your contributions 🎉

Why I illustrate with animation (illustranimate?)

I love using animations as visual bullet points. Where sometimes I’ll struggle to use my words to describe a concept or a feature or a product idea, a tidy little gif embedded in a Paper doc can do the heavy lifting and spare the audience a bunch of my run-on sentences.

We make and use these sorts of abstract UI animations for a number of purposes at Dropbox:

• They’re all over our websites and landing pages
• We use them in research to convey and assess the viability of value props
• We use them as “vignettes” to demonstrate a design vision or product direction
• They pop up in our products to introduce new concepts and features

I often instinctively reach for Framer for this type of work—others might think to open After Effects or Principle or even Keynote. But I’ve been pleasantly surprised building out these types of animations just using Figma’s prototyping capabilities and its Smart Animate feature. I’ve used Figma to create animations for roadmap docs and product strategy decks and customer surveys, and we’ve even used Figma to create shipped animations for in-product onboarding.

Since I’m already designing in Figma, there’s no time wasted re-creating or exporting-and-importing elements to another tool. And while Smart Animate has its limitations when it comes to expressiveness and overlapping animations, I can get 80% of the value and a pretty decent-looking end product for 20% of the effort I might put into using a different tool.

Here are a few tips that I’ve developed while experimenting with Figma as an animation tool.

Setting things up

Organize your layers

Smart Animate cares about a few things when it’s figuring out how to magically animate transitions:

1. Layer names
2. Layer hierarchy
3. Layer opacity

This is so important it’s worth typing again! In bold! Layer names, hierarchy, and opacity. These need to be consistent between each pair of frames that you want to animate. If a transition doesn’t seem to be working, it’s almost certainly because a layer name is not what Figma expects it to be, or a group has slipped out and nested itself into a different frame.

So, before doing anything, name those frames in a way that makes sense to you. I’ve found it helps when I go over-the-top with names like "ANIMATE ME" or "THIS THING MOVES", but you should use whatever will be sensible to you once there are 14 versions of the same frame on your canvas.

When building the prototype, I create a new state in the animation by first duplicating everything in the prior state. Start with a frame, duplicate, create transition, duplicate again, create another transition, ad infinitum.

Wrangle those frames

Figma prototypes can get out of control and trigger my anxiety with dozens of light-blue nodes and noodles snaking everywhere. I’ve found that it helps me both stay calm and keep track of my work if I lay out my prototype’s frames according to two simple rules:

On the horizontal axis are “keyframes” of the animation that I’m building: major changes where new elements appear or disappear. On the vertical axis are “states” of each keyframe: highlights, hover states, and intermediate moments in a transition.

Record your creation

While it isn’t a strict part of setting things up, at some point you’ll make a screen recording of whatever you create and turn it into a video or a gif. My personal favorite screen recording software is ScreenFlow. It has basic editing capabilities that allow me to speed up or slow down moments, and cut out mis-clicks and mistakes that I might make when running through and recording my prototype. It can also export to a number of different formats, including gif.

Techniques

This is the fun part: For each of these four techniques I’ve put together a prototype to play with and duplicate and deconstruct. You can find them all in this Figma file. There’s a brief description of each technique plus a link to a page that (hopefully!) demonstrates the technique better and more clearly than my words can. Please make a copy of the file and play around!

Sequencing

Rather that applying Smart Animate to a bunch of elements in the same transition, you can create expressive, dynamic animations by chaining multiple states into what appears as a single, fluid transition. An easy way to do this is with delays; this example demonstrates a pattern where one animation chains immediately to another using After Delay.

Prototype: Sequencing

• All of the elements are present in all of the frames; it’s just a bunch of scale changes and fades between opacities of zero and 100% that are chained together.
• The Add button scales down noticeably While Pressing—it’s exaggerated compared with what I might ship in a real UI, but helps to emphasize what’s happening in the animation.
• On Click kicks off a chain of events, strung together by multiple After Delay animations with the delay set to 1ms. This is the most instantaneous sequence allowed by Figma.
• It’s also something I do all the time when making these prototypes.
• After the Add button itself fades out, the second content tile appears in two quickly chained steps, then the Add button reappears in its new position. Each of those two elements is “preloaded” and scaled down slightly in its inactive state, so it pops in with a little bounce. I scale elements using Figma’s scale tool (just press K), which is inexact but fast.

Loops

That same After Delay pattern can be used to loop between states—the blinking cursor below is an example of a small detail that can make an abstract animation more realistic, reinforcing to the viewer that the comment box has purpose.

Prototype: Loops

• The comment box triggers an animation On Click that not just expands the box itself but also fades in the cursor in the next keyframe.
• There are two states of the cursor—at 100% and zero opacity—that are connected to one another by After Delay animations, each with a 500ms delay. Left alone, this would loop forever or until it exhausted my laptop battery.
• For both of those states, the Post button has an On Click animation attached to advance the prototype; I want to be able to click that Post button whether the cursor happens to be visible or not.

Fade-and-zoom

An effective way of contextualizing what you’re animating is to situate a feature in its overall product interface, then zoom in to the feature for emphasis. It also looks fancy, which belies the fact that it’s easily achieved by just manipulating opacity and scale in Figma.

Prototype: Fade-and-zoom

• Just like the previous two techniques, this fade-and-zoom animation is composed of multiple steps.
• Start on a zoom-out of the entire interface, with all of the elements visible and grouped into a containing frame.
• The first animation is triggered on Key/Gamepad by hitting the space bar, then the surrounding abstract UI fades out.
• Immediately after that, a second animation is triggered After Delay with the delay set to 1ms, which is as close to instantaneous as Figma allows. This animation scales up the entire containing frame and fades out all of the remaining chrome elements. What’s left is the UI element(s) that is the focal point of the animation.

Dragging (and dropping)

It took me a bit of stumbling around to figure out how the On Drag trigger works, but now I realize it’s pretty straightforward. Dragging interpolates the properties of everything that’s in both frames being animated. When you attach the On Drag trigger to an element, it basically becomes a little control for your animation.

Here’s how this works with a slider that controls the height of bars in a graph. The first of two frames in this animation has the slider knob on the left side and the bars collapsed. The second frame has the knob on the right side and the bars expanded to their different heights. The two frames are connected via On Drag triggers within the knob, and dragging it in either direction transitions between the two frames. When you let go, it’ll snap to the starting frame if it’s nearest that end; otherwise, it’ll advance and animate to the second frame.

Prototype: Drag basics

Below is a more practical example. By using On Drag you can create a pretty good drag-and-drop animation:

Prototype: Drag-and-drop zone

• Attach an On Drag trigger to the file in the first keyframe, and connect it to a second keyframe where the file is positioned atop the “drop zone” and the drop zone appears active.
• The “drop” part of the animation is triggered by a good old After Delay / 1ms trigger attached to the second keyframe. When the drag is released on that second keyframe, the delay trigger runs through to the final state of the animation.