Create cool Tab animation with this Figma tutorial! | Auto layout and Smart animate
HTML-код
- Опубликовано: 10 мар 2023
- In this very cool figma tutorial you will learn how to create great looking tabs animation working working with Figma's Components and Variants, Auto layout, Smart animate and drag interaction!
If you are not familiar with components and variants, i strongly suggest you to check out these tutorials -
• Figma tutorial: compon... (part 1)
• Figma tutorial: compon... (part 2)
Understanding Auto layout -
• Figma tutoria: Auto La...
Understanding fixed positioned elements, also know as "Sticky" -
• Figma tutorial for beg...
#yarivbe #autolayout #figmatutorial #figmacomponents #smartanimate #figmavariants
thank you very much. this tutorial helped me a lot . and do more like this tutorial!
Thank you so much for this great feedback! It's will appreciated ✌️
More tutorials - will do! 🙂
great explanation, thank you
Thank you so much for the great feedback Matus! I really appreciate it! 🙂⚡
Super, thank You!
Thanks a lot Marta for your great feedback! I really appreciate it 🔥🙂
Wow....Cool Animation 🥰
Thank you Tanzir for your great feedback! I really appreciate it 🙂🔥
Thank you for this tutorial ! very helpful.
You are most welcome and thanks a lot for the great feedback 🔥 I highly appreciate it ad happy to know it was helpful :)
thank you so much, this tutorial helped me a lot with my first project!!!!
You are most welcome and thanks a lot for your great feedback! I highly appreciate it 🙂🔥
thank you! nice tutorial
Thanks a lot for the great feedback! I highly appreciate it 🔥🙂
SUPER SUPER thank you
Thank you so much for the great feedback! It's highly appreciated 🙂🔥
thanks so much
You are most welcome my friend! Thanks a lot for your feedback - its highly appreciated! 🙂⚡
great bro!!!
Thanks a lot for your great feedback! I highly appreciate it! 🙂🔥
Very helpful :)
Thank you so much for the great feedback! I highly appreciate it and happy to know it's helpful 🔥🙂
Good jop👏🌟
Thanks s lot for your great feedback! I appreciate it a lot ⚡🙂
Nice
Thanks for the feedback! I appreciate it 🙂
thank you soo much. it really helps me a lot. but i wanna ask at 16:56, is it possible if the tabs horizontal scrolling too? since i wanna create with a lot of tabs (more than 3 tabs) for my thesis. again thank youu
Thanks a lot for your great feedback Hafiz! I highly appreciate it 🙂🔥
To your question - its definitely possible to create it with scrolling tabs as well. Make sure that you create the content for each tab you tap/click on.
You could tabs that scroll with the content as well, meaning, that when you go to tab 3, it scroll s to the middle of the screen and reveal more tabs you can select (4 and 5 or only hale of 5) - also an option.
Remember that with prototyping we demonstrate a behavior and doing 3 of them is enough for that purpose - no need to actually create the content of all of them, unless its actual content that you a purpose to show.
Hope that helps. Let me know if further help is needed :)
thanks, nice tutor bro, what if, the second tab and third tab are also on the first tab?
You are most welcome Syahrul and thanks a lot for the great feedback! I really appreciate it ✌
I am not sure i really understand your question :-)
Second tab and third tab in the first tab - please explain further. Thanks!
hi, how to make the tabs scroll horinzontally?
Hi there. In order to scroll the tabs, or lets say to show tabs scrolling horizontally, you can add it to the animation by creating tabs area which is longer than the screen width and animating the tabs area together with the tabs content. The same way tabs are scrolling.
Hope that helps? Let me know.
thanks very much for this can you explain further when we have more content on the tab and the overflows horizontally. Do you under stand me
Thanks a lot for your great feedback! I really appreciate it 🙂
To you question - i dont think i fully understand, but if you give me an example, what are trying to do or what do want to achieve, than i am pretty sure i will be able to expand and explain. Thanks!
@@YarivBE Thanks for replying i really appreciate this 🙏❤️, this is what i’m trying to depict; imagine we have more than 3 headings on the tab eg 20 tabs, whereas they have to overflow into the frame horizontally how do i make the it work cos i tried and it didn’t. If you don’t understand my explanation you can check the FOTMOB application the swipe through days on the home page is exactly what i’m trying to depict to you
@@boluwatifelawal2146
You are most welcome! ♥
I'll tell you like this - in prototyping, we demonstrate the general behavior and UI animation that we want to achieve on the screen.
When i do prototype for the developers, to show them how i want the transition between the tabs to behave, its enough (totally) to show it on 2 or 3 of them - all the other tabs will behave the same (!) and really no need to do all of them - its an unnecessary extra work.
This is a prototype and not a working product.
Technically, if you got through the first 3, than basically what you do (if you want to add more) is just add more columns to same one that holds the first 3 and keep on swiping between them, and again, there is really no need for this 🙂
@@YarivBE Thank you very much for your time and words i really appreciate 🙏❤️
@@boluwatifelawal2146
You are most welcome!🙂
Hey Yariv, I did exactly as the tutorial yet when i connect the tabs and pages and set to smart animate it just creates a fade effect, what am I doing wrong?
Hi Faten and thanks for writing! Happy to see you here on the channel 🙂
To your question - please check that the name of the frame which is holding the tabs content is the same in all screens.
A lot of times when smart animate is not working smooth, it's a name issue.
Let me know if that helps and write further if needed. Thanks.
Hey Yariv yes now it works it was the mismatched names! thank you :))@@YarivBE
@@fatenhr3654
Happy to know the issue is solved! You are most welcome 🙂
I did this animation and it worked perfectly... But recently, when I duplicated the frame to another page, the first and the now duplicated didn't work anymore :(
I did 3 pages to slide as well, and the second page to the third, its still working, but the page 2 to 1 and 1 to 2 don't!! How that is even possible? 2 to 3 is "navigate to" and "smart animate", but 1 to 2, also "navigate to" and "smart animate"... The animations are just "fading out" bc of the "smart animate" x( Help me, please!
Hi there :) Thanks a lot for the great feedback! i really appreciate it🔥🙂
To your question - well, its really hard to say - i will need to see your file in order to understand what went wrong there. Could be for various reasons.
If you would like to share it, than write to me and tag me with a comment on the figma file, to point me where the it doesnt work. Of course, up to ypu, if you want to :)
Thanks!
Unfortunately, the file is from the company I work, I can not share. But, I got it, I was able to resolve the problem. I don't know exactly how but, I did everything again, from start to end, and it worked. I believe it was a small bug since this animation is using 9 variants if I want to show 3 slides of something in 3 different pages. I do hope someday Figma will improve how to make this animation.
Thank you!
@@YarivBE
@@amandha-jmj
Ok - got it about the file sharing :) Of course i understand.
happy to know that after all, you solved it 🙂
This tutorial don't work for me, doing everything exactly the same, when I'm trying to make second instance. I can't drag properly any element of second instance of Tabs, the are just blocked. Doing everything the same as you, just some other design.
Hi. I need to see the file and understand what went won't for you.
Can you share the file with me? I need a share with editing option. Let me know. Thanks.