Figma Tutorial: Smart Animate - Create UI & Web Animations (in 17 Minutes)
Вставка
- Опубліковано 3 лип 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 :)
Step by step, this was really awesome!
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🤩
LOVED IT ..
thanks for this video. tried creating everything from scratch, and it was wonderful. I am new in designing(aspiring product manager).
Wonderful video! Thank you!
Mizko, I've missed your channel. Your videos are really valuable and helpful. Thanks.
Your videos are life savers, I learnt a lot
So amazingly precise and simple, with excellent explanation. Convinced me to subscribe to your channel.
Dymnn amazing ! I completely love it
This was pretty helpful to me!! Thanks to you!
Good job man.
Thank you.
very clear explanation
Love your tutorials, I'm a fan!
Thank you! Really appreciate the support :)
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!!
Thank you tons for your insight! Helps many.
Thank you :)
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
Thx a lot it was really interesting :)
My new best friend... keep up this great work, it helps a lot of us 🙏
This was brilliant thank you for making this video!
Thanks Gabe! Appreciate the support.
As usual. Thanks for the value bombs. Good to be back here!
Glad to hear!
Thanks Mizko for helping me out 👻
this is just what I was looking for!!! Ty for a great tutorial
Woo! Glad to hear Mary!
You are awesome. I really enjoy your class
SO NICE
Your are the best! Thank you
Awesome classes, I wish the figma download files were still available!
As always, brilliant 👍 thanks for the vids/tips/info
Thank you!
Besides your videos, the method of your explaining is incredibly easy to understand..!! All the finer details are covered.
Thank you Prasad!
Excellent!
Just discovered you, awesome and thanks.
Thank you Lars! Glad you found this useful. Appreciate it
Your outro music is also awesome.
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!
Excellent tutorial, bro. Cheers
Thank you Sierra :)
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'
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!
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?
Awesome 👌
Glad you found this useful Azrael!
that was awesome man!
Thank you! Hope you enjoyed it
@@Mizko yes, and learned a lot from you!
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
Subscribed because you are hyper cool :)
🔥
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 👍
Woohoo!
You've all been asking for this!
Hello, where is the link to download the file so that I can follow along?
I have updated the download link everyone. I gotchu - bit.ly/3d81vYK
Thank you :D
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 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??
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 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...
Hi Mizko, how do you change your cursor to a circle like the one you're using on this video ? Thank u :)
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!
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.
👍👍👍
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?
bro japan for sure
Just wanna become like u
"Figma is smart but it's also incredibly dumb" 😂
Facts!
i want to learn from you
Like! WhatsApp do UA-cam use to record UA-cam screen???
Where is the link for this tutorial? I can't see it
SIr, can i get download link for photo??
I have created the animation how can I add it to my website
I cannot find the link of the design in the description.
can you put an animated background into a figma design?
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
So, it's all within one page. How to create transitions between frames that are in different pages though?
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
No link in the description
please share the link to download figma file so i can follow up the video
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!
I don't know if it's just me but I cannot find the link to download the figma template in your description?
I think this can be done through figmotion plugin, well most of it
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
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 UA-cam 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
My image is getting cut if I move it out of the Japan frame. Please help.
Thanks for the tutorial
Background music is quite loud and distracting.
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!
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 👍
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:)
Each time i click a n the link it doesn’t load so I can’t follow along hell me out
Help*
Help*
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.
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
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.
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!