Figma Tutorial: Smart Animate - Create UI & Web Animations (in 17 Minutes)
VloĆŸit
- Äas pĆidĂĄn 5. 08. 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 - Jak na to + styl
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đ€©
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!
Mizko, I've missed your channel. Your videos are really valuable and helpful. Thanks.
Crazy useful tutorial. I'm new to Figma, definitely watching the rest of your videos (and subscribing); fantastic presentation pacing and information detail.
So amazingly precise and simple, with excellent explanation. Convinced me to subscribe to your channel.
Wonderful video! Thank you!
This was pretty helpful to me!! Thanks to you!
Your videos are life savers, I learnt a lot
Your tips is very useful and it's a very easy explanation Thank you
Excellent man! Thank you for making this video. Your content helping a lot in my design.
Thank you!!
Dymnn amazing ! I completely love it
this is just what I was looking for!!! Ty for a great tutorial
Woo! Glad to hear Mary!
Awesome classes, I wish the figma download files were still available!
As usual. Thanks for the value bombs. Good to be back here!
Glad to hear!
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
Good job man.
Thank you.
LOVED IT ..
Thank you tons for your insight! Helps many.
Thank you :)
My new best friend... keep up this great work, it helps a lot of us đ
Love your tutorials, I'm a fan!
Thank you! Really appreciate the support :)
very clear explanation
As always, brilliant đ thanks for the vids/tips/info
Thank you!
Thx a lot it was really interesting :)
You are awesome. I really enjoy your class
Besides your videos, the method of your explaining is incredibly easy to understand..!! All the finer details are covered.
Thank you Prasad!
This was brilliant thank you for making this video!
Thanks Gabe! Appreciate the support.
Your are the best! Thank you
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'
Excellent!
Just discovered you, awesome and thanks.
Thank you Lars! Glad you found this useful. Appreciate it
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!
Thanks Mizko for helping me out đ»
SO NICE
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?
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
Your outro music is also awesome.
Excellent tutorial, bro. Cheers
Thank you Sierra :)
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!
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??
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!
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 đ
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?
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?
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!
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!
Subscribed because you are hyper cool :)
đ„
Woohoo!
You've all been asking for this!
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.
Hello, where is the link to download the file so that I can follow along?
can you plz make a tutorial on making a full website
I have updated the download link everyone. I gotchu - bit.ly/3d81vYK
Thank you :D
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 âš
Like! WhatsApp do CZcams use to record CZcams screen???
So, it's all within one page. How to create transitions between frames that are in different pages though?
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 CZcams 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
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??
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
can you put an animated background into a figma design?
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
Where is the link for this tutorial? I can't see it
i want to learn from you
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
đđđ
I have created the animation how can I add it to my website
I cannot find the link of the design in the description.
please share the link to download figma file so i can follow up the video
I don't know if it's just me but I cannot find the link to download the figma template in your description?
Just wanna become like u
No link in the description
bro japan for sure
My image is getting cut if I move it out of the Japan frame. Please help.
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
"Figma is smart but it's also incredibly dumb" đ
Facts!
I think this can be done through figmotion plugin, well most of it
Thanks for the tutorial
Background music is quite loud and distracting.
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 đ
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!
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
the link is expired sir plz update it
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!
Japan!
Good choice!
Each time i click a n the link it doesnât load so I canât follow along hell me out
Help*
Help*
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?
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!