image of dan scott introducing how to animate in figma

Creating Smooth UI Animations in Figma: A Step-by-Step Guide

Daniel Scott

@dan

Hi, everyone!

In this post, we’re all about User Interface (UI) design! We’ll be creating an animation in Figma and learning how to customize it for the ultimate user experience (UX).

I’ll be guiding you through the process step-by-step. Read along and enjoy or practice as we go on your own laptop! 

This post is based on one of the classes from my Figma Essentials course. Feel free to look it up at Bring Your Own Laptop, sign up, and learn all there is to know about taking the first steps into UX and UI and designing amazing wireframes and prototypes!

When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on After Effects, Photoshop,Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!


Let 's jump in!

Ready for more? Become a BYOL member!

Explore 30+ Essentials and Advanced courses in Figma, Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. Enjoy personalized support, earn certificates, connect with other creators and tackle exciting community challenges.

START YOUR LEARNING JOURNEY
icon all courses benefit

Unlimited access to ALL content

Instant access to all of our courses and exclusive content while you're a member.

icon support benefit

Priority advice and support

Ask us anything! Our amazing Teaching Assistants are here to support you

icon certificate benefit svg

Certificates of achievement!

Celebrate and share the milestones in your learning journey

1.  Drawing Animation Elements

If you are diving into Figma for the first time and planning your first wireframe or prototype, know there are awesome vector design tools to help you create and edit your objects.

We will start by drawing a set of headphones and a cute box for shipping them to our customer.. It’s quick and easy!

If you are already familiar with vector design in Figma, you can scroll down to the next section. 

First, we’ll use the Rectangle tool to draw a first rectangle. Then, we select the Move tool to change its corner radius and match the shape of an earpad. There is a shortcut for changing these corners one by one – hold Command on a Mac or Alt on a PC while dragging the radius handles with the mouse. We can also change their values in the independent corners panel.

adjusting corner radius values in figma

Adjust corner radius to make your shapes smoother.

This earpad looks acceptable, let’s duplicate it. Yes, there is a cool shortcut for that, too! With the shape selected, we press and hold Option on a Mac or Alt on a PC while dragging it with the Move tool. Next, we flip our duplicated shape horizontally by using the shortcut Shift + H on both Mac and PC.

vector design of duplicated headphone earpad in figma

Speed up your workflow, don’t do it twice. Duplicate and flip!

Pro tip: If you can’t remember where in the menus you can find a specific command or any shortcut, you can search for them with Command + / on a Mac or Control + / on a PC. A search field will pop up for you to type in what you’re looking for. It’s a lifesaver!

 

Now let’s draw the headband. We draw a circle with the Ellipse tool, holding Shift while dragging to keep it proportional. Next, we switch it from a filled object to a stroke with the shortcut Shift + X on both PC and Mac. We just need an arch, so let’s cut the circle. Quick way to do it: draw a new rectangle and place it over the area we want to remove. Then we select both shapes, make sure the rectangle is on top, move up to the Union Selection button and pick Subtract Selection. Done!

overlapping rectangle and ellipse for subtract selection in figma

Subtract selection helps us with cutting shapes in seconds.

Align the arch with the earpads, select all shapes and group them with Command + G on a Mac or Control + G on a PC and we have drawn a cool set of headphones, our animation’s first element!

grouping vector shapes that form a headphone set in figma

Group all the objects and give the new layer a clear name that will be easy to identify by other team members.

Now, for the shipping box. Let’s draw two rectangles, line them up, and group them as shown below. Now that we have two elements, let’s start animating!

vector box and headphones designed in figma

We can create a vector box for our headphones with two basic rectangles. Easy, right?

2.   Animation in Figma

The first thing to do is duplicate the frame where our elements are nested. You already know this one: click on the frame’s name and drag it while holding Option on a Mac or Alt on a PC. Let’s name it “Animation 2” and select it. With the box layer  on top, we use the Move tool to select our headphones and drag them down until they are completely hidden behind the box.

creating an animation of a headphone set dropping into a box in figma

Make sure the headphone set is hidden behind the box layer on the second frame.

Let’s change to Prototype mode. Shortcut Shift + E on both PC and Mac and we’re there! Next, we select the first frame and click on the Add Starting Point button in the Prototype panel. The first frame, “Animation”, is now set as the flow’s start. Now let’s connect both frames! Click and hold the handle on the right side of the first frame and drag it until it connects to the “Animation 2” frame.

We now have one noodle joining both frames. This indicates the direction the flow takes. Let’s have a look at some of the Interaction settings and adjust them to customize our animation.

Trigger – this sets the user action that will start the interaction, like tapping a button, or hovering over an image. We can also set a delay time for the interaction to initiate automatically.

after delay option highlighted in figma

After delay is a time-based trigger.

  • Action – this defines what happens when the user “pulls the trigger”. It ranges from navigating to another frame to opening an overlay, like a pop-up warning box, among others. This is also used for variables.

actions drop down menu in figma

Using actions allows users to navigate through your project.

  • DestinationShows the target frame or object that the user will flow to after the interaction is complete.

selecting destination from the interactions menu in figma

Set a destination for the selected action and observe how it contributes to your user flow design.

Animation – This setting allows us to set the transition style between frames, such as Instant (no animation at all), Slide in or out, and Smart Animate, my favorite of the set.

highlighted smart animate on the interactions panel in figma

Smart animate is really the smartest choice for many styles of animation!

Easing and Duration – Two separate settings that are tied to each other. Easing sets the animation’s progression pattern, like starting slow and speeding up along the transition as if we’re stepping on a car’s gas pedal or starting fast and ending slow as if we are pushing the brakes. Different patterns may serve different purposes or highlight different steps of the process. Duration sets the animation’s total time, from start to finish, and helps fine tuning Easing for smoother and more natural transitions.

ease in and out option highlighted on the interactions panel in figma

Easing and Duration settings are vital for a smooth and natural animation.

This covers the basic settings you need to start animating right now. You can find out so much more by signing up to both my Figma Essentials and Advanced courses and becoming a Figma Animation Master!

Ready for more? Become a BYOL member!

Explore 30+ Essentials and Advanced courses in Figma, Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. Enjoy personalized support, earn certificates, connect with other creators and tackle exciting community challenges.

START YOUR LEARNING JOURNEY
icon all courses benefit

Unlimited access to ALL content

Instant access to all of our courses and exclusive content while you're a member.

icon support benefit

Priority advice and support

Ask us anything! Our amazing Teaching Assistants are here to support you

icon certificate benefit svg

Certificates of achievement!

Celebrate and share the milestones in your learning journey

For this example, let’s work with the following Transition settings:

in figma

You can click on the interaction noodle to open the interactions panel.

Time to test our animation! All we need to do is click on the Present button, sit back, and relax!

previewing animation of headphone set dropping into a box in figma

Our first animation is running, but can we improve it? Yes, we can!

There is more we can do to jazz up the animation so let’s move on!

Timeout #1

Want to know more about animation and how it can make user interaction fun and alive? I encourage you to check out this article Animation in UI.

3.  Adjusting Easing and Duration

For this example, we will keep Easing at In and Out, this gives us a nice acceleration and deceleration Bezier Curve (we’ll get to this one in a second). To edit Duration, we type a new value on the Duration field, next to the Easing drop-down menu. Let’s go for 2000 milliseconds – or 2 seconds if you prefer.

setting an animation duration time on the interactions panel in figma

Set a Duration value for speeding up or slowing down your animation.

The animation will now run slower and be less stressful for the eyes. You can try some other values and see what speed best fits your animation. 


4.   Easing Presets and Custom Easing

Easing has a series of presets ready to animate your designs. Custom mode allows us to create our own easing Bezier Curves and duration.

In Figma, the Easing Bezier Curve is displayed on a graph and it is set on time (horizontal X axis) and acceleration (vertical Y axis).

It feels a bit complicated but if we skip the mathematical equations, we can summarize these different effects as shown below.

seven examples of easing modes in figma

Easing is all about acceleration and deceleration, like driving a car or flying a plane.

In Custom mode, we can manually adjust time and acceleration value, by clicking and dragging the handles from both x-axis and y-axis. Let’s say we are animating something like an overlay message, and we need it to rush in,  hang in the middle for two or three seconds, and then rush out again. We can select Custom and adjust our handles like this:

manually customizing easing handles and curve in figma

Depending on the action and response you are looking for, there are countless ways to customize Easing.

5.   Hidden object animation

Another cool feature in Figma: we can hide objects and reveal them as the animation occurs. Let’s see how this is done and add a lid to our shipping box.

  • Base Rule #1: repeat the object you want to be animated in both frames.

  • Base Rule #2: both objects must have exactly the same name.

To create the lid for our box, we can draw a basic rectangle, give it our brand color, and place it over the box. To add some extra movement to our animation, we will place the lid in the first frame above both headphones and box.

By changing its opacity to 0% in the Fill Panel on the right, we get an invisible object that will magically appear during the animation. Awesome!

reducing an object opacity level to zero in figma

Hidden objects add a surprise effect to your animations.

Once again, we can preview our work by clicking on the Present button.

animation of box lid and headphone set dropping to a box in figma

So cool, our box has its own lid and it drops down to secure the headphone set!

One more! We are going to add a tick icon to our shipping box, but we want it to enter the screen from outside the frame. The easy way to do it, after successfully drawing it, of course, is dragging it out into the workspace. But there’s a catch: 

Dragging an object to the workspace outside a frame may isolate it and the animation won’t work.

layer view of tick icon isolated outside original frame in figma

Pay attention when dragging an object away from its frame, it may end up isolated from your animation..

So, how do we fix it? Easy! We move to the Layers panel on the left of our workspace, select the object and drag it back into its frame. All set!

6.   Adding a third frame and finishing our animation

Let’s finish our animation! We have our headphones inside the box, we have closed and checked our package, and all we need now is to send it away. Let’s go!

First, we duplicate the second frame by selecting it with the Move tool and hitting the shortcut Command + D on a Mac or Control + D on a PC. Next, we move our package outside the frame, making sure that all objects end up inside the “Animation 3” layer in the Layers panel.

layer panel view of hidden objects outside frame in figma

Our hidden objects can be found inside their frame in the layers panel.

Now it’s time to change back to Prototype and connect the second and third frames. We simply repeat the process and set our animations just like in the image below. I’ve customized the Easing to make our box speed away from the screen, you can try different values to fit what you feel is most natural.

second interaction settings for animating in figma

Setting up our animation’s second interaction. We may need to fine tune it afterwards, so test it properly.

Timeout #2

Are you feeling ready to create awesome animations in Figma? Get inspired with these examples of UI animation that are trending in 2024.

 

7.   Final Touches

To make sure our animation fits the flow from start to finish, I’ve created a first frame and designed a cool “Purchase” button, with a nice drop shadow. Next, I linked the first frame to the second, where the animation starts, and added a noodle connecting back to the first frame for a full circle effect.

animation prototype noodles connecting four frames in figma

Prototype mode gives you a visual representation of how the animation will flow from start to finish.

And there we have it!

You are now ready to start creating beautiful animations in Figma! 

What 's Next?

Dive deeper into Figma at Bring Your Own Laptop. When you become a BYOL member, you will gain access to my Figma courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up! 

See you in class! – Dan

Ready for more? Become a BYOL member!

Explore 30+ Essentials and Advanced courses in Figma, Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. Enjoy personalized support, earn certificates, connect with other creators and tackle exciting community challenges.

START YOUR LEARNING JOURNEY
icon all courses benefit

Unlimited access to ALL content

Instant access to all of our courses and exclusive content while you're a member.

icon support benefit

Priority advice and support

Ask us anything! Our amazing Teaching Assistants are here to support you

icon certificate benefit svg

Certificates of achievement!

Celebrate and share the milestones in your learning journey