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. 😊
Пікірлер: 230
If you found this interesting make sure you check the Lazy Loading Animation in Figma using GIFs: kzread.info/dash/bejne/kYaJj82Yetq7h5c.html Also, do comment if you like me to make any specific tutorials on Figma, XD or Sketch! 🤘🏼
The explanation looks clear and straight to the point. Loved it!
@DesignXstream
2 жыл бұрын
Cheers man! ✌🏼 Glad you liked it!
This was really easy and straightforward. Thank you!
@DesignXstream
3 жыл бұрын
Hey Gina, Glad you found it useful :)
wow, that method of changing the anchor is so brilliant !
@DesignXstream
2 жыл бұрын
Yay! I'm glad you lied it! ✌🏼😄
The extra rectangle for adjusting the angle of the plane is super helpful!!! Thanks for the hack!🙏🏾🥳
@DesignXstream
Жыл бұрын
Glad you liked the hack! Cheers ✌🏼😁
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! 😄
Duude, thank you so much, your video is better that 2-3 hours courses:)
@DesignXstream
2 жыл бұрын
Awesome! Great to hear that! ✌🏼 :)
You're a lifesaver. I really appreciate thatttttt
@DesignXstream
3 жыл бұрын
Glad to hear that! :) Pls do follow our instagram page for cool design tips: instagram.com/designxstream/
Thank you!
@DesignXstream
5 ай бұрын
Cheers ✌🏼
Thank you . You are the savior of the gif problem 😁😁
@DesignXstream
2 жыл бұрын
Happy to help :)
Thanks a lot!
@DesignXstream
Жыл бұрын
You're welcome! Cheers ✌🏼
Cheers man!
@DesignXstream
Жыл бұрын
Glad you like it! ✌🏼
Okay this video is a gem. thank you
@DesignXstream
3 жыл бұрын
Hey Sherya, Glad you liked it :) Pls do check our instagram (@DesignXstream) for some cool design bites & tips!
Thanks!
@DesignXstream
18 күн бұрын
Cheers ✌️
You are a life saver!!!
@DesignXstream
3 жыл бұрын
Glad you found it helpful :) Do check out our page on instagram @designxstream for design tips & tricks! 🤘🏼
Great video! You helped so much! Thank you!
@DesignXstream
2 жыл бұрын
I'm glad you found it helpful! Cheers! ✌🏼
Excellent video. Thank you
@DesignXstream
3 жыл бұрын
Hey Sierra, Glad you liked it 😊
Wow, superb!
@DesignXstream
3 жыл бұрын
Glad you like it! :)
you have explained in a very easiest way. Thanks
@DesignXstream
2 жыл бұрын
Glad you liked it! :)
Super helpful!! Thank you so much for sharing!
@DesignXstream
3 жыл бұрын
Glad it was helpful! You have amazing content on your channel as well.. just became your 500th subscriber 😄 Keep sharing more awesome content 🤘🏼
much better than other options for making an icon animation
@DesignXstream
3 жыл бұрын
Yesss easy to use within Figma!
Nice! Thanks! Good lifehacks!
@DesignXstream
7 ай бұрын
Glad you like it! Cheers ✌🏼
A big THANKS :)
@DesignXstream
3 жыл бұрын
Hey Nathalia, Glad you found it helpful :)
this so helpful! Thanks a lot!
@DesignXstream
2 жыл бұрын
Glad it was helpful! :)
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! 👍🏼
Thanks for this!
@DesignXstream
10 ай бұрын
Cheers ✌🏼
very helpful bro
@DesignXstream
Жыл бұрын
Glad it helped :)
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! 👍🏼
Great work
@DesignXstream
2 жыл бұрын
Cheers! Glad you liked it ✌🏼 :)
Thanks man.
@DesignXstream
2 жыл бұрын
Glad you liked it! :)
Very cool and easy to follow thank you, Liked & Subscribed.
@DesignXstream
7 ай бұрын
Cheers! ✌🏼
Thank You Very Much Dude, this help me to make a presentation 🔥
@DesignXstream
2 жыл бұрын
Glad to hear that! :)
thanku bro you solve my problem🥰🥰🥰
@DesignXstream
4 ай бұрын
Cheers ✌🏼
coz you did great work on the video, thank u for your help o7
@DesignXstream
Жыл бұрын
Cheers! ✌🏼
super useful
@DesignXstream
2 жыл бұрын
Glad it was helpful! :)
Great video! Thank you for sorting through all of the different animation plugins for us :)
@DesignXstream
3 жыл бұрын
You're very welcome! Glad you found it helpful :)
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
2 жыл бұрын
Wow! That's amazing. Thanks for taking the effort and commenting... I love reading such comments! 😀
thank you,, thanks a. lot
@DesignXstream
3 жыл бұрын
Hey Vinay, Glad that you found it helpful :) Stay tuned for more videos!
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
2 жыл бұрын
Hey Amar, that's awesome! I'm glad you found the video helpful! :)
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! 👍🏼
Haha..love how you keep saying 'toh'. :p Thanks for this, makes life much simpler.
@DesignXstream
2 жыл бұрын
Frankly I never noticed that toh 😅 Anyways glad that you found it helpful! Cheers ✌🏼
RESPECT
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: kzread.info/dash/bejne/hGyrmqiHkcXUY5s.html
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
2 жыл бұрын
When you go for Export GIF a window opens up with export options just select > 'Repeat' this will loop the gif forever.
Thanks
@DesignXstream
Жыл бұрын
Cheers ✌🏼
I tried to export it but I didn't find the object option and when I tried by file option different layers were exported
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
3 жыл бұрын
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
2 жыл бұрын
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
2 жыл бұрын
@@slyj8611 it's not perfect, but you can make a screen recording while you play the animation in presentation/prototype mode.
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! 👍🏼
anyway I can export as transparent GIf?
@DesignXstream
2 жыл бұрын
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!
what plugin are you using for the orange measurements for spaces between objects and edges. @ 1:37
@DesignXstream
3 жыл бұрын
It is a default feature in Figma! Just press Alt (or) Option it will show the measurements.
Hey! How to get that sort of plane icon , slightly rounded one ?
@DesignXstream
2 жыл бұрын
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!
helped me a lot!! could you please tell me if there is any way to convert these gif into JSON?
@DesignXstream
3 жыл бұрын
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.
Hello! Thanks for a tutorial) Is it possible to export gif with transparent background?
@DesignXstream
3 жыл бұрын
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
My Sprite exports seem to have gaps (like halve of the PNG frames doesn't get exported right.
@DesignXstream
3 жыл бұрын
Oh! Let me try that option and see how it behaves! Also there is plugin called Figmotion which does similar things!
this video looks very cool, can we export to Video? please advice
@DesignXstream
3 жыл бұрын
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.
Please, how can i use this plugin with text animation?
@DesignXstream
7 ай бұрын
Yes you can.. but now there is a free limit on this plugin so you might want to consider that.
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
2 жыл бұрын
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!
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!
Maybe too much to ask at this point, but can we do any sort of Morph animations within this??
@DesignXstream
2 жыл бұрын
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.
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! 👍🏼
They need to add support for transparency layers
@DesignXstream
3 жыл бұрын
Yeah! That is a much awaited feature from them!
I didn't find the option Object in the menu. Can you kindly help me regarding this?
@DesignXstream
2 жыл бұрын
This was on an older version of the plugin no you can directly export it.
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
11 ай бұрын
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
11 ай бұрын
@@DesignXstream okay lets try
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! 👍🏼
thanks for the video. My file not exported by .gif file. It was exported .file type. Can u pls help me?
@DesignXstream
2 жыл бұрын
Never seen this issue. Maybe you can try figMotion plugin it works in the same manner.
Can we do it as transparent???
@DesignXstream
Жыл бұрын
Yes, it has an option to export with Transparency!
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! 👍🏼
can I export it as lottie?
@DesignXstream
11 ай бұрын
No this plugin doesn't support lottie. There are 2 plugins which do... check these videos: kzread.info/dash/bejne/a4mWsNqEhtyZlag.html kzread.info/dash/bejne/hGyrmqiHkcXUY5s.html
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
2 жыл бұрын
.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
2 жыл бұрын
@@DesignXstream thanks for the response. my animations not saving unfortunately.
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
3 жыл бұрын
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
3 жыл бұрын
@@DesignXstream Thak you again! I finnaly fixed it :)
@DesignXstream
3 жыл бұрын
Awesome! 🤘🏼
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
2 жыл бұрын
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?
bro can uhh please provide us the link of anchor point's video link?
@DesignXstream
7 ай бұрын
I've explained setting anchor point in this video itself. What are you referring to exactly?
@status4u633
7 ай бұрын
@@DesignXstream Bro i did it thank you very much thats really helpful
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
Can we easy in - easy out In Motion ?
@DesignXstream
3 жыл бұрын
Yes, just double click on any keyframe and you set the easing type of your choice!
can you that gif transparent?
@DesignXstream
3 жыл бұрын
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.
how to export without background. i want transparent background GIF
@DesignXstream
2 жыл бұрын
In the updated plugin there is an option to export with transparent background.
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.
How to drop Gifs in Figma Presentation slide?
@DesignXstream
2 жыл бұрын
GIF's can be directly placed on frame and in the presentation mode it will auto play in loop.
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! 👍🏼
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
2 жыл бұрын
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
2 жыл бұрын
@@DesignXstream yes I was my fault. My gif was too heavy. Once I reduced its size gif export worked perfectly. Thank you 😁
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
3 жыл бұрын
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
3 жыл бұрын
I did that too, unfortunately it didn't work
Hi! Tell me please, how to export the gif with transparent background? Please, help ASAP!
@DesignXstream
3 жыл бұрын
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
3 жыл бұрын
@@DesignXstream Thanks so much!
when i export it as a gif it won't play
@DesignXstream
2 жыл бұрын
Did you select the main frame and export it?
why I fail when trying to export to a gif?
@DesignXstream
2 жыл бұрын
Hope you selected the frame when you exported.
Is there a way (or a plugin) to export it as a JSON?
@DesignXstream
3 жыл бұрын
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
3 жыл бұрын
@@DesignXstream Thank you so much for the he answer
How to export with transparent background? I set the frame BG as 0% and it gets exported with black BG
@DesignXstream
3 жыл бұрын
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
3 жыл бұрын
@@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
3 жыл бұрын
Oh! I never saw Motion before - it does export a image sequence! Awesome!
@DesignXstream
3 жыл бұрын
@@MartijnHoppenbrouwer Yes! There is an option to Export it as Frames! 👍🏼
спасибо, очень круто. буду пользоваться. жаль, что мой видео-редактор воспринимает gif, как одно изображение, а не анимацию.
@DesignXstream
10 ай бұрын
Yeah Gif is just a sequence of images!
everything worked well till the export! it didn't export the gif and I honestly don't know what I'm doing wrong
@DesignXstream
3 жыл бұрын
Make sure you select the Frame when you click on Export. If you still face an issue reach out to us on Instagram @designxstream
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.
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: kzread.info/dash/bejne/dXqDq6aJe6iXkto.html You can ping me @DesignXstream on Instagram if you still have queries!
@tanishasharma5621
Жыл бұрын
@@DesignXstream okayy,tysm!
not able to export
@DesignXstream
2 жыл бұрын
What's the error?
is the plugin for free?
@DesignXstream
Жыл бұрын
Yes it is free to use!
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
11 ай бұрын
Oh that's strange. However, a very good alternative I can suggest is Aninix check this video: kzread.info/dash/bejne/hGyrmqiHkcXUY5s.html
it's free for only 2 s
@DesignXstream
9 ай бұрын
yess unfortunately, now they have added the limit. Previously it was full free!
How to get free motion animation ?🤔🤔😢😢
@DesignXstream
Жыл бұрын
This tool is free to use.
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! 👍🏼
Say jif one more time I double dare you
@DesignXstream
3 жыл бұрын
JIF 😜
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!
very bad for transparent gifs
@DesignXstream
2 жыл бұрын
In Export did you put quality settings at best?
When do you ever not want a GIF to loop?
@DesignXstream
2 ай бұрын
Haha! I agree... But yah there are situations when you want to place a transparent GIF on a website and want to play it only once.
@AdeptusIncompetus
2 ай бұрын
@@DesignXstream Ah okay, gotcha. Thanks for the reply 😁