UI Design10 minute read

Create Engaging UI Components: A Figma Animation Tutorial

Figma’s intuitive animation features enhance usability by adding subtle motion effects to UI components like icons, buttons, and product cards.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Figma’s intuitive animation features enhance usability by adding subtle motion effects to UI components like icons, buttons, and product cards.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Anna Muratova
Verified Expert in Design
6 Years of Experience

Anna is a UI/UX designer experienced in creating UI animations and improving the usability of digital products. She has collaborated with a range of clients, from small startups to larger companies, to create intuitive mobile apps, redesign websites with improved visual aesthetics, and establish branding that represents company values.

Previous Role

UI/UX Lead Product Designer
Share

Animations can improve the usability of a web or mobile interface by guiding navigation, indicating progress in tasks, and providing feedback in response to user actions. Animating UI components in particular is an essential—if subtle—way to improve the user experience. For instance, when clicking a heart icon makes it pulse and turn red, or hovering over a button causes it to change color, the user receives instant feedback that cues them to transition to their next task.

In my six years of UI/UX design, I’ve created a range of animations, from animated microinteractions to complex scrolling effects. I’ve found that animating in Figma is beneficial because it allows the grouping of elements into components that can be reused and modified across multiple projects. I also rely on Figma’s “smart animate” feature, a straightforward tool for automating transitions.

In this step-by-step tutorial, I show fellow designers how to create three animated UI components in Figma: a Favorite icon, a call-to-action (CTA) button, and a product card.

A screenshot of a Figma canvas with three components—a favorite icon, a call-to-action button, and a product card—and their variants.

Animating a “Favorite” Icon

A Favorite icon allows users to label an item as important or something they like, often as a way to save it for revisiting later. For example, Gmail has a star icon users can click to mark their important emails. This tutorial demonstrates how to create a similar star so that users can click or tap to mark items they like. The resulting animation will be quite simple—a subtle fade from white to blue—but it is minor details like these that make a product more engaging.

Start by clicking Design file in the upper-right corner of the Figma home page to open a new project.

A screenshot of the Figma home page. In the upper-right corner are Design file, FigJam board, and Import buttons.
Start your animation on the Figma home page by opening a new design file. (Anna Muratova)

Step 1: Create the Default Star

On the toolbar at the top of the screen (we’ll call this the top toolbar), click the shape tool—a square icon—on the left side to access the drop-down menu. Select the star from the menu and then click to draw the shape in your canvas. You should now have a gray star on your canvas.

Once you create the shape, a panel where you can customize the element’s angle, size, color, and effect opens on the right sidebar. Adjust the settings: Click the minus sign in the fill field to remove the gray fill, and choose the stroke color you want for the shape’s outline (I set mine to blue for this tutorial). You can also adjust the line’s thickness by changing the number next to the hamburger icon (I set mine to 2).

You’ve created the star’s default appearance (or how it looks before a user clicks it).

A screenshot of Figma’s design mode with an empty star shape outlined in blue in the canvas and a customization panel on the right.
Create the default appearance of your Favorite icon by using the shape tool and adjusting the color and line settings. (Anna Muratova)

Step 2: Turn the Star Into a Component and Add a Variant

Click on the star, and then click Create component (the diamond icon) on the top toolbar to turn the star into a component.

A screenshot of the star and a toolbar above it with four icons. A tooltip under the diamond icon reads, Create component.
Convert the star into a component by clicking on it and selecting Create component. (Anna Muratova)

Next, add a variant, or a copy of the component that you can modify. On the top toolbar, click the Add variant icon (a plus sign in a diamond).

A screenshot of the component and a toolbar above it with four icons. The diamond icon has a plus sign inside it, and its tooltip reads, Add variant.
Click the Add variant icon to create a variant. (Anna Muratova)

You now have a component set with two variants of the star. Double-click the second variant (the bottom star) to open the right sidebar and change the fill to match the stroke color using the matching tool or by copying the color code. The second variant is what the star will look like after the user clicks it.

The original star, outlined in blue, sits above a variant colored in blue.
Two variants of the star show its appearance before the user clicks on it (top) and after (bottom). (Anna Muratova)

Next, let’s name the two variants. Select the first star. On the right sidebar, check that the Property 1 field reads default. Then click on the second star and change the Property 1 field to filled.

A screenshot of the two stars and their settings. The unfilled star is called default and the filled star is called filled in their respective Property 1 field.
Name the variants using the settings on the right sidebar for each star. (Anna Muratova)

Step 3: Create the Transition Using Figma’s Smart Animate Feature

At the top of the right sidebar, switch from design mode to prototype mode. Select the default variant, and then hover your cursor over it until you see a small blue circle containing a plus sign on the edge of the variant.

Click on the blue circle and drag it to the filled variant to create a connection. An arrow will appear between the two stars, and a panel with interaction settings will pop up.

Set the following properties in the pop-up settings:

  • On click: The first setting in the pop-up is the trigger for the animation. We want the star to change when the user clicks it, so ensure that On click is selected from the drop-down menu.
  • Change to: Next is the action that is triggered. In this case, the default star will Change to the filled star.
  • Filled: Third is the destination, or what the star will change to. The second variant should already be set as the destination, but confirm that it reads filled next to Property 1.
  • Smart animate: The fourth setting is the animation. The options are Instant, Dissolved, and Smart animate. Select Smart animate to automate a seamless transition.
  • Ease out: Choose the type of transition as the star changes from default to filled. Select Ease out for the transition to start quickly and end slowly.
  • Speed: This final setting is the speed of the transition in milliseconds. Set the speed to 200ms (0.2 seconds). This might seem fast, but the pace aligns with user expectations. No one wants to sit and watch lengthy or elaborate animations after each UI interaction.

A screenshot shows the unfilled and filled stars next to the interaction settings panel.
After you create a connection from the default to the filled variant, adjust the animation settings. (Anna Muratova)

The transition from default to filled is complete—but what if the user wants to unfavorite an item or unmark an email and revert the star to the default version?

To enable this action, create another transition, but this time from filled to default. Select and hover over the filled variant and then click and drag the blue circle with the plus sign to the default variant. In the pop-up settings, keep the same properties as the last animation, except change Property 1 to default.

A screenshot shows the unfilled and filled stars next to the interaction settings panel. Two-way arrows appear between the stars to illustrate the motion’s direction.
To enable the user to unfavorite an item, create a connection from the filled to the default variant and then adjust the animation settings. (Anna Muratova)

Step 4: Preview the Animation

To preview the animation, you first need to create a frame. Start by clicking the region tool on the left side of the top toolbar and choosing Frame from the drop-down menu. In the canvas, click and drag to open the frame, then copy and paste the default variant into the frame.

On the right side of the top toolbar, click the prototype view tool to open a drop-down menu with the options Present and Preview. To view the animation in a new window, select Present; to view it in your current window choose Preview. Once the preview opens, click on the star to test that the animation changes from default to filled and vice versa.

A screenshot of the default variant in a frame. The cursor hovers over a triangle in the upper-right corner that reads Prototype view.
Use the prototype view tool to check the animation in preview mode. (Anna Muratova)

Here is a preview of the animated icon:

A GIF of the animation in preview mode. When a user clicks on it, the star transitions from white to blue.

A Call-to-Action Button for Guiding Users

Next, we’ll build on the process we just learned to animate a CTA button. Here again, the animation will be subtle, but we’ll add another variant to the equation in order to create a rectangular button with three states: default, hover, and pressed.

Step 1: Create the Default Button

Working in the same design file that contains your Favorite icon, switch back to design mode. Click the shape tool in the top toolbar and select the rectangle. Click and drag in the canvas to draw a rectangle. In the right sidebar, change the fill color to your preferred color.

Click the text tool on the top toolbar, then add a text box inside the rectangle. Type “Read more” or your desired text into the box. On the right sidebar, adjust the text’s size, font, and color as desired. You can also customize your button—for instance, to give the button rounded edges, adjust the corner radius setting.

Step 2: Turn the Button Into a Component and Add Two Variants

Use the selection tool to select the rectangle and text box. Click Create component in the top toolbar to convert it into a component. Next, click Add variant and a duplicate button will appear below the original button.

Then, with the second variant selected, click on the purple plus sign that appears. A third variant will appear below the second. You now have a component set with three variants.

Change the fill color of the second and third variants. I recommend making the colors progressively darker. I changed my second variant to a darker blue and my third variant to black.

Before we proceed, let’s name the three variants. Click on the first variant, and on the right sidebar confirm that the field next to Property 1 reads default. Select the second variant and change Property 1 to hovered. Finally, select the third variant and change Property 1 to pressed.

A screenshot of three Read More buttons aligned vertically, progressing from the lightest to the darkest shade.
Duplicate the button twice to create a total of three variants: default, hovered, and pressed. (Anna Muratova)

Step 3: Create the Transition by Using the Smart Animate Feature

Now we create the transition from default to hovered. On the right sidebar, switch to prototype mode. Select the default variant and hover your cursor over it until a blue circle with a plus sign appears. Drag the blue circle to the hovered variant to create a connection. An arrow will appear between the two variants, and a panel with interaction settings will pop up.

Set the following properties in the pop-up settings:

  • While hovering: We want the button to change color when the user hovers over it, so change the trigger to While hovering in the first drop-down menu.
  • Change to: The action should be set to Change to.
  • Hovered: The second variant should already be set as the destination, but confirm that it reads hovered next to Property 1.
  • Smart animate: Select Smart animate from the animation options to automate a seamless transition.
  • Ease out: Set the transition to Ease out.
  • Speed: Set the speed of the transition to 200ms.

Repeat these steps for the third variant. Find the plus sign on the hovered variant and drag it to the pressed variant. Set the trigger to While pressing and check that Property 1 reads pressed. Keep the properties Smart animate, Ease out, and 200ms.

A screenshot shows three Read More buttons next to the “While hovering” settings on the left; on the right side it shows the same three buttons next to the “While pressing” settings.
Set the animation settings for the second variant (hovered) and the third variant (pressed). (Anna Muratova)

Step 4: Preview the Animation

To preview the animation, create a frame in the canvas. Copy the default variant into the frame. In the upper right-hand corner of the top toolbar, click on the prototype view tool and choose Preview to view the animation in the same window or Present to view it in a new window. This will open a preview so that you can check that the button changes from default to hovered to pressed.

Here is the preview of the button animation:

A GIF of the animation in preview mode. The button changes color when the user hovers over it or clicks on it.

A Product Card That Grabs Attention

For the final UI animation tutorial, we create and animate a product card. Cards are popular UI components that display a snapshot of information and link to a page. The product card we create in this tutorial incorporates the Favorite and Read More buttons to demonstrate how components can be reused across projects. We also add a simple animation to the card that helps entice clicks.

A screenshot of a product card titled UI Animation Course contains a star and a Read More button
In this tutorial, we animate a product card and incorporate the Favorite icon and CTA button. (Anna Muratova)

Step 1: Create the Default Card

Working in the same design file that contains the two buttons, switch back to design mode. Click the shape tool located on the left side of the top toolbar and select the rectangle from the drop-down menu, then draw a rectangle in your canvas.

We use an image for the background of this card. Click the shape tool again, select Place image/video from the menu, and upload your desired image. Click on the rectangle you drew, and the image will appear inside the shape.

Next, add a text box and input your desired copy (for this example, I wrote “UI Animation Course”). Adjust the font, size, and placement of the text, copy the default variants of the Favorite and Read More buttons we created in the previous steps, and paste them onto the rectangle. In my card, I placed the text box at the top left, the Favorite icon at the top right, and the Read More button at the bottom right.

As a style choice, I want a line to appear at the bottom-left corner when the user hovers over the card. To create this, using the shape tool, select line and draw a short horizontal line on the rectangle next to the Read More button. Customize the line using the right sidebar; I adjusted mine to a 5px width and took the layer opacity to 0% so the line wasn’t visible in the default card.

Step 2: Turn the Card Into a Component and Add a Variant

Select all elements and convert them into a component using the Create component icon on the top toolbar. Next, click Add variant. The second variant will appear below the first. You now have a component set with two variants.

Double-click the second variant, and then click Crop on the top toolbar. You can now move the image inside the rectangle so that a different portion of it appears in the card. You can also make the image larger or smaller. Either of those options will create the illusion of movement in the animation.

Click on the horizontal line. On the right sidebar, change its opacity to 100%, and then lengthen the line.

Name the second variant by selecting it and typing in hovered next to Property 1 on the right sidebar.

A screenshot shows the default product card above the hovered product card.
Two variants of the product card show its default appearance (top) and its appearance after the user hovers over it (bottom). (Anna Muratova)

Step 3: Create the Transition Using the Smart Animate Feature

In the right sidebar, switch to prototype mode. Select the default variant, and hover the cursor over the card until the blue circle with a plus sign appears. Drag the blue circle to the hovered variant to create a connection. An arrow will appear between the two variants, and a panel with interaction settings will pop up.

Set the following properties in the pop-up settings:

  • While hovering: We want the card to change when the user hovers over it, so change the trigger to While hovering from the first drop-down menu.
  • Change to: The action should be set to Change to.
  • Hovered: The second variant should already be set as the destination, but confirm that it reads hovered next to Property 1.
  • Smart animate: Select Smart animate from the animation options to automate a seamless transition.
  • Ease out: Set the transition to Ease out.
  • Speed: Since this is a more complicated animation with multiple components at play, set it to a slower speed of 600 ms. This makes the transition smoother and gives the user more time to process the movement.

The Favorite icon and Read More button will retain the animations you already created for them, so you don’t need to adjust them further at this step.

A screenshot shows the product card variants and the pop-up panel for the animation settings to  the right.
The animation settings for the second variant (hovered). (Anna Muratova)

Step 4: Preview the Animation

To preview the animation, create a frame in the canvas and copy the default variant into the frame. In the upper right-hand corner of the top toolbar, click on the prototype view tool and select Preview to view the animation in the same window or Present to view it in a new window. This will open a preview so you can check that the card works as intended. Test the animation by hovering over the card to watch the line and background change. Click on the button components to see the preset animations.

Here is a preview of the card animation:

A GIF of the animation in preview mode. When the user hovers, the background shifts, the line appears, and the button components are animated.

Elevate the User Experience With Figma Animation

Once a designer masters the animation of foundational UI components, they can easily move on to more complex animations, such as scroll-triggered animations and animated data visualizations. Figma’s animation functionality works best for simple graphics and UI components; for more complex animations, such as motion graphics in a video or for 3D animations, I recommend using Adobe’s After Effects or Apple’s Motion.

The UI animations covered in this tutorial are a great place to start improving product usability. Even though I’m experienced at creating more intensive animations, I often use these simple effects in my work because they’re effective and efficient. Sometimes, elegant simplicity makes all the difference.

Understanding the basics

  • How do you create animation in Figma?

    To animate UI elements in Figma, leverage features like smart animate—a tool that automates transitions. Once you’ve created your animation, preview the design in Figma to ensure that it works.

  • Can Figma be used for motion graphics?

    Figma can be used to create simple motion graphics. Designers can create transitions and interactive elements that simulate motion in Figma. However, for more complex motion graphics, it’s better to use a specialized tool like Adobe After Effects.

  • Is Figma animation free?

    Figma offers four subscription tiers. The basic tier is free and allows you to work on unlimited drafts and save three files at a time. Both free and paid subscriptions enable users to create, prototype, and collaborate on designs and animations.

Hire a Toptal expert on this topic.
Hire Now
Anna Muratova

Anna Muratova

Verified Expert in Design
6 Years of Experience

Zagreb, Croatia

Member since July 7, 2021

About the author

Anna is a UI/UX designer experienced in creating UI animations and improving the usability of digital products. She has collaborated with a range of clients, from small startups to larger companies, to create intuitive mobile apps, redesign websites with improved visual aesthetics, and establish branding that represents company values.

authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Previous Role

UI/UX Lead Product Designer

World-class articles, delivered weekly.

By entering your email, you are agreeing to our privacy policy.

World-class articles, delivered weekly.

By entering your email, you are agreeing to our privacy policy.

Join the Toptal® community.