Animate Icons in Figma in 1 Click! + Export As Json | Design Weekly

In today's video, we are creating some amazing animated icons inside Figma. This method is super easy to do and you can animate any icon you like.
Icons used: www.figma.com/community/file/...
Video chapters
0:00 Introduction
0:33 Setting up project
1:18 First method
3:41 Second method
Get the equipment I use:
1. Mic: amzn.to/3b2OQa5
2. Camera: amzn.to/3rJzPj6
3. Macbook Pro: amzn.to/3aYeD30
4. Asus Gaming Laptop: amzn.to/2Mj4cN7
5. Pop filter: amzn.to/3aYfReC
For Sponsorship: [e-mail]
Follow Me on Twitter:
/ punitweb
Follow me on Medium:
/ punitweb
My Behance Profile:
www.behance.net/punitweb
#figma #uidesign #icons

[@katherinegaspare1569]

Loved it 😍 even in free version is amazing, thank you for sharing this!

[@PunitChawla]

🤘

[@BusinessManKev]

Pretty cool. Good video for sure.

[@NandaYKSalunkhe]

Its Awesome... Thank you so much 💞

[@capturedclips153]

Congratulations on a 100k

[@baadshah2100]

Amazing video… really liked as it can be used in real apps and not for presentation only 👍🏻👌

[@PunitChawla]

Oh yes! Lottie animations/json is the way to go

[@afrinachowdhury9159]

Really helpful. Thanks a lot!

[@PunitChawla]

Glad you liked it!

[@artikhalatkar233]

Awesome..... cool

[@onetuffmmedia2168]

Nice 👍 man

[@allannyholmnielsen5559]

What a nice video. Thank you for sharing.

[@PunitChawla]

Glad you liked it Allan!

[@maumauprocura]

Amazin !!!

[@kunjikagogna2387]

Hi, I see the icons in animation in the plugin window but not in Figma - how can I have an animated icon in Figma frame?

[@vishalpanchal9802]

Loved It ❤️

[@PunitChawla]

Thanks Vishal! Happy you did

[@ridwanhoquesrihan8862]

Congratulations on 100k Punit

[@PunitChawla]

Thank you Ridwan, will take pic with the play button soon!

[@cristrings]

Does it also work to animate prototypes?, meaning, not just icons but like transitions from one frame to another and so on

[@czg4070]

Hello the svg motion pluggin doesn't work for me, i did flatten an line icon and there is no frame :( , nothing move

[@rekhabaghel5843]

Thanks, can you please provide the link of Motion. regards

[@zahrasaeedi7527]

what a good plugin! Thanks
But whats that music in background 🤯🥲

[@Ungalukku_oru_vishayam_sollata]

Thank you so much 🥰

[@PunitChawla]

Welcome! Glad you liked it :)

[@Official.Uncle.cpp0]

Hi bro how do you actually code the UI design to function properly well a mobile app

[@aritra3004]

Bro congo on 100K!!

[@PunitChawla]

Thank you Aritra! Still waiting for the play button to officially announce :)

[@aritra3004]

@@PunitChawla 💫

[@nandanverma6116]

1st comment ❤ congratulations 🎉

[@PunitChawla]

Thank you Nandan!

[@rabarhusen9170]

Cool

[@vsvnrajashekar4336]

Sir can u pls tell me how to design an icon for example 24*24 😔🙏🏼🙏🏼

[@divyande5388]

Bro ur explanations are really awesome. There is still a huge gap in understanding when to use components, auto layout and how to use them for animation and mainly complex animation are still being night dream for many beginners. So I request u to put a video on complex animation from other designers and components, auto layout tutorial, Is it possible.

[@mrti6782]

Hi bro. i'm using motion ui make ani, then i try export to json for project code. But my file json show failed. How to fix? Thanks bro

[@omardanial7351]

can we export animations as JSON which are made in Figma not lottie files

[@Rao_Nishant]

Sometimes you forget to add videos related to figma in figma playlist.

[@PunitChawla]

Ah yes, will sit over the weekend and improve the playlists. Thanks for the reminder!

[@maimnatbatool7620]

Hi! I had a question - so when I export the icons (using the first method) as animated svg - it doesn't play as an animation in the figma file? Is that meant to happen? Do the developers work their magic on this?
Please let me know!
Thanks for the tutorial!

[@tomashruska2171]

same issue :(

[@dxne]

If I'm not wrong, Figma only plays GIF (in prototype mode)

[@EminYusifov]

great lesson! but your pronunciation is awesome )))

[@PunitChawla]

Well thank you!

[@gametechvlog]

can we include that animated SVG icons in prototypes?

[@PunitChawla]

Since Figma supports mainly gif for now, it’s best you just export it as gif for Figma

[@gametechvlog]

@@PunitChawla You are right. Thanks for the amizing video...

[@khalidali1972]

Is there s something similar for XD. ???

[@PunitChawla]

Yes! I did a video on that a while back - m.ruclips.net/video/b4rb6zGoxv4/видео.html

[@thatasianguy4935]

I find the video a bit misleading as the plugin you suggested and process you showed output a very sissy animation while the ones you showed, in the beginning, are more custom made

[@sagarbaishya4u]

You are using jugad plugins instead of AE. It is much better and gives better creative control.

[@NO_russia]

don't work 🤔

[@PunitChawla]

Try the figma file.

[@mkmagnificenttuber4262]

This is not diffcult you find it diffcult when you navigate to next pages when you have created this components

[@glawk-eth]

CLIIIIIIIIIIIIIIICK BAIT

[@debabratajena2517]

Hello the svg motion pluggin doesn't work for me, i did flatten an line icon and there is no frame :( , nothing move