Hello, thanks for this great tutorial. I have a question. I have one button & one textview inside bottom sheet. How do we change/set text of that textview on button click
Hi, thanks for the feedback! In Figma you could try to make an other modal component and then use the "Swap overlay" interaction type to swap to the different overlay. But if you need more control of the animations, then a better solution might be to build interactive component variants for the different overlay layouts. You're also talking about TextView, which makes me think you mean Android development. And in that case I unfortunately cannot help you with that :/
Well I mean you can always just navigate to a new screen with the "navigate to" prototype connection. Or if you want to navigate to a different overlay screen, then you can use the "swap with" prototype connection to do navigation within the overlay. That might allow you to prevent any weird closing behaviour.
Yes you can. Just put your list items inside a frame. Also make sure some list items overflow the frame and then enable vertical scrolling on the frame in the prototype settings. Although I would not recommend this, because it might lead to poor UX. It's not a good experience to scroll the items in this small window. Rather I would make the modal expand to full screen or just reveal more items when scrolled. Think about expandable bottom sheet modal. But that's completely different thing from what's show in this video 😅
Can you make this bottom overlay stay in a shorter version on the screen as a tab that you can open and close like the lower menu in Google Maps when you are traveling? I tried putting the overlay inside the screen frame just showing the top of the overlay but no success yet. SOS
Hey, I actually just released a new video that showcases how to build the Spotify music player modal. It's kind of similar, so you might be able to use that as your base for the Google bottom sheet modal. Here's the video link: th-cam.com/video/xdvy2g712HU/w-d-xo.html But using overlays has its disadvantages, as point out in the Spotify video, so that might not be ideal. But now that I think of it, you might be able to build the Google maps modal without overlays 🤔 I'll need to do some testing and if I find a good way I'll probably make a video about it :P
@@fullstackdesigner I finally did it when I updated to beta version with "change to". Now I'm struggling trying to make an option in the main menu to open an overlay
Hi, it's just the Figma prototype running in an other browser window. I'm running the browser in borderless full screen mode and also using the macOS split view functionality to have the windows side by side.
It's handled by figma. Highlight/select the prototype connection to the modal frame, then go in the "Interaction details" -> "Overlay" section in the right panel. There is a checkbox "Close when clicking outside". That's what allows you to close the modal/overlay when you click outside the "Modal" frame. That's also the place where you control everything about the overlay background. Color, opacity, interaction etc... Hope this helps!
Thank you so much for this very clear instructions! Would appreciate more content like this in snippets
exactly the kind of tutorial I was looking for, thank you so much!!!!
This is such a great tip with "drag" the line. Thanks!
I appreciate how to the point your videos are. Keep it up!
Thanks! That was a simple video that explain exactly how to get the task done.
Just finished watching this video it helped a lot thank you 🙂 I’m looking forward to seeing more tutorials ❤️
I’m glad you liked it 🙏🏼
This video was exactly what I was after today! Thank you so much, and don't worry I can never spell anything on camera either :D
Hey man, extremely good, subbed! Best Figma tutorials on YT
thanks for sharing in a quickly way!
If I could only spell "playlist" 😂
Thank you for the tutorial! Super helpful
Thanks! Glad it was helpful! :P
Really easy & useful. Thank you!
Exactly what I needed ♥
Damn bro. Instant sub. :)
looking forward to more such cool tips and tricks
Thnx dude, really helped me.
so helpful, thank u for tutorial.
Salvou dms meu rei 🇧🇷 🇧🇷
Thanks, this was an awesome video!
Hello, thanks for this great tutorial. I have a question. I have one button & one textview inside bottom sheet. How do we change/set text of that textview on button click
Hi, thanks for the feedback! In Figma you could try to make an other modal component and then use the "Swap overlay" interaction type to swap to the different overlay. But if you need more control of the animations, then a better solution might be to build interactive component variants for the different overlay layouts.
You're also talking about TextView, which makes me think you mean Android development. And in that case I unfortunately cannot help you with that :/
Hi Thank you for sharing this tutorial. Really help :)
awesome bro. thanks
Thank you brother
10/10 excellent!
thank u so much.. very helpful...
Awesome bro Keep going
Thank you bro!
you are amazing thank you
thanks for sharing 😊
Amazing
awesome! ist ist possible to link to a new screen from the overlay without it closing weirdly?Like if you were to click "add to playlist"
Well I mean you can always just navigate to a new screen with the "navigate to" prototype connection. Or if you want to navigate to a different overlay screen, then you can use the "swap with" prototype connection to do navigation within the overlay. That might allow you to prevent any weird closing behaviour.
Great tutorial !!! Is that possible to click the content inside the bottom sheet and navigate to another page?
Yeah, that's what I'm wondering.
That can be done by almost anyone. Tell me how you'd make a selection that changes the dropdown from the bottom sheet.
Can you enable scrolling within the modal?
Yes you can. Just put your list items inside a frame. Also make sure some list items overflow the frame and then enable vertical scrolling on the frame in the prototype settings.
Although I would not recommend this, because it might lead to poor UX. It's not a good experience to scroll the items in this small window. Rather I would make the modal expand to full screen or just reveal more items when scrolled. Think about expandable bottom sheet modal. But that's completely different thing from what's show in this video 😅
Can you make this bottom overlay stay in a shorter version on the screen as a tab that you can open and close like the lower menu in Google Maps when you are traveling? I tried putting the overlay inside the screen frame just showing the top of the overlay but no success yet. SOS
Hey, I actually just released a new video that showcases how to build the Spotify music player modal. It's kind of similar, so you might be able to use that as your base for the Google bottom sheet modal.
Here's the video link: th-cam.com/video/xdvy2g712HU/w-d-xo.html
But using overlays has its disadvantages, as point out in the Spotify video, so that might not be ideal. But now that I think of it, you might be able to build the Google maps modal without overlays 🤔 I'll need to do some testing and if I find a good way I'll probably make a video about it :P
@@fullstackdesigner I finally did it when I updated to beta version with "change to". Now I'm struggling trying to make an option in the main menu to open an overlay
u save me thxxxxxxxx
whats name software show iphone in your video ?
Hi, it's just the Figma prototype running in an other browser window. I'm running the browser in borderless full screen mode and also using the macOS split view functionality to have the windows side by side.
keep going
But one question, how do you make the dark overlay disappear when the modal is closed?
It's handled by figma. Highlight/select the prototype connection to the modal frame, then go in the "Interaction details" -> "Overlay" section in the right panel. There is a checkbox "Close when clicking outside". That's what allows you to close the modal/overlay when you click outside the "Modal" frame.
That's also the place where you control everything about the overlay background. Color, opacity, interaction etc...
Hope this helps!
@@fullstackdesigner Amazing, thanks a lot man!
thanksssssss
helpful
Super helpful thank you