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