If you're already using Figma for product design or web design, you may need to animate your designs for demos or announcements.

Figma's built-in animation features are primarily geared towards creating interactive prototypes. These allow you to link different frames and apply basic transitions and animations.

While this is sufficient for simple interactions, more complex video animations require external tools or plugins.

In this post, we'll guide you through animating your Figma designs with Linearity Move using our Figma plugin. We'll also show you how to create Figma animations from within the platform using Prototype Mode.

If you haven't already, download Linearity Move below:

Bring motion in-house

Animate marketing assets in seconds with Linearity Move.

Get started
Linearity
Linearity Linearity

Option 1: Linearity's Figma plugin

Figma is a powerful tool for designers renowned for its collaborative capabilities and intuitive interface.

To overcome Figma’s animation limitations, consider using animation plugins. Linearity Move is designed to integrate seamlessly with Figma, making it easy for you to create advanced animations with Figma assets.

Step 1

Install the Linearity Move plugin

Go to Figma’s Community page and search for the Linearity Move & Curve - Animation and Illustration for Figma plugin. Click the Open In button to start using it in your Figma files.

Another way to get going with the Linearity plugin is to open the Figma file you want to animate, go to the Resources tab at the top, and search for "Linearity Move & Curve - Animation and Illustration for Figma."

Click or tap on Run to execute the plugin.

Run Figma plugin
💡
Learn more: read about our Figma plugin and how it works on our blog.
Step 2

Import or copy your Figma design to Linearity

We're going to copy and animate our Figma designs on iPad.

In Figma, select one or several elements or Frames and long-press to open the options menu. Tap on Plugins > Linearity Move & Curve - Animation and Illustration for Figma.

Select Linearity plugin in Figma

A modal will pop up giving you the option to Export to Move or Export to Curve. Choose Export to Move and tap on either the Open in Move or Copy button.

We're copying our Frames over to Move.

Open in Move or Copy Figma

Once your design elements have been copied, go to Linearity Move and create a new Project or open an existing one.

Long-press on a Scene in the Project Timeline to see more options, then tap Paste. This will neatly paste your entire Figma Frame with all its elements in place.

Paste scenes Figma to Linearity Move

Repeat with any other Frames or elements you wish to add from Figma to Move to create your animation.

Step 3

Animate your Figma designs

Linearity Move provides a rich set of animation tools. You can use Animation Presets to quickly whip up stunning motion graphics or create Keyframe animations and fine-tune them with precision.

Double-tap on any Scene in your Project Timeline View to open the Scene Timeline and begin animating.

Scene Timeline Linearity Move

Scene 1: reveal and fly in

A simple way to reveal background elements is to cover them with a shape and animate the shape.

Switch to Design Mode and draw a shape using the Shape Tool. If you need a more complex shape, select the Node Tool and add more nodes.

Change the shape's Fill Color to the same color as the background.

Node Tool Linearity Move

Once your shape is ready, switch back to Animate Mode. Move the Playhead to about 1 second on the Timeline and use the Node Tool to move the nodes of your shape to reveal the element underneath.

Shape animation Linearity Move

Linearity Move automatically adds a Natural easing to the animation. You can also tweak this by going to the Animation tab in the Inspector on the right.

0:00
/0:07

Move the Playhead back to the start.

Next, you can give the character some life by moving her out of view at the beginning of the animation. Rotate her slightly to create a natural fly-in effect.

You can also organize your Layers into different Groups (e.g., Hair, Head, Upper Body, Arms, etc.) to make it easier to animate different elements.

Organize layers Linearity Move

Move the Playhead to about 2 seconds and then move the character into place. Remember to rotate the character slightly in the opposite direction to get the fly-in motion effect.

Select the character's Upper Body Layer Group and rotate it back and forth at 1-second intervals. This will create a rocking effect.

Copy-paste keyframes Linearity Move
💡
Pro tip: you can long-press any Keyframe in the Timeline to see more options. Here, you can copy and paste the Keyframe to repeat motions throughout your Timeline.

You can preview your animation at any time by tapping on the Play button above the Timeline.

0:00
/0:10

Scene 2: spin and bounce

Let's move on to Scene 2. Go to back to your Project Timeline View by tapping on the < Project link above the Layers Panel on the left.

Project Timeline select Scene Linearity Move

Double-tap on Scene 2 to start animating.

Select the image element in the background and move the Playhead to 2 seconds. Go to the Library Tab in the Inspector and select the Spin In effect from the Presets tab.

Spin in animation preset Linearity Move

You can also make the image element fly in by moving the Playhead back to the start and using the Selection Tool to move the element out of view.

Move out of view Linearity Move

Select the character and the two circles she's lying on and apply the Jump Preset. This will make these elements bounce into place.

You can also move these elements out of sight at the beginning of the Scene to give the jump effect more impact.

Jump animation preset Linearity Move

Now, the super fun part. Animate your character's legs by selecting each leg's Group of elements and moving them using the rotation handle.

Copy-paste Keyframes to repeat the actions and create a swinging effect.

Animate legs Linearity Move

Lastly, we're going to make the circles bob subtly. Select the character and the two circles and move them slightly up and down at different intervals on the Timeline.

Bobbing effect Linearity Move

Scene 3: mask and disappear

Go back to your Project Timeline View and double-tap on Scene 3.

💡
Scene Transitions: You can apply Scene Transitions in the Project Timeline View by tapping on the Transition icon between two Scenes. This gives you the option to change the transition animation, direction, and timing.
Scene transitions Linearity Move

In this scene, our character falls into a portal—we like to think of it as the portal of creative flow. To create this effect, we'll repurpose the existing image mask in the Figma illustration.

First, you can move the character out of sight at the beginning of the animation. Position her at the top center, above the portal.

Character animation with mask Linearity Move

Next, use the Node Tool to edit the mask so we can see our character up until she falls into the portal (she'll disappear behind the mask at the bottom of the circle).

Mask animation Linearity Move

Move the Playhead to the point where the character should completely disappear, and move your character to the bottom of the canvas.

Because the character is falling, you can change the easing to Ease Out in the Animation Tab.

Fall animation Linearity Move

Now, we'll wrap up the animation by closing the portal. Move the Playhead slightly ahead (after the fall is complete) and resize the circle to very small.

Add an Opacity Keyframe and set it to 0% to make the circle completely disappear at the end.

Closing animation Linearity Move
Step 4

Export your Figma design as a video

Use Linearity Move’s export features to save your animations as GIFs or video files.

Go back to the Project Timeline View. Preview your entire animation again, tweaking the Transitions as desired.

Export menu Linearity Move

Once you're happy with your animation, go to the File name menu item and select Export.

Edit the Export options and tap the Export button to finish.

Exporting video Linearity Move
💡
Looking for more in-depth tutorials? Check out our step-by-step video on using our Figma plugin to create an event announcement post.

Here's our complete Figma animation video made with Linearity Move:

0:00
/0:14

Option 2: Prototype Mode in Figma

Another way to animate Figma designs is using Figma's built-in Prototype Mode. It enables you to add basic interactive animations for UI/UX prototypes.

Figma prototype mode
  1. Switch to Prototype Mode: click on the Prototype tab in the right sidebar. Here, you'll see all the options to create an animated prototype based on clicks, hovers, and scrolls. You can also choose a preview device, such as MacBook Air.
  2. Link frames: select the element you want to animate and drag the blue circle to the destination frame, or choose the Destination in the Prototype tab.
  3. Apply animations: in the Prototype settings, customize the Interaction and Scroll Behavior and choose the type of action (On Click, On Drag, While Hovering, etc.). Next, you can choose what happens when the action is performed and choose the type of animation (Instant, Dissolve, Smart Animate, etc.).
  4. Preview your prototype: click on the Present button in the top right corner to try out your animated UI prototype.
  5. Share your prototype: While you can't export your prototype as a video, you can share it or embed it. To get the embed code, click on the Share Prototype button at the top right of your screen, select Get Embed Code, and click Copy.
Figma prototype preview
💡
Note: any changes you make to your Prototype file will update the embedded file.

Check out our Figma Prototype below (click on the character to animate):

While Figma's Prototyping options are great for demonstrating user interface interactions, they don't suffice for creating videos with complex animations.

This is why the Linearity plugin for Figma makes so much sense for graphic designers wanting to animate their Figma designs.

Do more with Figma and Linearity

Animating Figma designs has never been easier with the help of our powerful plugin. There are more ways to use Figma and Linearity together:

  • Easily import your Figma design files from within Linearity Curve or Move using our Figma integration.
  • Export your Figma designs as SVG or PDF and open them in Linearity's software suite to retain and edit vector layers.
  • Open Figma files in Linearity Curve to keep designing with our Figma plugin. Seamlessly animate your Linearity Curve designs in Move.
  • Copy-paste animated elements between Move files to save time.
  • Use Linearity's Asset Library to manage branded elements and quickly add them to all your Curve and Move projects.

Unlock more potential in your design workflow. Linearity has all the tools you need to create and animate complex designs and marketing assets.

Get started for free below, or check out our special pricing for professionals and teams.

Bring motion in-house

Animate marketing assets in seconds with Linearity Move.

Get started
Linearity
Linearity Linearity

Frequently asked questions

What's the Figma plugin Linearity Move & Curve - Animation and Illustration for Figma?

Linearity's Figma plugin enables users to seamlessly create and animate Figma designs. You can run the plugin and open or copy Figma Frames or elements to Linearity's software suite.

What are the alternatives to After Effects and Figma for animation?

There are several Figma and After Effects alternatives available. One popular choice is Adobe Express, which offers a wide range of animation tools and capabilities for marketers and graphic designers.

Another option is Toonly, a user-friendly software that allows for easy creation of animated videos. If you're looking for a more advanced tool, Moho Pro (formerly Anime Studio) is a great option for creating professional animations with a variety of features.

How can I export Figma animations for a website?

To export Figma animations for a website, you can use the Linearity plugin to create and animate your designs. Once you've completed your animations, you can export them as video or GIF files and add them to your website.

How can I export a Figma file so I can animate it in After Effects or Linearity Move?

Select the frames or elements you want to export from your Figma design. Once you've made your selection, go to the File menu and choose the Export option.

From there, you can select the format in which you want to export your file. For After Effects, you can export as an SVG or PDF file and import it into After Effects to animate. For Linearity Move, you can use the Linearity plugin to seamlessly transfer your Figma designs for animation in Move.

Where can I learn animation design?

If you're looking to learn animation design, there are several resources available online to help you get started. Websites like Udemy, Coursera, and Skillshare offer a variety of courses on animation design taught by industry professionals. Check out our vetted list of great animation courses.

Another option is to explore free tutorials on Linearity's Academy.

What's the best software to create motion graphics when I already have existing Figma files for each scene?

If you already have existing Figma files for each scene and are looking to create motion graphics, one of the best software options is Linearity Move. With Linearity Move, you can easily import your Figma designs using the Linearity Move & Curve plugin.

Linearity Move offers a user-friendly interface that empowers anyone to work with vector-based elements from Figma and animate them with ease.

How to make Figma animations | Linearity
How to make Figma animations | Linearity