Jesse Jesse.. I'm just starting to migrate my work projects from Sketch over to Figma, and learning as I go.. this tutorial has help me get over a prototype bump in the road.. thank you for this. You're an amazing teacher :)
i do not understand how he make the staggering stuffs :( followed the video but im still lacking the staggering effect. Do you mind teaching me? I googled but it seems different from what he did so im confused. his methods look really easy
The animation is really interesting, but if I have to give this to my programmer, will he be able to do the same rendering? (sorry for the newbie question, I'm relatively new with Figma!)
Hi, I created animated sidebar menu but on the first page I have a dropdown menu and now when I choose options i get stretched window after I choose option from dropdown menu. Animation works great. Also how do you connect menu options to other pages?
I'm confused how you did this. I'm not understanding how you have a frame inside a frame with out it conflicting when you create a variant. I'm getting conflicting variants when I'm near the end of the video & won't let me "change to" anything due ti conflicting variants.
Same. I just put the component set of the menu inside the original frame (Copied ) and still have the problem with the Hamburger menu. It looks not organically
This is super cool! Is there a way to make this as an overlay? So that I can exit the menu by clicking outside and not just having to use the close button?
I dont understand why mine looks different from yours T_T i followed the same thing but my menu is not sliding in from the left, no staggering animation T_T
I keep seeing this tactic but its kind of a cheat since this is one animation on one page. What happens with a scrolling app? How long would this take to do over every instance in an app with hundreds of pages? Doesn't seem practical.
@@JesseShowalter I love this idea! but also want to learn how to component this for other pages and designs? Would I have to now create different components? Do you have a tutorial on how to go about doing this for different pages? Also thank you so much for your great ideas and easy-to-follow tutorials!
Can we go to master component from other frames? Like here if we want to keep first sign in page and then go to home page consist of menu animation like this,so how can we navigate from sign in page to this menu page?? Please let me know Iam in a hurry
I was told that not everyone can do interactive components and variants as it’s only beta and you have to request from Figma to be able to use it. I tried after viewing a different video, it didn’t work. Then I asked in a Figma forum and was told that you need to request access to it from Figma
I think these tutorials that already have projects have finished aren't very helpful. If someone is looking for a tutorial... you should start from the beginning. Nice video, just not very beginner friendly.
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
What do you think of this effect? How are using Figma interactive components?
this looks so awesome! will try it out very soon
Wowwww! Mr.Showalter this animation is amazinggg.
you rock, man
Hi Jesse! Try to repeat this effect using OnDrag, it should be cool!
This is so cool. Tried it & feel like a pro 😘
Jesse Jesse.. I'm just starting to migrate my work projects from Sketch over to Figma, and learning as I go.. this tutorial has help me get over a prototype bump in the road.. thank you for this. You're an amazing teacher :)
I've recently discovered the beauty of Smart Animate but this makes it SOLID. Thanks so much!
WOW! I did not know you can stagger a mobile menu like that. MINDBLOWING!!! Love your videos, Jesse!
i do not understand how he make the staggering stuffs :( followed the video but im still lacking the staggering effect. Do you mind teaching me? I googled but it seems different from what he did so im confused. his methods look really easy
I didn't know you could use components that way... damn! love it Jesse thank you a lot
Great tutorial, helped me a lot, thank you!
I really like your way of explaining and also the quick vids! Thank you Jesse, you're inspiring me :)
youre videos are amazing man, tyvm
What if I use another frame? Will I have to do the menu prototype all again?
Thanks for this tut. helps a lot. Cheeras Man.
Awesome!
Thanks!
It's amazing result but.. I'm very confused when i try this video.. please more tutorial video
Thank you!!! It worked!!!
The animation is really interesting, but if I have to give this to my programmer, will he be able to do the same rendering? (sorry for the newbie question, I'm relatively new with Figma!)
Well, I guess the simple answer is that it depends on your programmer.
all this animation is very simple css animation, pretty doable
Vodafone idea(vi) have done this on their app
yes programmer can do it. He will hate you for life tho 😂
@@lazy_amanda You designers love to stress the hell out of us😂
Could you please advise me on how to add a side menu to every screen of my app, Jesse?
Hi, I created animated sidebar menu but on the first page I have a dropdown menu and now when I choose options i get stretched window after I choose option from dropdown menu. Animation works great. Also how do you connect menu options to other pages?
Thank You for the contents... Please keep uploading Figma related videos... :D
WOW Looks very good. But If I have to make a sidebar for multiple mobile frames, will I make it like this for all?
this I will definitely use in my next design :)
I'm confused how you did this. I'm not understanding how you have a frame inside a frame with out it conflicting when you create a variant. I'm getting conflicting variants when I'm near the end of the video & won't let me "change to" anything due ti conflicting variants.
Same. I just put the component set of the menu inside the original frame (Copied ) and still have the problem with the Hamburger menu. It looks not organically
Thank you for the video, you are amazing!)
This is super cool! Is there a way to make this as an overlay? So that I can exit the menu by clicking outside and not just having to use the close button?
I dont understand why mine looks different from yours T_T i followed the same thing but my menu is not sliding in from the left, no staggering animation T_T
Got all the way to the end and tried to test my prototype but wasn't able to!
You are best🤗🤗
Thank you
You're welcome! 😊
A designer's dream is a developer's nightmare!
Hey guys please note that this feature is only available in Beta! You need to request access first.
Way too fast. You should give people a few more seconds to actually read what your clicking on so we can follow along.
I am trying this today
tanks for your informastion ,nice
Do you know also commercial photo type ressources like those in your design ?
So cool
Hi, at min 4:36 how does the added screen get the play icon for it to be the beginning of the prototype?
Can anybody help with the menu icon to cross icon animation. Have tried everything but can't achieve the same effect
how can we convert these designs into a code?
Thanks for the great tutorial! now, how i implement this to code.. :( please need help.
That was a very fast talk... :D
Very cool. I will always suck at design but I enjoy your content. 😍🙏
I keep seeing this tactic but its kind of a cheat since this is one animation on one page. What happens with a scrolling app? How long would this take to do over every instance in an app with hundreds of pages? Doesn't seem practical.
You could componente this very easily
@@JesseShowalter I love this idea! but also want to learn how to component this for other pages and designs? Would I have to now create different components? Do you have a tutorial on how to go about doing this for different pages? Also thank you so much for your great ideas and easy-to-follow tutorials!
Why you used frame inside frame. Instead of box?
Can we go to master component from other frames?
Like here if we want to keep first sign in page and then go to home page consist of menu animation like this,so how can we navigate from sign in page to this menu page??
Please let me know Iam in a hurry
u great bro
What commands did you use to magnify and show the left options on your vid pls?
Jesse Showalter my role model
'I keep getting the error 'A prototype needs to have 1 frame''. How do I resolve this even though I followed the instructions in this video?
More figma tutorial please
Can't get my head around this I'm trying to do an off-canvas component for a desktop prototype, trying to follow these principles :/
"Change to" doesnt exist anymore, I assume its swap overlay now?
And where did you find foods photo in your design ?
A lot of them in Canva
Do you think this could be compatible with a Bravo Studio menu ?
Nice
How did you stagger?
Is it paid version figma???
Interesting staff but too fast for me. You could make it to 10 min long and explain things more slowly.
Did not work for me sadly
Hiiii, anyone know that if i cant find On click button? i only got on tap button
it dosent work completly for me and also i messed up my whole web project
unfortunately i dont have the "change to" option in the prototyping tool.
How can i get it?
Its a Beta feature, you have to sign up to use it ^_^
u need register for beta version. Within 4-5 days u will receive mail n u r done bro.
what the font?
Thanks for it, Worked but not as good as yours!!
I was told that not everyone can do interactive components and variants as it’s only beta and you have to request from Figma to be able to use it. I tried after viewing a different video, it didn’t work. Then I asked in a Figma forum and was told that you need to request access to it from Figma
i love you
is that a Naira Sign?...lol
Sedihnya diikuti ternyata tidak bisa export
I can’t focus you’re too handsome
I think these tutorials that already have projects have finished aren't very helpful. If someone is looking for a tutorial... you should start from the beginning. Nice video, just not very beginner friendly.
im so poor..I understand nothing. Video so fast..which layer where to use n how to use...missing all.