How to Create & Export GIF in Figma | Using Motion Plugin

🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 Join our design community here → bit.ly/DX-Community
How to Create & Export GIF in Figma using Motion Plugin. There are many plugins related to GIFs for Figma but all of them need multiple frames as input to create a gif. However, in this video, we'll be seeing how we can easily create and export gif file in Figma.
#CreateGIF #ExportGIF #FigmaTutorialSeries
Mic - Boya BYM1: amzn.to/2Wx6zhk
Other Computer Accessories: amzn.to/3q8vLaO
If DesignXstream Tutorials has helped you in any way & you want to contribute something back feel free to buy me a coffee! And again it is not mandatory just a free choice for you.
Link: www.buymeacoffee.com/DesignXs...
Thank you! 😊
⏱️Timestamps:
0:00 - Intro
0:34 - Getting Started
0:54 - Setting Anchor Point in Figma
2:14 - Using Motion Plugin
4:52 - Exporting GIF
5:20 - Bonus Tip: Using GIFs as Loading Indicators
7:40 - Final Output
📄Resources:
Motion Plugin by Pavel Babkin: www.figma.com/community/plugi...
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - goo.gl/c5vRzS 😅
🎉 Join our Whatsapp Community now, it's FREE: bit.ly/DX-Community
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
Track: Unknown Brain - Inspiration (feat. Aviella) [NCS Release]
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ LinkedIn - / techzclub
↪︎ Instagram - / techzclub
↪︎ Facebook - / techzclub
↪︎ Twitter - / techzclub
↪︎ Website - TechzClub.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: How to Create & Export GIF in Figma using Motion Plugin, how to easily create gifs in figma, how to export as gif in figma, how to make a gif animation in figma, how to get gif file from figma, gif for figma prototyping, add gif to figma prototype, how to build a gif in figma, creating gif in figma, exporting gif in figma, easy method to create gif animation, gif animations, simple way to create gif in figma.
Note: Some links here may be affiliate links. I will earn a small portion of those sales at no additional cost to you. Thank you for supporting DesignXstream. 😊

[@DesignXstream]

If you found this interesting make sure you check the Lazy Loading Animation in Figma using GIFs: kzbin.info/www/bejne/lYO4Xp6Vf9yIjZY Also, do comment if you like me to make any specific tutorials on Figma, XD or Sketch! 🤘🏼

[@techy7707]

The explanation looks clear and straight to the point. Loved it!

[@DesignXstream]

Cheers man! ✌🏼 Glad you liked it!

[@0bserv3r]

This was really easy and straightforward. Thank you!

[@DesignXstream]

Hey Gina, Glad you found it useful :)

[@ameliachung2665]

wow, that method of changing the anchor is so brilliant !

[@DesignXstream]

Yay! I'm glad you lied it! ✌🏼😄

[@r0anna]

The extra rectangle for adjusting the angle of the plane is super helpful!!! Thanks for the hack!🙏🏾🥳

[@DesignXstream]

Glad you liked the hack! Cheers ✌🏼😁

[@amoghrao1526]

my guyyy!!!! you just taught me something that's gonna be used right away in my upcoming designs! Thank you!

[@DesignXstream]

Cool.. I'm glad you found it useful! 😄

[@gunteriv8415]

Duude, thank you so much, your video is better that 2-3 hours courses:)

[@DesignXstream]

Awesome! Great to hear that! ✌🏼 :)

[@ledung1318]

You're a lifesaver. I really appreciate thatttttt

[@DesignXstream]

Glad to hear that! :) Pls do follow our instagram page for cool design tips: instagram.com/designxstream/

[@CynVal]

Super helpful!! Thank you so much for sharing!

[@DesignXstream]

Glad it was helpful! You have amazing content on your channel as well.. just became your 500th subscriber 😄 Keep sharing more awesome content 🤘🏼

[@nadezhda3612]

Great video! You helped so much! Thank you!

[@DesignXstream]

I'm glad you found it helpful! Cheers! ✌🏼

[@afreezy2354]

Great video! Thank you for sorting through all of the different animation plugins for us :)

[@DesignXstream]

You're very welcome! Glad you found it helpful :)

[@shreyathakur3442]

Okay this video is a gem. thank you

[@DesignXstream]

Hey Sherya, Glad you liked it :) Pls do check our instagram (@DesignXstream) for some cool design bites & tips!

[@rinkiyadav8038]

you have explained in a very easiest way. Thanks

[@DesignXstream]

Glad you liked it! :)

[@topemeister3000]

Excellent video. Thank you

[@DesignXstream]

Hey Sierra, Glad you liked it 😊

[@janinebethsalazar]

this so helpful! Thanks a lot!

[@DesignXstream]

Glad it was helpful! :)

[@gergotorbacksight3366]

Thank you . You are the savior of the gif problem 😁😁

[@DesignXstream]

Happy to help :)

[@MrRooney182]

Very cool and easy to follow thank you, Liked & Subscribed.

[@DesignXstream]

Cheers! ✌🏼

[@charlotte2010ful]

much better than other options for making an icon animation

[@DesignXstream]

Yesss easy to use within Figma!

[@kontextproduction3697]

Cheers man!

[@DesignXstream]

Glad you like it! ✌🏼

[@peterslovanky6531]

Thanks!

[@DesignXstream]

Cheers ✌️

[@muhammadiyad2153]

Thank You Very Much Dude, this help me to make a presentation 🔥

[@DesignXstream]

Glad to hear that! :)

[@abdullahalmamun8264]

Wow, superb!

[@DesignXstream]

Glad you like it! :)

[@NataliiaLytvyn]

Nice! Thanks! Good lifehacks!

[@DesignXstream]

Glad you like it! Cheers ✌🏼

[@simantaparida2815]

You are a life saver!!!

[@DesignXstream]

Glad you found it helpful :) Do check out our page on instagram @designxstream for design tips & tricks! 🤘🏼

[@LosAlcarrizosTvShow]

I feel 10x more confident in soft soft, thanks!

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼

[@amrouzamar]

This tutorial is realy super helpful... I'm on linux cause I'm running all my business on free & open source software... so I was looking for an After Effect alternatives to do same animation video, then your videos appears on my google seachs... I watch it... and I was like: 😍🤩😍. Thank yo uvery much vor this, wish all the best. Thank you

[@DesignXstream]

Hey Amar, that's awesome! I'm glad you found the video helpful! :)

[@giojoxadze3125]

Very useful bro I like it

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼

[@helloabbi8159]

This plug in is super fantastic. I tried it yesterday and I had it working in no time. Super intuitive and easy to use! If I may have only one question, how do I get the exported GIF to loop forever? I see in the video that no special setting is needed, but when I add it to my prototype, the animation plays once and then stops. I'll keep looking around, I'm probably missing something really obvious.

[@DesignXstream]

When you go for Export GIF a window opens up with export options just select > 'Repeat' this will loop the gif forever.

[@maumaga]

Thanks for this!

[@DesignXstream]

Cheers ✌🏼

[@ursamaiorr]

A big THANKS :)

[@DesignXstream]

Hey Nathalia, Glad you found it helpful :)

[@Jadeellise]

Thank you!

[@DesignXstream]

Cheers ✌🏼

[@sreekarpradyumna]

You helped me out so much with this one. Thank you! Shall buy you coffee soon.

[@DesignXstream]

Glad you found it helpful :) Cheers! ✌🏼 Also do checkout this video if you want to export your animations as Lottie: kzbin.info/www/bejne/iGnaaXmElsehaZo

[@corollaop]

coz you did great work on the video, thank u for your help o7

[@DesignXstream]

Cheers! ✌🏼

[@creativeuxuisolutions6811]

very helpful bro

[@DesignXstream]

Glad it helped :)

[@albelger3832]

Thanks a lot!

[@DesignXstream]

You're welcome! Cheers ✌🏼

[@kylebrownbridge]

Mate, i was watching this video embedded somewhere. I couldnt like the video there, so I took out the time to navigate to youtube to like and drop a comment. Well done bro!

[@DesignXstream]

Wow! That's amazing. Thanks for taking the effort and commenting... I love reading such comments! 😀

[@krutivora7098]

Great work

[@DesignXstream]

Cheers! Glad you liked it ✌🏼 :)

[@forOffice-vt7by]

thanku bro you solve my problem🥰🥰🥰

[@DesignXstream]

Cheers ✌🏼

[@VanezArt]

Thanks man.

[@DesignXstream]

Glad you liked it! :)

[@vinaypaul8251]

thank you,, thanks a. lot

[@DesignXstream]

Hey Vinay, Glad that you found it helpful :) Stay tuned for more videos!

[@Widencounters]

super useful

[@DesignXstream]

Glad it was helpful! :)

[@musaesin5163]

RESPECT

[@priyalshah953]

Haha..love how you keep saying 'toh'. :p Thanks for this, makes life much simpler.

[@DesignXstream]

Frankly I never noticed that toh 😅 Anyways glad that you found it helpful! Cheers ✌🏼

[@j0hannes5]

Since you've tried a lot of plugins that work via animating multiple frames in a row: Was there one that utilizes smart animate to transition between frames? That would be just what I need for some animations. btw: this video made me watch a few others on your channel. great work! :)

[@DesignXstream]

Hey, thanks for the comments! Yah, I believe I tried all of the ones related to GIF creations 😅 However, there is none that uses smart animate. Even 'Figmotion' has the similar concept of their own timeline. If you need to do it with smart animate then the only way is to record it as a video and then convert it into a GIF.

[@slyj8611]

Hi Hurty, did you find a solution for this? (simple animate transition between frames)? I'm trying to fix that exact problem now. Any advice much appreciated!

[@j0hannes5]

@@slyj8611 it's not perfect, but you can make a screen recording while you play the animation in presentation/prototype mode.

[@reetureetu1437]

I tried to export it but I didn't find the object option and when I tried by file option different layers were exported

[@flacovsn6876]

tNice tutorialngs

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼

[@byShameless]

what plugin are you using for the orange measurements for spaces between objects and edges. @ 1:37

[@DesignXstream]

It is a default feature in Figma! Just press Alt (or) Option it will show the measurements.

[@Locostelasudan]

I'm a newbie soft soft (20.9) user, and I'm on Mac 10.14. Would you please help about how to select

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼

[@syedazhar8554]

helped me a lot!! could you please tell me if there is any way to convert these gif into JSON?

[@DesignXstream]

Hey Syed, Glad you found it helpful. And you can try Figmotion plugin which is same as this plugin to convert your animation to JSON. This JSON is just a raw data of the animation and other properties.

[@vanshitasingh7949]

Hey! How to get that sort of plane icon , slightly rounded one ?

[@DesignXstream]

You can take an svg icon and customize the path. I've taken a normal plane svg icon then I edited the path and made the body slightly curved!

[@innabalaba1813]

Hello! Thanks for a tutorial) Is it possible to export gif with transparent background?

[@DesignXstream]

Hey Inna, there is no way to export with transparency on the plugin. However, you could use free online tools like ezgif to remove the background. More details here: ezgif.com/help/gif-transparency

[@MartijnHoppenbrouwer]

My Sprite exports seem to have gaps (like halve of the PNG frames doesn't get exported right.

[@DesignXstream]

Oh! Let me try that option and see how it behaves! Also there is plugin called Figmotion which does similar things!

[@Kashyap__]

Hey bro. This was very useful. Need quick help. How to I keep the quality high def of a app ui screen gif? Please help urgent. 🙏

[@DesignXstream]

While exporting if you set the quality to high that is the max possible. If you need more then you need to go with other tools like Photoshop or After Effects!

[@vtshreeram]

this video looks very cool, can we export to Video? please advice

[@DesignXstream]

Hey Shreeram, This plugin doesn't export video. But you can use 'Figmotion' plugin it works exactly the same as this plugin but also has export to video.

[@maze.p]

Thanks

[@DesignXstream]

Cheers ✌🏼

[@badamsurentsendsuren270]

thanks for the video. My file not exported by .gif file. It was exported .file type. Can u pls help me?

[@DesignXstream]

Never seen this issue. Maybe you can try figMotion plugin it works in the same manner.

[@kelvinni8294]

anyway I can export as transparent GIf?

[@DesignXstream]

They have included transparent GIF in their latest update. You can now make the frame background color at 0% opacity and you can export transparent GIF!

[@gregoredsamsa]

is there a way to save our gif with motion keyframes for editing back later? i m not sure how i can use "save a local copy" as .json file.

[@DesignXstream]

.json save is just a preference file for developers. However, once you create an animation on a file the keyframes stay saved in it. You can open the file anytime later and continue where you left it.

[@gregoredsamsa]

@@DesignXstream thanks for the response. my animations not saving unfortunately.

[@funwalkingclub9746]

Maybe too much to ask at this point, but can we do any sort of Morph animations within this??

[@DesignXstream]

There is no way to Morph. But there is properties to add keyframe for vector paths. It would be tedious job but you can use that to make shapes morph.

[@Malte_exe]

it's also a little inefficient in a way if you want to just draw a 4 on the softoor kick soft and theres all those empty sequencers on the

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼

[@pooja-vc7fh]

After the animation we designed in motion and exported in figma for the main frame design right then I need to export the main design for my case study how you do that ? Is still exported with that animation right or only the animation we can see in the prototype ?😮😮

[@DesignXstream]

It gets exports as a GIF but it remains in the file. If want to get it out of Figma you need to use another plugin called GIF Export.. using this you can download the GIFs on your file into your local device.

[@pooja-vc7fh]

@@DesignXstream okay lets try

[@user-ie8xf1hy7o]

Please, how can i use this plugin with text animation?

[@DesignXstream]

Yes you can.. but now there is a free limit on this plugin so you might want to consider that.

[@danielsanchez1837]

Thank you! but I don't know why when I export the gift it cames with a balck background. I there any solution here?

[@DesignXstream]

Hey Daniel, I suppose you are trying to export with transparent background which is not yet supported in the plugin so make sure you have a fill for the frame. You can use free online tools like ezgif in case you want the gif without background.

[@danisanchez1576]

@@DesignXstream Thak you again! I finnaly fixed it :)

[@DesignXstream]

Awesome! 🤘🏼

[@aneelaasghar989]

I didn't find the option Object in the menu. Can you kindly help me regarding this?

[@DesignXstream]

This was on an older version of the plugin no you can directly export it.

[@status4u633]

bro can uhh please provide us the link of anchor point's video link?

[@DesignXstream]

I've explained setting anchor point in this video itself. What are you referring to exactly?

[@status4u633]

@@DesignXstream Bro i did it thank you very much thats really helpful

[@synthiakhan816]

I tried exporting it comes with black bg. Tried to remove the background with ezgif but it exceeds their 45 frames as mine one has 120 frames. Is there any way I can manually delete bg from the layers and export it from motion? Can you pls help on how to fix it?

[@DesignXstream]

Hey Synthia. Did you try unscreen.com > this site also allows you to remove background. If that still doesn't work then you can reach out on instagram @designxstream can provide you some other workarounds.

[@synthiakhan816]

I did that too, unfortunately it didn't work

[@rayquick6513]

This is nice animation but my google chrome browser does not work...install motion plugins too...but in windows, OS support or not ...not to export.. when am I doing export the message displays as..."Oops you have nothing to export" so what can I do? .......

[@DesignXstream]

I do not have a windows to try it. But I highly doubt it has something to do with the OS as it completely runs on Chrome using WebGL! Were you able to play the animation in the plugin and see? Also while exporting did you select the frame which has the animations?

[@purrfect_kitty_hub]

Hi @designXstream... nice content. i was hoping for a plugin that can help with animating multiple frames in a row. i created an animated splash logo and need to to make it a gif for the dev. HELP please

[@DesignXstream]

For this I would suggest you go for lottie. Please check my recent video on lottie. You can create the animation in figma and use that plugin to export as lottie and share the json with dev.

[@purrfect_kitty_hub]

@@DesignXstream thank you

[@vaishalisamanta629]

hey. so after I add a gif to my frames, i wanted to put these up on behance... how do I export the frames with the gif? GIF export plug in keeps crashing.

[@DesignXstream]

This plugin never crashed for me. But you can try FigMotion plugin which is very similar to this. If you are able to animate the gif then it should export smoothly.

[@vaishalisamanta629]

@@DesignXstream yes I was my fault. My gif was too heavy. Once I reduced its size gif export worked perfectly. Thank you 😁

[@tort1n]

Nice im starting to make so simple soft soft how about you?

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼

[@navrotska.a]

Hi! Tell me please, how to export the gif with transparent background? Please, help ASAP!

[@DesignXstream]

Hey Анна, This plugin doesn't support export with transparency. A workaround is to create a gif with a solid color in the background and then upload that to ezgif.com/effects there you have option to replace color with transparency. Try this!

[@navrotska.a]

@@DesignXstream Thanks so much!

[@jelouche]

how does this plugin compares to giffycanvas

[@DesignXstream]

giffycanvas is different. I suppose you need to feed it frame by frame in order to create an animation. Whereas this plugin uses keyframes!

[@pelao13]

How to export with transparent background? I set the frame BG as 0% and it gets exported with black BG

[@DesignXstream]

Hey Fran, I suppose there is no way to export with transparency yet on the plugin. However, you could use free online tools like ezgif to remove the background. More details here: ezgif.com/help/gif-transparency

[@MartijnHoppenbrouwer]

@@DesignXstream Thanks for this initial tip. I would really like a native transparant GIF exporter, or even better a PNG sequenze. Do you know anything about this?

[@MartijnHoppenbrouwer]

Oh! I never saw Motion before - it does export a image sequence! Awesome!

[@DesignXstream]

@@MartijnHoppenbrouwer Yes! There is an option to Export it as Frames! 👍🏼

[@fcallophoto]

Is there a way (or a plugin) to export it as a JSON?

[@DesignXstream]

Hey Fernando, There is JSON export in a simple plugin but if you are expecting it to work in lottie then it will not. JSON export is just some data that will help it import back into this plugin or maybe for developers to get the timing and other properties!

[@fcallophoto]

@@DesignXstream Thank you so much for the he answer

[@letsgetto1millwithoutvids]

They need to add support for transparency layers

[@DesignXstream]

Yeah! That is a much awaited feature from them!

[@davidfitcher2953]

can I export it as lottie?

[@DesignXstream]

No this plugin doesn't support lottie. There are 2 plugins which do... check these videos: kzbin.info/www/bejne/b4bFf6uBi95mm6c kzbin.info/www/bejne/iGnaaXmElsehaZo

[@forgotten403]

Türkçe altyazıyı koyan kişinin eline sağlık ö-ö-ö-ö-ö-ö-ö-ö-öptüm bayy, gö-gö-gö-gö-gö-gö-gö-gö-gömmdüm say

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼

[@XiaodanGuo]

Can we easy in - easy out In Motion ?

[@DesignXstream]

Yes, just double click on any keyframe and you set the easing type of your choice!

[@jemishgopani1424]

too ahah but i watched it like 5 tis so i understand it now

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼

[@Its_me_AXE]

Can we do it as transparent???

[@DesignXstream]

Yes, it has an option to export with Transparency!

[@tekiero]

can you that gif transparent?

[@DesignXstream]

When I tried this plugin it was not possible. Not sure if they added this feature. However, you can use free online tools like ezgif & unscreen to remove background of GIFs.

[@zaidurrehman9902]

how to export without background. i want transparent background GIF

[@DesignXstream]

In the updated plugin there is an option to export with transparent background.

[@ushadesai6306]

How to make a GIF out of interactive prototype in Figma?

[@DesignXstream]

You can use chrome extensions for it. Open the prototype in a chrome tab then install any gif capture plugin. Try this: chrome.google.com/webstore/detail/capture-to-a-gif/eapecadlmfblmnfnojebefkbginhggeh/related?hl=en Then you can capture any area on the tab and start recording a GIF out of it.

[@cookandconnect7170]

How to drop Gifs in Figma Presentation slide?

[@DesignXstream]

GIF's can be directly placed on frame and in the presentation mode it will auto play in loop.

[@jonnystudio]

how you export the video post?.. thanks

[@DesignXstream]

You have the option to export it in different file format.

[@jonnystudio]

@@DesignXstream i see only png/jpg/pdf/svg, no video (: i need some plugin?

[@DesignXstream]

What is your requirement? Can you elaborate?

[@jonnystudio]

@@DesignXstream i make a mockup with video background, and i cant export it out as mp4 or video, u know how?

[@DesignXstream]

If the tool doesn't support then you can go for screen recorder.

[@tanishasharma5621]

if i want a gif for writing email for login,then how do i do it?

[@DesignXstream]

Sorry, I din't get you. Are you asking how to animate a email typing on login page?

[@tanishasharma5621]

@@DesignXstream yup how to I show the email being automatically typed,I'm stuck there new to all this stuff

[@DesignXstream]

@@tanishasharma5621 This video would be helpful: kzbin.info/www/bejne/eXeyeneGgKpkmNk You can ping me @DesignXstream on Instagram if you still have queries!

[@tanishasharma5621]

@@DesignXstream okayy,tysm!

[@JediMik]

спасибо, очень круто. буду пользоваться. жаль, что мой видео-редактор воспринимает gif, как одно изображение, а не анимацию.

[@DesignXstream]

Yeah Gif is just a sequence of images!

[@yaelibarkai]

everything worked well till the export! it didn't export the gif and I honestly don't know what I'm doing wrong

[@DesignXstream]

Make sure you select the Frame when you click on Export. If you still face an issue reach out to us on Instagram @designxstream

[@aliftaufik6894]

why I fail when trying to export to a gif?

[@DesignXstream]

Hope you selected the frame when you exported.

[@allisondiebolt2619]

when i export it as a gif it won't play

[@DesignXstream]

Did you select the main frame and export it?

[@ludmila3586]

is the plugin for free?

[@DesignXstream]

Yes it is free to use!

[@amritasingh2574]

not able to export

[@DesignXstream]

What's the error?

[@Eutait]

Say jif one more time I double dare you

[@DesignXstream]

JIF 😜

[@maisalateki7632]

How to get free motion animation ?🤔🤔😢😢

[@DesignXstream]

This tool is free to use.

[@shalinisingh7912]

is motion plugin paid??

[@DesignXstream]

During the creation of this video it was completely free! But now I heard that only a 1 second duration animations are free to export if you want bigger animations it is paid.

[@sunnyraw4474]

very bad for transparent gifs

[@DesignXstream]

In Export did you put quality settings at best?

[@ahsankhurshid2557]

The plugin is good and easy to use. But it is being blocked by ESET for "This web page may contain dangerous content that can provide remote access to an infected device, leak sensitive data from the device or harm the targeted device."

[@DesignXstream]

Oh that's strange. However, a very good alternative I can suggest is Aninix check this video: kzbin.info/www/bejne/iGnaaXmElsehaZo

[@matheusalcantara9035]

Hahaha Adriana it's not that difficult depending on what you want to do. I can help you if you wish I'm a producer and use soft soft for 10

[@DesignXstream]

Yes it is simple!

[@fahmidahmedchowdhury3604]

it's free for only 2 s

[@DesignXstream]

yess unfortunately, now they have added the limit. Previously it was full free!

[@hamimahamed7567]

Haha it's not that difficult! I can help if you wish ! Let know!

[@DesignXstream]

check out the review of a new plugin on our latest video.. it is more easy to use and exports in Lottie as well! 👍🏼