SWIPEABLE EDGE (DRAWER) in Figma - Tutorial
Вставка
- Опубліковано 6 лис 2022
- Get the SOURCE FILES for this project ($1.99): payhip.com/b/bCiIw
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
In this Figma prototyping tutorial, we'll take a look at a swipeable edge (swipeable drawer) interactive component and how to create it in Figma. We will set up a drag + tap interaction, enabling you to both draw / swipe the edge in both directions as well as click inside / outside the drawer / edge to open and close it. This is a step-by-step explained tutorial.
How to create / design / build an interactive swipeable edge (drawer) component prototype in Figma (step-by-step explanation tutorial) - download link for source files available
Topics: Figma prototyping, Figma interactive components, swipeable edge, drawer
--------
© 2022 Mavi Design - Навчання та стиль
Thanks for the tutorial! For anyone looking for the "Fix position when scrolling" option within Constraints, it might be under the Prototype tab now :)
That's right! - Prototype > Scroll Behavior > Position > Fixed (Stay in place)
This was recently updated, thanks for pointing this out:)
Recently learning about UI in my design course and ur tutorials always come in handy! Thanks for making these tutorials.
Thank you very much, this was exactly what I needed !!!
I have been looking into how to do this! thx sharing, amazing work!
Hey. Thanks for this, I've learned a few tricks. However, I managed to do this interaction using overlays. Overlays have an option of "Close when clicking outside, " saving you a few workarounds.
Amazing work
Thank you so much, that was helpful 👍
Love the way you talk through your thought process and discuss issues as they happen. Great teacher! Subscribed. :)
Thank you 🥰
amazing tutorial thank you :)
Amazing! Was searching for this type of the tutorial and FOUND 🤩 Great content, easy to follow along and just perfect to apply this technique to my project.
Me, too. It's a very useful tutorial. Thank you!
OMG! been waiting for this video for a long time. Thanks for sharing Mavi
Awesome! Next time let me know!!
Amazing! Is it also compatible with bravo studio?
how did you copy and paste the effect? when i select the effects section in the right pannel, it does not highlight the entire effect collumn like it does in your video?
Good stuff! That trick with adding the addition rectangle and reducing its opacity to 0% in the closed state to solve the glitchy effect is something I would've never conceived of in a thousand years. How did you discover this, what was your thought process?
I knew that it had something to do with the rectangle fading into the second variant - with smart animations it’s best to have objects in both states and then just modify properties :) so instead of not having the object in state one and having it in state 2, I simply had the rectangle in both states and just played around with visibility / opacity