Motion design is cool, but how do you actually create an animation from scratch? And once you do, how do you incorporate it into your design prototypes? That’s exactly what you’ll learn in this tutorial.

A preview of what we will be designing

By the end of this tutorial, we’ll recreate the cool hover animations above. In the process, you’ll learn:

  • How to create mesh gradient animation in Adobe After Effects
  • How to export this animation as a Lottie animation
  • How to import the animation into Figma to create animated hover effects for card and button elements

Watch the video above, or scroll down to read a written version of this tutorial. To follow along, duplicate the Figma file and Adobe After Effects file for this tutorial.

1. Set up the cards in Figma

To set up the cards in your Figma design, we’ll first start with the main frame of the card. This will act as the border of the card.

Set up the card in Figma
Set up the card in Figma
  • Press the keyboard shortcut ‘F’ to use the frame tool.
  • Click and drag in the canvas to create the frame.
  • Give the frame a width of 360 px and a height of 600 px.
  • Rename the frame to ‘Card Border’.
  • Give it a corner radius of 15.
Set up the card in Figma
Set up the inner card

Now we can create the actual card.

  • Press the keyboard shortcut ‘F’ to use the frame tool.
  • Click and drag in the canvas to create the frame.
  • Give the frame a width of 350 px and a height of 590 px.
  • Give the frame a fill color. Any random color will do – it’s just to help you differentiate the background against the visual assets that you’ll insert later. In this tutorial, we’ll use #0066FF.
  • Give it a corner radius of 10.
  • Enable “Clip content” in the right-hand properties panel.
  • Drag this card into the ‘Card Border’ frame.

2. Add the visual assets and animations within the card

Drag the visual assets into the card
Drag the visual assets into the card

Now we’ll add the visual assets and animations within the card.

  • Copy the visual assets provided into the card.

Before we add the animations within the card, let’s take a look at how they work. Look at the ‘Animations’ component, which contains the card animations. For each animation, there is:

  • An SVG vector illustration that will be the starting frame of the animation
  • A GIF animation
View the interaction details
View the interaction details

If you select any vector illustration and inspect the ‘Prototype’ panel, you can see the interaction details of the animation. For example, let’s select the vector paper plane. Here’s what the interaction details above mean: if the user hovers over the vector paper plane, change to the GIF animation of the paper plane.

Let’s add the animation to the card.

Copy the vector plane
Copy the vector plane and insert into the card
  • Copy the vector paper plane and insert it into the card.
  • Change the fill color of the card to #080B12.
Enable “Auto layout” and center the elements
Enable “Auto layout” and center the elements
  • With the card selected, enable “Auto layout” and center the elements.

3. Set up the cards for the mesh gradient animation

Set up the cards for the mesh gradient animation
Set up the cards for the mesh gradient animation

Now we’ll need to set up another version of the card that has the mesh gradient animation.

  • Duplicate the “Card Border” frame.
  • Rename the frames “Card Border/off” and “Card Border/on”.

4. Create the mesh gradient animation in Adobe After Effects

We’ve got our Figma elements set up, so the next thing to do is to create the mesh gradient animation.

Create a new composition in Adobe After Effects
Create a new composition in Adobe After Effects
  • Create a new composition in Adobe After Effects. Use the properties above, but you can pick any background color.
  • Create a new background color.
  • Click Layer > New > Solid.
  • Give it the name ‘Background’.
  • Use a width of 360 px, a height of 600 px and a Pixel Aspect Ratio of “Square Pixels”.
  • Use the color #F28485.
  • Click ‘Ok’.
Add a sphere in the composition
Add a sphere in the composition

Next, we’ll add a few spheres. These will be transformed into the mesh gradient later. We’ll start with the first sphere.

  • Use the ellipse tool in Adobe After effects to draw a circle.
  • Give it a fill of #E76FB6.
  • Drag the circle to the top left corner of the composition.
Add the gaussian blur effect
Add the Gaussian Blur effect
  • Go to the “Effects & Presets” panel and search for “Gaussian Blur”.
  • Double click “Gaussian Blur” to add it as an effect.
  • Use a Blurriness of 300.
  • Uncheck “Repeat Edge Pixels”.
Center Anchor Point in Layer Content
Click "Center Anchor Point in Layer Content"

You may have noticed that the anchor point of the sphere isn’t in the center of the shape. Here’s what you can do to center it.

  • Click Layer > Transform > Center Anchor Point in Layer Content.
set up the other spheres
Set up the other spheres

Now we’ll set up the other spheres.

  • Rename the sphere layer to “1”.
  • Duplicate the layer three times. You’ll now have four sphere layers.
  • Place each sphere in each corner of the composition.
  • Give these spheres the following fill colors:
    • Top right sphere: #FEFEC0
    • Bottom left sphere: #5D3CDF
    • Bottom right sphere: #BFE8FB

We can now add motion to our spheres.

  • Select the four sphere layers.
  • Use the keyboard shortcut ‘P’.
Add a keyframe by clicking the stopwatch icon
Add a keyframe by clicking the stopwatch icon
  • Add a keyframe by clicking the stopwatch icon.
Move each sphere to the next corner
  • Drag the time indicator to 0:00:01:30.
  • Move each sphere to the next corner in an anti-clockwise direction.

Repeat these steps three times so that each sphere makes an entire loop in the composition.

  • For each time indicator below, move each sphere to the next corner:
    • 0:00:03:30
    • 0:00:05:00
    • 0:00:07:00

To create a perfect loop, let’s end the animation with the same keyframes we used at the beginning.

  • Select any sphere layer. Copy the first keyframe and paste it at 0:00:07:00.
  • Repeat for the other three spheres.
apply Easy Ease
Apply Easy Ease

To smoothen the motion, we’ll apply Easy Ease.

  • Select all the layers.
  • Right-click, then click Keyframe Assistant > Easy Ease.

And there you go! To preview the animation, go to the start of the timeline and press the spacebar key.

5. Export the mesh gradient animation as a Lottie animation

Are gradients supported in Lottie animations? Yes, they are! Here’s how to export the mesh gradient animation as a Lottie.

click Window > Extensions > LottieFiles
Click Window > Extensions > LottieFiles
Click the green arrow button
Click the green arrow
  • Click the green arrow button.
  • Click ‘Upload’ to upload the animation to your private animation library on LottieFiles.

The great thing about uploading your animation through the LottieFiles for Adobe After Effects plugin? Your animation will automatically be accessible on LottieFiles, or other platforms that support LottieFiles’ integration.

6. Import the mesh gradient animation into Figma

So how do you add a Lottie animation to Figma?

  • Go back to the Figma file.
  • If you don’t already have it, install the LottieFiles for Figma plugin.
  • In Figma, Right-click, then click Plugins > LottieFiles.
In the LottieFiles plugin, click ‘Previews'
In the LottieFiles plugin, click ‘Previews'
  • In the LottieFiles plugin, click ‘Previews’.
  • Click the mesh gradient animation.
  • Click “Convert to GIF”.
  • Wait for it to convert, then click “Add to Figma”.
  • To crop out the black edges of the animation, hold down ⌘ (Mac) or Ctrl (Windows) and drag the corners.

7. Create the hover animation for the cards

Now that we have our fancy mesh gradient animation, let’s add it to the cards and set up the hover animation.

Right-click, then click Copy/Paste as > Copy properties
Right-click, then click Copy/Paste as > Copy properties
  • Select the mesh gradient in Figma.
  • Right-click, then click Copy/Paste as > Copy properties.
  • Click the “Card Border/on” frame.
  • Right-click, then click Copy/Paste as > Paste properties.
  • Give the “Card Border/on” frame a corner radius of 15.

At this point, the inner card is looking unaligned with the card border, so here’s what we can do.

  • Select the inner card.
  • Click the “Alignment and padding icon” under the “Auto layout” panel, then give it a top padding of 6.
  • Click the “Align horizontal centers” and “Align vertical centers” icons.
Create component
Create multiple components

Next, we’ll set up the hover animation for the cards.

  • Select the “Card Border/off” and “Card Border/on” frames.
  • Click the dropdown arrow next to the “Create component” icon in the toolbar.
  • Click “Create multiple components”.
  • In the right-hand panel, click “Combine as variants”.
  • Click the card on the left, which has the property of ‘off’.
  • Click the “Alignment and padding icon” under the “Auto layout” panel, then give it a top padding of 6.
Set up the card in Figma
Set up the card in Figma
  • In the right hand panel, go to the Prototype panel.
  • Click and drag an arrow from the card on the left, to the card on the right.
The Interaction details menu will pop up
The Interaction details menu will pop up
  • The Interaction details menu will pop up.
  • Use the settings in the screenshot above – the animation should trigger while the user is hovering.

8. Add the animated cards into your design

Paste the cards into the design
Paste the cards into the design
  • Copy the card on the left, which has the property of ‘off’.
  • Paste it onto the “Pricing - Page” frame.
  • Duplicate it twice, so you have three cards.
  • You can automatically align the cards within the design by doing the following:
  • Select all three cards.
  • Click the “Distribute horizontal spacing” and “Align top” icons.
  • Click + next to “Auto layout”.
  • Click the “Align horizontal centers” and “Align vertical centers” icons.

Next, we’ll update the content of the second and third cards, so that they’re not simply duplicates of the first card.

update the text content
Update the text content
  • Update the second and third cards’ text content to match the screenshot above. You can copy and paste the text given in the Figma file.
Update the animations in the cards
Update the animations in the cards

Then, we’ll update the animations within the cards.

  • Select the vector illustration in the second card.
  • Under the Animations panel, change “Property 1” to ‘Rocket’.
  • Select the vector illustration in the third card.
  • Under the Animations panel, change “Property 1” to Satellite.

You can now preview your Figma file, hover over any card and check out your cool mesh gradient animations. But let’s add a drop shadow to really make them pop.

Add a drop shadow
Add a drop shadow
  • Select the card with the mesh gradient border.
  • Click + next to ‘Effects’.
  • Click the icon next to “Drop shadow”.
  • Use these values for the drop shadow:
    • Y - 0
    • Blur - 32
    • Color - #FDE5FD
    • Opacity - 60%

9. Create the hover animation for the login button

Let’s apply the mesh gradient animation to the login button.

  • Select the mesh gradient in Figma.
  • Right-click, then click Copy/Paste as > Copy properties.
  • Click the “Menu Button/On” button component.
  • Right-click, then click Copy/Paste as > Paste properties.
  • Change the button’s corner radius to 30.
  • Change the button’s text color to white.
Create the hover animation for the login button
Create the hover animation for the login button

The button above represents the hover state of the button – that is, the version of the button that the user will see when they hover over it. Now we’ll have to create the default state of the button, which will display when the user isn’t hovering over it.

  • Duplicate the “Menu Button/On” button component.
  • Right-click the duplicated button and click “Detach instance”.
  • Change the name of the duplicated button to “Menu Button/Off”.

Currently, the default state button also has the mesh gradient animation. But we only want the default state to show a static background – the animation should only trigger when the user hovers over the button.

To change the animation to a static background in the default state button, you could hide the text layer, export the button as a PNG, then import it again into Figma. But there’s a simpler way:

  • Install the MockupMirror Figma plugin.
  • Select the default state button.
  • Right-click, then click Plugins > MockupMirror.
  • In the MockupMirror panel, click “+ Create Mirror”.
Delete the text
Delete the text

A duplicate of the default state button (with a static background) will appear.

  • Delete the text selected above.
  • Delete the original default state button (“Menu-Button/Off”).
  • Rename the duplicate to “Menu-Button/Off”.
Update the text in the button and change the pass through settings
Update the text in the button and change the pass through settings
  • Copy the “Log in” text from “Menu-Button/On” to “Menu-Button/Off”.
  • Select the “Menu-Button/Off” layer.
  • Under the layer settings in the right-hand panel, change “Pass through” to 80%.
Combine as variants
Combine as variants
  • Select both “Menu-Button/On” and “Menu-Button/Off”.
  • In the right-hand panel, click “Combine as variants”.
Set up the interaction
Set up the interaction
  • In the right-hand panel, click ‘Prototype’.
  • Click and drag an arrow from the default state to the hover state buttons.
Update the interaction details
Update the interaction details
  • Under the interaction details panel, change the trigger to “While hovering”.
Update the header component
Update the header component
  • In the ‘Header’ component, update the login button with the new default state button we’ve just created.

Finally, you can preview your button animation to make sure that everything is working properly.

We hope you’ve found this tutorial useful! To learn more about motion design, Lottie animations and more, check out these other tutorials on our blog, free animation courses or YouTube videos.