Figma Tutorial: Smart Animate - Create UI & Web Animations (in 17 Minutes)

[@Mizko]

Become a FIGMA EXPERT With me today! My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 thedesignership.com/courses/the-ultimate-figma-masterclass Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉 thedesignership.com/products/figma-design-system/ Outline - Figma Wireframe Kit (350+ components and variants) 👉 www.thedesignership.com/products/outline-wireframe-kit Yours truly, Mizko

[@allenray9526]

you prolly dont care at all but does anybody know a way to get back into an Instagram account? I was stupid forgot the account password. I would appreciate any tricks you can offer me!

[@maximiliansantiago7469]

@Allen Ray instablaster =)

[@allenray9526]

@Maximilian Santiago Thanks for your reply. I got to the site through google and Im trying it out now. I see it takes quite some time so I will get back to you later with my results.

[@allenray9526]

@Maximilian Santiago It worked and I now got access to my account again. I'm so happy! Thank you so much you saved my account :D

[@maximiliansantiago7469]

@Allen Ray happy to help xD

[@aft7059]

I wish you still had the downloadable Figma file so we can still follow along, even after a year of this video posting. I'm finding your tutorials incredibly helpful but as someone who is still learning it takes me twice, maybe three times as long, because I have to recreate the design file. I suppose I should take this as practice anyway lol :)

[@isaias6348]

"Figma is smart but it's also incredibly dumb" 😂

[@Mizko]

Facts!

[@arwanita]

Hello, where is the link to download the file so that I can follow along?

[@Mizko]

I have updated the download link everyone. I gotchu - bit.ly/3d81vYK

[@onthegocode1443]

Thank you :D

[@princepatrickc4611]

Good Job Man! I'm an aspiring Web Designer and using Figma, your content helping a lot in my research to gain more knowledge and able to find Ui Design jobs :)

[@Mizko]

Glad you found value in this Patrick!

[@rhettbennick8636]

Awesome classes, I wish the figma download files were still available!

[@Andrea-lf3jq]

can anybody find the figma file that he mentions in the video? the one you can use yourself to play around with this

[@Mizko]

Hey Andrea, Sorry! The file link had expired and I stopped paying for Dropbox.

[@AhmedSK143]

@@Mizko It would be greate if you could find another way to upload the file

[@quiqueolvera-garcia5188]

Hi Mizko, I have sent you emails regarding your course "The Ultimate Figma Masterclass" PLease, provide feedback to my question!

[@Mizko]

Hey Olvera, I've just searched your name in my email and can't seem to find your query. I normally respond to all questions within 24 hours. Do you mind posting it in our community for students? community.thedesignership.com - This is where I normally answer all course related questions.

[@chonathew]

You want us to let you know if your sweater is on brand or not? I don't know, do you like the sweater? It looks like a nice sweater.

[@Mizko]

HAHA! Yes it was intentional. Too bad we've migrated from red. Glad you noticed Sean!

[@ace_miracle1695]

Excellent man! Thank you for making this video. Your content helping a lot in my design.

[@Mizko]

Thank you!!

[@Milchenkaa]

Hey Young Genius, Is it possible to renew the link to the design file? 42 yo fan:)

[@shakyaakki]

Thanks, Mizko - but we learners want to listen to you more than background music, as it is distracting a lot. We want to focus on your steps. Will appreciate it if you can remove it from further videos. ~ thanks

[@jordanbrueckman5820]

I don't know if it's just me but I cannot find the link to download the figma template in your description?

[@techcine9578]

Like! WhatsApp do KZbin use to record KZbin screen???

[@Digital.Done.Right.]

I am struggling with an animation and maybe an idea for a video for you. I am designing a messaging experience where the animation should scroll upwards (slide out and up) and with smart animate I am almost there. Only there is a header and footer on the screen which should not move and must remain above the other elements. I need separate frames as I need to jump around using buttons so an endless long frame to scroll upwards is not an option. Any tips? Your tutorials are driving me crazy trying to keep up while working at the same time. Keep the energy high!

[@waleadeyeye3176]

The only reason I can't use your tutorials is because of the distracting music.

[@vahidmoradi9696]

So amazingly precise and simple, with excellent explanation. Convinced me to subscribe to your channel.

[@shiv2033]

My image is getting cut if I move it out of the Japan frame. Please help.

[@heyyyy1053]

I think this can be done through figmotion plugin, well most of it

[@VISH5657]

please share the link to download figma file so i can follow up the video

[@Prasad10101010]

Besides your videos, the method of your explaining is incredibly easy to understand..!! All the finer details are covered.

[@Mizko]

Thank you Prasad!

[@isirangerff5720]

can you plz make a tutorial on making a full website

[@hakeemwyh7499]

SIr, can i get download link for photo??

[@begumagun]

Wonderful video! Thank you!

[@jonthamastersmooth]

can you put an animated background into a figma design?

[@emma.fouche]

These are mad videos! Do you use the ATEM mini by any chance?

[@Mizko]

What's the ATEM mini? haha sorry.

[@emma.fouche]

@@Mizko it's a piece of hardware for video mixing ! I think you'd love it

[@shiv2033]

I cannot find the link of the design in the description.

[@gvikram3093]

I have created the animation how can I add it to my website

[@deliabrai720]

My new best friend... keep up this great work, it helps a lot of us 🙏

[@gazijakiasultana6806]

What a rock animation!! I love it . Micheal, your demo link is not working....

[@Mizko]

Hey Gazi! Great to see you here. Hm. It seems to be working for me. It's a wetransfer download link. What do you see?

[@gazijakiasultana6806]

@@Mizko Let me try again

[@photosynthesia]

Where is the link for this tutorial? I can't see it

[@tim_timran]

Arigato Michael, I would definitely go to Japan, haha 😅

[@Mizko]

Gozaimasuuu! Awesome!! Let me know in our Mizko-X channel if you need any help or have any questions. You've got my priority support man 🙏🏼

[@tim_timran]

@@Mizko Sure, man! Thanks again

[@fathih1803]

watashii...

[@flynnbarbary9986]

Definitely Japan. I miss the food and when I lived there for uni I'd go clubbing in Shinjuku Nichome, which has 300 LGBT+ clubs in one city block and I read somewhere that there was a nightclub where they only allowed 'ugly people'... I wanted to find it.

[@mariamf7753]

the link is expired sir plz update it

[@larsandrews340]

Excellent! Just discovered you, awesome and thanks.

[@Mizko]

Thank you Lars! Glad you found this useful. Appreciate it

[@wisdomezeogu6650]

Your outro music is also awesome.

[@uicheetah]

Just wanna become like u

[@insaneartbyHRD]

i want to learn from you

[@daryllee2560]

Can I ask a question about Figma Animation that has been questioned by my Dev Team.....Can the Figma Smart Animate that you show here in the video been coded for them - and where can I get that code in Figma for them please from the prototype. Thank and have smashed that like button to all your videos! Best: Daryl

[@ybbgraphicdesign]

Thanks for the tutorial Background music is quite loud and distracting.

[@thebluriam]

Crazy useful tutorial. I'm new to Figma, definitely watching the rest of your videos (and subscribing); fantastic presentation pacing and information detail.

[@mr_architect_]

No link in the description

[@katlegoseanmahaye3309]

Why are all your Figma download files not available? Your tutorials are soo enriching Mizko🤍, I spend weeks slouching over your videos to upscale my work. Please brother, attach your links so we can follow along. Thank you, oh and by the way, I SMASHED THE LIKE BUTTON 🤣

[@koushik5437]

Almost a year back i saw your glass morphism tutorial...ever since you just have blown my mind...gud work bro or shall i say Sensei

[@filiboniohernandez5324]

Question. would it be a big difference if you used the Hidden feature when hiding images instead of changing the opacity? I assume that using that would be faster and easier since it's a click of a button. Would like to hear your thoughts.

[@normanlangit3574]

Very inspiring is there any FB group to join in Figma, loving this!

[@Mizko]

Not sure! If you want to learn with my community you can check out thedesignership.com ✨

[@Ioannnify]

Love your tutorials, I'm a fan!

[@Mizko]

Thank you! Really appreciate the support :)

[@andrew.schaeffer4032]

Thanks for the tutorial! Any chance you have those files you mentioned in the video? Would love to follow along.

[@Mizko]

I apologize Andrew, when I first joined KZbin I didn't think much of hosting. All the files expired on WeTransfer so I had to remove them all.

[@andrew.schaeffer4032]

@@Mizko Ah gotcha. no worries

[@gabemarchant]

This was brilliant thank you for making this video!

[@Mizko]

Thanks Gabe! Appreciate the support.

[@BerinMaik]

How would you archive this when using autolayout on the design patterns that you are using here? So lets say, you apply autolayout to the sections and make them horizontally scrollable. Would this change anything in the workflow that you describe here? When the frame has autolayout applied, and frames inside of frames that also have autloayout applied, you can just simply scale and move the picture of japan and place it where ever you want. I would love to see your workflow on this kind of scenario. Best, Maik!

[@aaronselander5076]

This looked awesome, but I can't figure out how to open fig files.

[@Mizko]

You don't open them. Drag and drop them INTO Figma interface. Create a project first.

[@002_priyanshugoswami5]

drag and drop to main page where all projects are named the home screen the 1st tab

[@wisdomezeogu6650]

Mizko, I've missed your channel. Your videos are really valuable and helpful. Thanks.

[@CreativeArtistz727]

LOVED IT ..

[@rahulsbhatt]

Hey, can you convert this to json?

[@Mizko]

Not right now. Maybe in the future?

[@rahulsbhatt]

@@Mizko I meant is there a way to convert this to JSON? But I think figmotion has a way to export animation to JSON! Thank you for your video 👍

[@njengathegeek]

👍👍👍

[@mytvwitholamide971]

Great one. Please can you make a video of animations of 3 to 4 phones. Not the content in the phone now but the phones themselves

[@rajsingh-bg3jr]

SO NICE

[@ihorstashchuk3283]

So, it's all within one page. How to create transitions between frames that are in different pages though?

[@hossamsalem8878]

Subscribed because you are hyper cool :)

[@Mizko]

🔥

[@Orion3000k]

Thank you tons for your insight! Helps many.

[@Mizko]

Thank you :)

[@SurajKumar-ye3sm]

Love this animation trick. I am so excited to work on it. 😍 Thanks for this.

[@Mizko]

Thank you Suraj! Let me know if you have any questions

[@SurajKumar-ye3sm]

@@Mizko Why file is not open?

[@marinastreletska8441]

this is just what I was looking for!!! Ty for a great tutorial

[@Mizko]

Woo! Glad to hear Mary!

[@user-yz4iy4kc6p]

As usual. Thanks for the value bombs. Good to be back here!

[@Mizko]

Glad to hear!

[@steliospapadopoulos4099]

I smashed that like before I even watched the video. Great example Mizko thanks again. You can show us the vertical and horizontal scrolling behaviors or animate landing page using parallax effect

[@Mizko]

Haha! Thank you Stelios. Let me line that up for you :) Should be in the next 2-4 videos!

[@steliospapadopoulos4099]

That's great news! Thanks 👍

[@Freelancingwith_Muna]

Each time i click a n the link it doesn’t load so I can’t follow along hell me out

[@Freelancingwith_Muna]

Help*

[@Freelancingwith_Muna]

Help*

[@eshatarafdar4323]

This was pretty helpful to me!! Thanks to you!

[@AmyeeL]

Japan!

[@Mizko]

Good choice!

[@LemonDust13]

As always, brilliant 👍 thanks for the vids/tips/info

[@Mizko]

Thank you!

[@creativeembargo]

Thanks Mizko for helping me out 👻

[@metaboom]

What is the music name that you are using? And can you make a video of how you made your intro animation which we see in the earlier videos?

[@emiliorios8799]

Great video! thank you for the tutorial. QUESTION: Could I download that final animation as a .gif or somehow turn it into a Lottie file to then add it to my website? Does Figma have that capability??

[@prakashanuvadia8870]

Your tips is very useful and it's a very easy explanation Thank you

[@AkashUpdate]

It's my first time here and just loved this tutorial soo much. can you please make a video on "How we should properly name the files in a real ui design project'

[@orishinaogunro]

thanks for this video. tried creating everything from scratch, and it was wonderful. I am new in designing(aspiring product manager).

[@kennedymcnoble7237]

Are we supposed to do the same prototyping for New Zealand and United States tabs as well? Or is there an easier way to apply this animation setup for the other tabs?

[@GraveRave]

Woohoo!

[@Mizko]

You've all been asking for this!

[@stevedowning4824]

YES! LOVE IT!

[@Mizko]

THIS WAS FOR YOU STEVE! GLAD YOU ENJOYED IT!

[@stevedowning4824]

@@Mizko Daaaaamnit! Can't say too much: I really like your attitude, no trash-talk, 100% on point. Glad I found your channel here on YT. Btw: you need to go to Japan, it's such a nice country!

[@topemeister3000]

Excellent tutorial, bro. Cheers

[@Mizko]

Thank you Sierra :)

[@yihsuanlin8391]

Really love all your videos! Thank you so much for making all the content! It's amazing🤩

[@AlexandreGuillo]

Thx a lot it was really interesting :)

[@elya_rose]

Hi Mizko, how do you change your cursor to a circle like the one you're using on this video ? Thank u :)

[@Sparrowofweb3]

Your videos are life savers, I learnt a lot

[@goldbitcoin]

Awesome 👌

[@Mizko]

Glad you found this useful Azrael!

[@juenn8527]

I'm not a designer at all but a developer and your videos are perfect for me. Straight to the point. Thank you so much!

[@instinto.viajero]

Your are the best! Thank you

[@mohammadmahbuburrahman8953]

You are awesome. I really enjoy your class

[@paulyliddell]

demo file link has expired fyi

[@Mizko]

Got your back man, updated link - bit.ly/3v9HGsb

[@paulyliddell]

@@Mizko ❤️️

[@ifeadedokun5757]

@@Mizko Hi Mizko, the link has expired again. Can I get an updated link?

[@bling0rb007]

Japan!

[@Mizko]

Good choice Rupu!

[@UPerfil1]

Good job man. Thank you.

[@jasnoorsaini5336]

Dymnn amazing ! I completely love it

[@teamilk4400]

very clear explanation

[@gilberttamo7812]

bro japan for sure

[@parthoprothimdatta670]

that was awesome man!

[@Mizko]

Thank you! Hope you enjoyed it

[@parthoprothimdatta670]

@@Mizko yes, and learned a lot from you!

[@cnt2495]

Step by step, this was really awesome!

[@mytvwitholamide971]

@Mizko

[@ElectraPsycho]

Hi ! Can you reactivate the wetransfer link please ? thanks a lot ! Great video

[@Mizko]

All done! Download here: drive.google.com/file/d/1AEXZiPCUUMNm9V9piCN05OUdqG4tGk2k/view?usp=sharing

[@ElectraPsycho]

@@Mizko Thanks a lot !

[@arwanita]

@@Mizko You mention this link on the video but it's not on the video description, luckily I found it on the comments. Thanks a lot. NOW I CAN FOLLOW ALONG!!! You're an amazing educator.