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

Рет қаралды 80,222

Күн бұрын

My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/t...
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/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko

Пікірлер: 160

@Mizko 3 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

@Allen Ray instablaster =)

@allenray9526 2 жыл бұрын

@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 2 жыл бұрын

@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 2 жыл бұрын

@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 :)

@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!

@yihsuanlin8391 Жыл бұрын

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

@vahidmoradi9696 2 жыл бұрын

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

@wisdomezeogu6650 Жыл бұрын

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

@orishinaogunro 2 жыл бұрын

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

@cnt2495 2 жыл бұрын

Step by step, this was really awesome!

@thebluriam 10 ай бұрын

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

@deliabrai720 3 жыл бұрын

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

@rhettbennick8636 Жыл бұрын

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

@princepatrickc4611 3 жыл бұрын

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 3 жыл бұрын

Glad you found value in this Patrick!

@ace_miracle1695 3 жыл бұрын

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

@Mizko 3 жыл бұрын

Thank you!!

@Sparrowofweb3 Жыл бұрын

Your videos are life savers, I learnt a lot

@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

@user-yz4iy4kc6p 3 жыл бұрын

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

@Mizko 3 жыл бұрын

Glad to hear!

@jasnoorsaini5336 3 жыл бұрын

Dymnn amazing ! I completely love it

@CreativeArtistz727 Жыл бұрын

LOVED IT ..

@Prasad10101010 3 жыл бұрын

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

@Mizko 3 жыл бұрын

Thank you Prasad!

@eshatarafdar4323 Жыл бұрын

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

@Ioannnify 3 жыл бұрын

Love your tutorials, I'm a fan!

@Mizko 3 жыл бұрын

Thank you! Really appreciate the support :)

@marinastreletska8441 3 жыл бұрын

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

@Mizko 3 жыл бұрын

Woo! Glad to hear Mary!

@prakashanuvadia8870 2 жыл бұрын

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

@begumagun 4 ай бұрын

Wonderful video! Thank you!

@AkashUpdate 3 жыл бұрын

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'

@UPerfil1 2 жыл бұрын

Good job man. Thank you.

@LemonDust13 3 жыл бұрын

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

@Mizko 3 жыл бұрын

Thank you!

@mohammadmahbuburrahman8953 2 жыл бұрын

You are awesome. I really enjoy your class

@creativeembargo 2 жыл бұрын

Thanks Mizko for helping me out 👻

@gabemarchant 3 жыл бұрын

This was brilliant thank you for making this video!

@Mizko 3 жыл бұрын

Thanks Gabe! Appreciate the support.

@teamilk4400 2 жыл бұрын

very clear explanation

@Orion3000k 3 жыл бұрын

Thank you tons for your insight! Helps many.

@Mizko 3 жыл бұрын

Thank you :)

@AlexandreGuillo Жыл бұрын

Thx a lot it was really interesting :)

@rajsingh-bg3jr 2 жыл бұрын

SO NICE

@larsandrews340 3 жыл бұрын

Excellent! Just discovered you, awesome and thanks.

@Mizko 3 жыл бұрын

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

@SurajKumar-ye3sm 3 жыл бұрын

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

@Mizko 3 жыл бұрын

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

@SurajKumar-ye3sm 3 жыл бұрын

@@Mizko Why file is not open?

@instinto.viajero 2 жыл бұрын

Your are the best! Thank you

@wisdomezeogu6650 Жыл бұрын

Your outro music is also awesome.

@topemeister3000 3 жыл бұрын

Excellent tutorial, bro. Cheers

@Mizko 3 жыл бұрын

Thank you Sierra :)

@stevedowning4824 3 жыл бұрын

YES! LOVE IT!

@Mizko 3 жыл бұрын

THIS WAS FOR YOU STEVE! GLAD YOU ENJOYED IT!

@stevedowning4824 3 жыл бұрын

@@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!

@mytvwitholamide971 2 жыл бұрын

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

@steliospapadopoulos4099 3 жыл бұрын

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 3 жыл бұрын

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

@steliospapadopoulos4099 3 жыл бұрын

That's great news! Thanks 👍

@goldbitcoin 3 жыл бұрын

Awesome 👌

@Mizko 3 жыл бұрын

Glad you found this useful Azrael!

@emiliorios8799 2 жыл бұрын

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??

@parthoprothimdatta670 2 жыл бұрын

that was awesome man!

@Mizko 2 жыл бұрын

Thank you! Hope you enjoyed it

@parthoprothimdatta670 2 жыл бұрын

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

@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 3 жыл бұрын

Woohoo!

@Mizko 3 жыл бұрын

You've all been asking for this!

@elya_rose 3 жыл бұрын

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

@hossamsalem8878 3 жыл бұрын

Subscribed because you are hyper cool :)

@Mizko 3 жыл бұрын

🔥

@metaboom 3 жыл бұрын

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?

@Digital.Done.Right. 3 жыл бұрын

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!

@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!

@arwanita 2 жыл бұрын

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

@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 3 жыл бұрын

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

@Mizko 3 жыл бұрын

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

@techcine9578 2 жыл бұрын

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

@njengathegeek 2 жыл бұрын

👍👍👍

@tim_timran 3 жыл бұрын

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

@Mizko 3 жыл бұрын

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 3 жыл бұрын

@@Mizko Sure, man! Thanks again

@fathih1803 3 жыл бұрын

watashii...

@photosynthesia Жыл бұрын

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

@shiv2033 2 жыл бұрын

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

@isirangerff5720 Жыл бұрын

can you plz make a tutorial on making a full website

@hakeemwyh7499 2 жыл бұрын

SIr, can i get download link for photo??

@gvikram3093 Жыл бұрын

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

@jonthamastersmooth Жыл бұрын

can you put an animated background into a figma design?

@ihorstashchuk3283 2 жыл бұрын

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

@isaias6348 2 жыл бұрын

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

@Mizko 2 жыл бұрын

Facts!

@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

@emma.fouche 3 жыл бұрын

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

@Mizko 3 жыл бұрын

What's the ATEM mini? haha sorry.

@emma.fouche 3 жыл бұрын

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

@jordanbrueckman5820 2 жыл бұрын

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

@VISH5657 Жыл бұрын

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

@insaneartbyHRD 3 жыл бұрын

i want to learn from you

@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 KZfaq 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

@mr_architect_ Жыл бұрын

No link in the description

@shiv2033 2 жыл бұрын

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

@uicheetah 2 жыл бұрын

Just wanna become like u

@gilberttamo7812 3 жыл бұрын

bro japan for sure

@gazijakiasultana6806 3 жыл бұрын

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

@Mizko 3 жыл бұрын

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 3 жыл бұрын

@@Mizko Let me try again

@Andrea-lf3jq 2 жыл бұрын

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

@Mizko 2 жыл бұрын

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

@AhmedSK143 2 жыл бұрын

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

@heyyyy1053 Жыл бұрын

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

@mariamf7753 3 жыл бұрын

the link is expired sir plz update it

@rahulsbhatt 3 жыл бұрын

Hey, can you convert this to json?

@Mizko 3 жыл бұрын

Not right now. Maybe in the future?

@rahulsbhatt 3 жыл бұрын

@@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 👍

@AmyeeL 3 жыл бұрын

Japan!

@Mizko 3 жыл бұрын

Good choice!

@ybbgraphicdesign 2 жыл бұрын

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

@chonathew 2 жыл бұрын

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 2 жыл бұрын

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

@aaronselander5076 3 жыл бұрын

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

@Mizko 3 жыл бұрын

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

@002_priyanshugoswami5 3 жыл бұрын

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

@Milchenkaa 6 ай бұрын

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

@paulyliddell 3 жыл бұрын

demo file link has expired fyi

@Mizko 3 жыл бұрын

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

@paulyliddell 3 жыл бұрын

@@Mizko ❤️️

@ifeadedokun5757 3 жыл бұрын

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

@Mizko 3 жыл бұрын

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

@onthegocode1443 3 жыл бұрын

Thank you :D

@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*

@Tendhix 2 жыл бұрын

I'm a UI/UX designer. But I have my background in Motion Design...and honestly I'm kinda glad I do. Comes in handy very often, since many animations in Figma work pretty similar to After Effects. The only difference is, you don't actually keyframe. So when I was first trying to find out how to animate in my prototypes, it felt really natural to me. But nevertheless great tutorial!

@flynnbarbary9986 2 жыл бұрын

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.

@quiqueolvera-garcia5188 2 жыл бұрын

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

@Mizko 2 жыл бұрын

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.

@shakyaakki 2 жыл бұрын

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

@waleadeyeye3176 2 жыл бұрын

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

@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 🤣

@mytvwitholamide971 2 жыл бұрын

@Mizko

@ElectraPsycho 3 жыл бұрын

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

@Mizko 3 жыл бұрын

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

@ElectraPsycho 3 жыл бұрын

@@Mizko Thanks a lot !

@arwanita 2 жыл бұрын

@@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.