5 Most Useful Figma Animations For UI Beginners
HTML-код
- Опубликовано: 7 июл 2024
- Figma animations help you wow clients and communicate with developers without ever having to leave the software. In this video we will learn how to create the 5 most useful Figma Smart Animate animations in a breeze!
📕 Show Notes 📕
➡️ Figma Animations Masterclass: • Crash Course: Master A...
➡️ Subscribe To The Channel: / @timgabe
✏️ Figma file: www.figma.com/file/lqPNULhS2l...
Timecodes
00:00 Intro
01:00 Animation technique 1
03:50 Animation technique 2
08:00 Animation technique 3
12:20 Animation technique 4
16:28 Animation technique 5
#figma #figmatutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
link to the Figma file (delayed as usual 💜):
www.figma.com/file/lqPNULhS2lWAs3TZM6QadS/5-Figma-animations?node-id=0%3A1&t=TydG5Dsn4xeETaNG-1
Thanks for taking the time to create all these videos and teach us how to do all this stuff! I wanted to thank you because of your videos and tutorials I have improved a lot my Figma skills and that has shown up in the work I do at my job! Now I have been assigned to new projects on Figma, created simple but useful prototypes for the clients, and mastered the auto-layout feature, etc! My boss and the senior creative team are really impressed with my work lately. You're the best!
Andrés... this is the best comment I've received so far on my RUclips 😍 I'm sooo happy to hear that you're getting genuine value from my videos and that your colleagues are enjoying the progress you're making at work. you definitely put a smile on my face, thanks for sharing my friend!! 🤩
@@TimGabe You deserve it! Thank YOU! :D
I'm so happy I found this video! I can't believe how cool you are at explaining things like this! Thank you so much for your hard work!
appreciate that a lot, thank you!!
Great video, brother!
That overlay was completely new to me 🤯
Thank you for some great tips!
my brother 💜 I'm happy that you liked it -- means a lot when it comes from you! 🤩
Amazing Videos. Super helpful. Thanks for sharing!!
the way of explanation outstanding mate. 👏
Amazing stuff Tim 🙌
thank you so much, Henrik! 🥳
Awesome tutorial! Thank you!
thank you for commenting!!
Such a great tutorial. Thanks to you I love figma and im learning pretty fast
I’m so glad you’re getting value from the videos, Joaquín ☺️
thanks man! really lifesaver and good tutorial!
appreciate the comment, friend!
You are a pretty good teacher❤ Keep’em coming
really appreciate that, Anwesha! 💜 thanks!!
This channel is so helpful!
happy you find the content helpful, Sneha 🥳
You're the best Design channel i know ! thank you, i want to try and learn everything !
that is so nice of you to say, Corvus 🙏 I hope you can learn a lot from my channel ☺️
I am learning a lot from your videos. Your teaching style is awesome! 😍
that's so nice to hear Nazmul, thanks for supporting! 🥳
Great tutorial.....thank you so much 🥰
thanks a lot for the kind comment, Tanzir 😍
MEU DEUSSSSSSSSS VC É INCRIVEL
i've just learned how to make drop down menu easier, thank you 💖
that's awesome to hear! thank you for sharing 💜
i will definitely use them 🤩
great to hear 🤩
Hi, I just want to say thank for your great tutorials
thank you for the nice comment!!
Hi! I am learning a lot from your videos. Thank you so much for all the awesome content you are putting out.
I just wanted to ask, isn't it easy to just add a horizontal scroll functionality for the one you mentioned in the 'drag technique'? I was wondering if, is there any difference or if we can use them interchangeably. (drag & scroll)
thanks a lot for the support 😃 if you just add horizontal scroll you won't be able to get the "snapping" effect that some people really like!
Demonstrating exceptional professional expertise alongside a distinctive delivery style characterized by calmness and coolness. Above all, what truly distinguishes is the remarkable responsiveness to every message - a level of honesty and respect seldom observed in instructors or professionals toward their audience.
I aspire to gain further knowledge from your channel, ultimately progressing to an advanced stage as a UI/UX designer.
Kind Regards,
Aliya Zahidy
Good content for learners..
happy you liked it Bilal 🙏☺️
Man, I don't comment much on RUclips, But you are Amazing!! your tutorials are the best🤩🤩
these comments always mean a lot. thank you so much, Rami!! 🙏
hey can you make tutorial on the heights animation that you showed in the intro ?
Tq
I love you Tim
haha, i appreciate the support ana!!
@@TimGabe Tim can i show you my work and have your opinión?
Should you place each piece before doing all animation or can you still do animation and add objects along the way in your frame?
Now how to actually implement this in code
that's a different story 🎉
Chat gpt
Export the Lottie file and then use webflow to build your site which supports Lottie files. Truly drag and drop
Thanks for the great tutorial. I subscribed to your channel and liked the video. I realized that a button hover doesn't work until the image is fully revealed. I couldn't figured out how to make the hover work independently of each other. Let me know if anyone knows the workaround. Thanks.🤓
with this workflow I don't think it's possible, but if you for example just added the card and the button to a shared frame and then put the button on top it should be possible 🤩
thanks a lot for the kind comment, my friend!! 🥳
@@TimGabe Thanks a lot for the prompt and thorough reply. I'll try that. Keep up the good work! 🤓👍
Hi Tim. Is it possible to make zoom in effect ( prototype) in Masonry grid (with auto layout) . Hope you got my question. :)
Thank you in advance ,
💗
Your biggest fan plus student🥰
hey Anjali! I'm not sure I understand the question fully, but what I usually do for zoom effects is that I use the "K" tool (scale) to change the size of elements to create a zoom effect 🤩
How to creat Text animation from let to right horizontally? Would you please make a tutorial on that? Thanks in advance
not quite sure I understand what kind of animation you're referring to, Sayekat. could you explain more? 😃
Can you show us the highlights video in the start of the intro How to make it in figma
Hey can you please tell me what is hud design? Can we do it in figma?
you can create anything in Figma, so for sure!! I haven't created huds myself, but as far as I understand it's simply a screen interface (that often looks a bit futuristic).😃
@@TimGabe actually I was applying for one job and they had hud in their discription section so just wanted to know what it was 😂😂 like background moves when we slide screen something like that right?
Nice but the dark mode makes it hard to see.
there is no figma file in the description
classic me... sorry about that, here it is Tomisin:
www.figma.com/file/lqPNULhS2lWAs3TZM6QadS/5-Figma-animations?node-id=0%3A1&t=TydG5Dsn4xeETaNG-1
There's no figma file on description 🤨
that's so me... every time 😂 here it is:
www.figma.com/file/lqPNULhS2lWAs3TZM6QadS/5-Figma-animations?node-id=0%3A1&t=TydG5Dsn4xeETaNG-1
the audio volume in all of your videos are too low
hey Om! appreciate the feedback!!
These animations are just for kids. looking forward to some really hardcore prototyping
they're definitely not super advanced, my friend. thanks for the feedback! 😃
Actually, they're for beginners. The clue's in the title
PLEASE SPEAK LOUDLY
Well, I can hear mr. Tim pretty clearly