Today, we’re introducing new prototyping features that will open the door to new transition possibilities in Figma. They’ll help bring more of your interaction design ideas to life:

• Smart Animate, a new transition type that automatically animates similar objects and improves existing transitions
• Drag, a new interaction type that lets users control a transition with a drag of their finger

Watch this product tutorial to get all the details and learn how to get started, or check out this help article.

Features to help achieve advanced transitions like Smart Animate and Drag have been on our minds for a while. They’ve been on our customers’ minds for even longer. If you’re a fellow designer or someone who works closely with design teams, you’re probably all too familiar with the challenges of designing for a highly requested customer feature, one where users may have pre-existing expectations for how it might work. Click ahead to dig into the features and see real examples of Smart Animate in action. Or continue reading to see how we designed Smart Animate…

As we kicked off design discovery for our first release of Smart Animate, we began to look for answers starting from a familiar place—our users.

Understand users who are experiencing pain

When working on a hard design problem, talking to users is always a great start and you don’t have to be a big company to set up systematic ways to do qualitative user research. One of the ways we continuously gather feedback is through in-product NPS surveys. (Surprise! We do read the comments and take action.) Our support team replies to many responses directly, but we also categorize the NPS comments into meaningful groupings. This makes it easy to keep a pulse on specific topics and can serve as a starting point for user feedback when we’re ready to kickstart design for a new feature.

Here are some things we heard about prototyping in Figma…

The value of the NPS surveys does not lie in the score. For us, it’s in having an open feedback channel where we can hear from customers who are experiencing “pain”. We’re able to talk to them directly to get ideas on what features they’re looking for and understand what they like and don’t like about how they animate prototypes today inside and outside of Figma.

Fun fact: Many of these NPS survey respondents became our first beta customers. Special shoutout and thank you to all of them!

Zoom out to uncover patterns across use cases

Because a feature like Smart Animate needs to support a variety of use cases, we can’t just design Smart Animate with one specific use case in mind. Otherwise, it’ll be too limiting and not useful for the majority of our users. To make sure that what we design can scale for a multitude of use cases, we had to zoom out and search for common design patterns.

We gathered all the animation examples we could find through our conversations with customers. We also did our own research into interactive interfaces we use in our daily lives. Then we explored how someone would prototype this in Figma and what challenges they would face when doing so.

This process led us to two major patterns that you’ll see in today’s first release of Smart Animate.

Pattern #1: An object appears, disappears, or changes while the user stays on the same screen

You probably see this pattern everyday, like when you hover over a video and the playbar appears, when you hover over a navigation item and a dropdown expands, or when you swipe an object away and new content emerges from underneath.

Pattern #2: Several UI elements stay fixed while the majority of the content on the user’s screen changes

You’ll find this common pattern in a tabbed navigation. This slightly more complex animation appears when you drag content left or right and the tab bar indicator moves in the opposite direction.

Upleveling beyond individual use cases allowed us to focus on common denominators. Pinning down these two patterns helped us keep the feature scope focused while still addressing many of our customers’ use cases.

Find the Figma way (or your way)

We’re not the only ones trying to solve these design challenges for our customers. However, we wanted our implementation of the solution to ‘feel’ like Figma. That meant making sure Smart Animate and Drag felt well-integrated with existing prototyping features. Sometimes, building new features requires a re-examination of what’s currently there.

First at the most fundamental level, we wanted the auto-animation of layers to work out-of-the-box as best as possible. So we revisited the basics, like layer naming. We didn’t want to completely reinvent the wheel, but this seemingly small update took countless hours to get right. I’ll spare you all the details, but essentially we updated how we automatically name and rename objects on creation or duplication, so layers that match up based on hierarchy, naming, and order will auto-animate. Additionally, in cases where something wouldn’t work, we wanted to make debugging of that situation a lot easier! That’s why you’ll get visual feedback on hover and selection to quickly check if layers match up correctly. Now when you hover over the layer you’re trying to animate, you’ll see every matching counterpart on other frames.

The other thing we wanted to make sure we got right is enabling users to combine the new Smart Animate transition with existing transitions. For transitions you already use today like Push, Move, or Slide, you’ll now see an additional setting called “Smart Animate Matching Layers”. This automatically detects matching layers between two screens and animates them separately from the other objects. This little checkbox enables you to build more complex animations, faster, while minimizing the number of duplicative layers you previously needed to create to express such an animation.

For us, designing new features also means making sure the new additions work seamlessly alongside existing features and doesn’t add unnecessary product complexity. It’s not just about building more new stuff; it’s also about making sure the stuff that’s already there still works great and continues to support new capabilities.

Prototype examples to help you get started

Now to help inspire ideas and give you a few real examples, our team got together to create a bunch of new animated prototypes you can view and duplicate. Check out some examples of what you can create with Smart Animate and Drag. And get the source file to see how our team built it.

Simple card expansion

Page transition with Material Design

Tab transition with multiple animating elements

Swipe to remove animation

Prototype for your favorite devices, like Apple Watch and TV

We can’t wait to see what you create in Figma prototypes! Tweet @figmadesign with your prototype examples, and email me at niko@figma.com for thoughts on how we can continue to improve prototyping in Figma. There’s so much more that we want to do!