Back to Plugins
Motion - Animation for Figma

Motion - Animation for Figma

Animate your designs, export to video / GIF / APNG / SVG, handoff with developers

giflogowebmmp4motionsvganimationprototypeapnganimatebannerpromo

Plugin Preview

Motion - Animation for Figma preview

About this plugin

Motion is the ultimate animation tool for Figma

🎬 Animate mobile apps, websites, landing pages, micro-interations

🎬 Animate social media, videos, ads

😊 Work on your canvas in Figma in real-time (no need to switch to another window)

πŸ“‚ Export as Video, GIF, APNG, SVG, and more

🀝 Share animations with your team

πŸ§‘β€πŸš€ Support available 24/7


More than 300,000 users already us it! πŸŽ‰

Join us!



πŸ’‘ How to use it


There are three ways to animate, and you can mix them however you like!


1. Automatic recording of all canvas changes

Turn on the "Record" button in Motion and follow the instructions.


2. Using animation presets

Select a layer, and the presets panel will appear in Motion. Choose any preset you like.


3. Manual animation

Use keyframes, paths, and links for advanced animations.


Check our documentation for more details.



πŸ“– Documentation


Quick Start Guide

Animation Examples



πŸ”¦ Features


For Beginners and Professionals

Whether you're a beginner or a professional, Motion is a powerful and easy-to-use tool. It offers various animation tools, allowing you to choose the one that suits your needs for any type of animation.


Automatic Recording

Record your animation with just a few clicks. Turn on the option, make changes on the canvas, move the time handle forward, make more changes, and click play to see the result.


Animation presets

Choose from nearly 100 ready-made animation presets for quick and easy motion effects.


Keyframes

Animate almost any layer property with precise keyframe control.


Paths

Move objects along a custom path for smooth animations.


Links

Create advanced animations with depenedent objects.


Export to Multiple Formats

Save your animations as GIF, Video, APNG, SVG, and more.


Team Collaboration

Share your Figma file with edit permissions to let your team view and play animations.



πŸ™‹β€β™‚οΈ FAQ


What can I animate with Motion?

The short answer is literally everything. There are no limits. You can animate interfaces, apps, websites, landing pages, promo videos, games, social media, micro-interactions, ads, Instagram stories, and YouTube shorts. The possibilities are endless!


Why Motion and not other tools?

Motion is one of the most powerful animation tools for Figma. Plus, you never have to leave Figmaβ€”no switching windows or syncing with external apps. It's seamless and efficient!


What is Automatic Recording?

Create animations just like designing! Move the time handle, make changes in Figma, and repeat. Motion records everythingβ€”just hit Play when you're done!


Which export formats does Motion support?

  1. GIF – Great for short, looping animations.
  2. Video (MP4/WebM) – High quality, small file size, ideal for social media.
  3. APNG – Animated PNG with full transparency.
  4. Animated SVG – Best for web animations.
  5. CSS – Lightweight animations for websites.
  6. JSON – Perfect for developers.
  7. PNG Sprite – A sequence of frames in one file.
  8. PNG Frames – Individual frames for custom use.


How do I share animations with my team?

Anyone with edit access to your file can view and modify animations. To prevent changes, you can lock animations for other users.


What should I do if I have a problem?

You can always reach out via email or any of our social media channels. We strive to assist our users 24/7.



🌍 Contact


You can always reach out to us at [email protected].


X (Twitter)

Facebook

Plugin Details

Version522
CreatedSeptember 21, 2020
Last UpdatedApril 5, 2025
CategoryPrototyping & animation plugins
CreatorPavel Babkin
Stats142592 installs, 4399 likes
PricingPaid

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://*.figma.com
    • https://motionplugin.com