Figma Advanced Animations
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- Clone Tim’s project to work alongside him: bit.ly/3DBGEeO
Master Figma for web design with our new, in-depth Figma course: t.ly/wdIi9
Need a new Figma account? - psxid.figma.com/s8z3306bhq0h
In this tutorial, Tim walks you through storyboarding, interactions, and animations to give you the ability to create a powerful UI experience. Learn step-by-step how to create advanced animations and interactions in Figma.
📽️ CHAPTERS
00:00 - Intro
00:46 - Step 1 Storyboarding
01:05 - Step 2 Identify multi-interactions
05:04 - Step 3 Start animating
Learn more about webflow animations & interactions: bit.ly/3SLOrM6
🔥 See our courses on how to make 6-figures as a web designer : bit.ly/3CZFtpn 💰
📱 Find us on SOCIAL MEDIA & follow Tim’s Channel
Flux Academy's Instagram 👉 / flux.academy
Tim's Instagram 👉 / timgabe
Tim's TH-cam Channel 👉 / timgabedesign
Like this animation video? Let us know in the comments 👇🏼
#designiterations # webdesignanimations #design #webdesign
perfect, exactly the thing I was looking for, please more advanced animations, interactions like this!
Sucessfully did the whole design. Working seemlestly, I found a few errors while doing this, you provided so much details in you video. So, that was easy to feature out the problems. I really enjoyed working on it. Huge thanks to you for helping this community!
Awesome video need more of this type of contents especially from Tim
exactly what i need for my portfolio interactions, looking forward to trying them out
This is amazing dude, I have learned a lot of things!
Thanks for this, super clear!
Thank you so much, It's very useful.
Very helpful, thanks.
Awesome, thank you a lot!
Thank you so much for good video!!!!
Really great...tutorial..Thanx
I approve of the tower's name. Thanks for a good tutorial!
How can I apply the animation I made to the front end?
Could you please upload a video explaining how to create the expanding and collapsing 'Review & Rating' card?
Phenomenal content we want more of this:))
Thank you! Coming up!
@@FluxAcademy thanks a lot!!!
really appreciate this, Cosimo! 🙌🤩
@@TimGabe Nah man its Just super well explained, and works phenomenally well! So thats Just this smallest i can do to appreciate this!
@@cosimobrunothetrimon happy I could help, my friend ☺️🙌
Amazing explanation
that's very nice of you, Maryna. thanks a lot! 🥳
Awesome content!
thanks a lot, Mr. Chinaski! 😃
I downloaded your file to follow along but it is view only. I learn with doing it at same time, I thought I would be able to work in the file.
Awesome!!
glad you liked it, Paulo!! 🙌
I lost my dog but this video helped me build a pop up image for my website I no longer need a dog.
Anybody can provide figma link here for this prototype
I couldn't get the figma file to be used to follow along
Good video
Hi, I can't copy the project file. please help
How would you then move those animations to webflow?
you need to redo these animations but you can also prerender animations in after effecs or 3d programs. So you can recreate Apple like websites. There are a lot of tutorials
Hi, Do we need professional figma account to get advanced smart animation or is it available on Free version? Please let me know. Thanks!
its available in free version!!
Would've liked to do the project with you, but the Figma file is locked.
How to handoff this animation to developers ?
everytime i drag items out of the frame to smart animate items back to the next frame > the (smart animated ) items suddenly appear on the screen and doesnt slide inside the screen , if anybody can help me out with this ,please
PS. sorry for my poor english ,its not my native language , i hope someone can comprehend this and help
i'm 7 months late but it's most likely because your layer names are different, smart animate animates objects with the same name between frames 1 & 2. If the object layer you named are different then figma treats them as separate objects
Hi please can I have the file to this?
Nice tutorial, I wouldn't have titled it 'Advanced' though (more 'lo-fi prototyping') as tools like Figma, Xd etc. have no real advance animation features/functions for protoyping, like Principle, AE and ProtoPie.
Cool
happy you like it! 🥳
Can't duplicate the project file. :/
Nice Job! 1 more follow! More more kkkk !
I prefer protopie or after affects for prototyping not figma 🤗 . Figma animations appear laggy and doe not give the real life feel😅
Are you sure? Got any tutorials on that?
@@zmqrsvfx4317 I am already a designer and 3d artist at a design studio I do it almost everyday . We use figma only for design purpose and tools like invision, protopie , after effects for prototyping 🥰
@@gauravidesigns oh ok I got it but have you any tutorials on that?
@@zmqrsvfx4317 No dude I do not get time for creating youtube tutorials . I do freelance in my off hours and my day job . I wish I could make tutorial videos 🌈😊
@@gauravidesigns ok yh I know you're really busy sorry for disturbing
Btw Please give me a breakdown of the best softwares for the animations so I can take courses on them
I would call this semi advanced but alright
your face is totally hiding the layers content... which is very imp. to see
It's already impossible enough to get a ui ux job now. All employers want you to be an amazing coder along with being a ui wizard. I am so sick and tired of how the tech industry is right now. There is almost zero opportunities for new IT SUPPORT techs, CODING INTERNS, JUNIOR PROGRAMMERS, JUNIOR UI UX, and the list goes on. It's so annoying
I cant stand figma. Everytime a hiring manager tried to look at my portfolio figma lags and they say "sorry this is lagging " . I saw another person comment on this and I wanted to also. Screw figma