Figma Tutorial: Smart Animate - Create UI & Web Animations (in 17 Minutes)
HTML-код
- Опубликовано: 20 май 2024
- 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 
Хобби
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
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!
@Allen Ray instablaster =)
@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.
@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
@Allen Ray happy to help xD
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 :)
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!
Really love all your videos! Thank you so much for making all the content! It's amazing🤩
So amazingly precise and simple, with excellent explanation. Convinced me to subscribe to your channel.
Mizko, I've missed your channel. Your videos are really valuable and helpful. Thanks.
thanks for this video. tried creating everything from scratch, and it was wonderful. I am new in designing(aspiring product manager).
Step by step, this was really awesome!
Awesome classes, I wish the figma download files were still available!
My new best friend... keep up this great work, it helps a lot of us 🙏
Crazy useful tutorial. I'm new to Figma, definitely watching the rest of your videos (and subscribing); fantastic presentation pacing and information detail.
Excellent man! Thank you for making this video. Your content helping a lot in my design.
Thank you!!
Your videos are life savers, I learnt a lot
This was pretty helpful to me!! Thanks to you!
Good job man.
Thank you.
Besides your videos, the method of your explaining is incredibly easy to understand..!! All the finer details are covered.
Thank you Prasad!
Dymnn amazing ! I completely love it
Your tips is very useful and it's a very easy explanation Thank you
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
You are awesome. I really enjoy your class
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 :)
Glad you found value in this Patrick!
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'
very clear explanation
LOVED IT ..
As always, brilliant 👍 thanks for the vids/tips/info
Thank you!
Love your tutorials, I'm a fan!
Thank you! Really appreciate the support :)
Wonderful video! Thank you!
This was brilliant thank you for making this video!
Thanks Gabe! Appreciate the support.
this is just what I was looking for!!! Ty for a great tutorial
Woo! Glad to hear Mary!
Love this animation trick. I am so excited to work on it. 😍
Thanks for this.
Thank you Suraj! Let me know if you have any questions
@@Mizko Why file is not open?
As usual. Thanks for the value bombs. Good to be back here!
Glad to hear!
Your are the best! Thank you
Thank you tons for your insight! Helps many.
Thank you :)
Thanks Mizko for helping me out 👻
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??
Your outro music is also awesome.
SO NICE
Excellent!
Just discovered you, awesome and thanks.
Thank you Lars! Glad you found this useful. Appreciate it
Thx a lot it was really interesting :)
Excellent tutorial, bro. Cheers
Thank you Sierra :)
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?
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.
YES! LOVE IT!
THIS WAS FOR YOU STEVE! GLAD YOU ENJOYED IT!
@@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!
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!
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
Hi Mizko, how do you change your cursor to a circle like the one you're using on this video ? Thank u :)
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
Haha! Thank you Stelios. Let me line that up for you :) Should be in the next 2-4 videos!
That's great news! Thanks 👍
that was awesome man!
Thank you! Hope you enjoyed it
@@Mizko yes, and learned a lot from you!
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!
Hello, where is the link to download the file so that I can follow along?
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?
Awesome 👌
Glad you found this useful Azrael!
can you put an animated background into a figma design?
"Figma is smart but it's also incredibly dumb" 😂
Facts!
Like! WhatsApp do RUclips use to record RUclips screen???
Woohoo!
You've all been asking for this!
Subscribed because you are hyper cool :)
🔥
Thanks for the tutorial! Any chance you have those files you mentioned in the video? Would love to follow along.
I apologize Andrew, when I first joined RUclips I didn't think much of hosting. All the files expired on WeTransfer so I had to remove them all.
@@Mizko Ah gotcha. no worries
These are mad videos! Do you use the ATEM mini by any chance?
What's the ATEM mini? haha sorry.
@@Mizko it's a piece of hardware for video mixing ! I think you'd love it
Very inspiring is there any FB group to join in Figma, loving this!
Not sure! If you want to learn with my community you can check out thedesignership.com ✨
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
Where is the link for this tutorial? I can't see it
can you plz make a tutorial on making a full website
Arigato Michael, I would definitely go to Japan, haha 😅
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 🙏🏼
@@Mizko Sure, man! Thanks again
watashii...
SIr, can i get download link for photo??
I don't know if it's just me but I cannot find the link to download the figma template in your description?
I cannot find the link of the design in the description.
So, it's all within one page. How to create transitions between frames that are in different pages though?
I have created the animation how can I add it to my website
please share the link to download figma file so i can follow up the video
No link in the description
What a rock animation!! I love it . Micheal, your demo link is not working....
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?
@@Mizko Let me try again
My image is getting cut if I move it out of the Japan frame. Please help.
Just wanna become like u
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!
👍👍👍
bro japan for sure
I have updated the download link everyone. I gotchu - bit.ly/3d81vYK
Thank you :D
i want to learn from you
Thanks for the tutorial
Background music is quite loud and distracting.
I think this can be done through figmotion plugin, well most of it
can anybody find the figma file that he mentions in the video? the one you can use yourself to play around with this
Hey Andrea, Sorry! The file link had expired and I stopped paying for Dropbox.
@@Mizko
It would be greate if you could find another way to upload the file
the link is expired sir plz update it
Hey, can you convert this to json?
Not right now. Maybe in the future?
@@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 👍
Japan!
Good choice!
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.
HAHA! Yes it was intentional. Too bad we've migrated from red. Glad you noticed Sean!
This looked awesome, but I can't figure out how to open fig files.
You don't open them. Drag and drop them INTO Figma interface. Create a project first.
drag and drop to main page where all projects are named the home screen the 1st tab
Hey Young Genius, Is it possible to renew the link to the design file? 42 yo fan:)
demo file link has expired fyi
Got your back man, updated link - bit.ly/3v9HGsb
@@Mizko ❤️️
@@Mizko Hi Mizko, the link has expired again. Can I get an updated link?
"Figma is smart, but also incredibly dumb." - Mizko, 2021
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.
Hi Mizko,
I have sent you emails regarding your course "The Ultimate Figma Masterclass" PLease, provide feedback to my question!
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.
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
The only reason I can't use your tutorials is because of the distracting music.
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 🤣
@Mizko
Hi ! Can you reactivate the wetransfer link please ? thanks a lot ! Great video
All done! Download here: drive.google.com/file/d/1AEXZiPCUUMNm9V9piCN05OUdqG4tGk2k/view?usp=sharing
@@Mizko Thanks a lot !
@@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.
Japan!
Good choice Rupu!