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.
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: ruclips.net/video/xdvy2g712HU/видео.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
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 😅
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!
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
exactly the kind of tutorial I was looking for, thank you so much!!!!
Thank you so much for this very clear instructions! Would appreciate more content like this in snippets
I appreciate how to the point your videos are. Keep it up!
This is such a great tip with "drag" the line. Thanks!
Thanks! That was a simple video that explain exactly how to get the task done.
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
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 🙏🏼
thanks for sharing in a quickly way!
Exactly what I needed ♥
Thnx dude, really helped me.
Really easy & useful. Thank you!
Damn bro. Instant sub. :)
looking forward to more such cool tips and tricks
awesome bro. thanks
Thanks, this was an awesome video!
Salvou dms meu rei 🇧🇷 🇧🇷
If I could only spell "playlist" 😂
Thank you for the tutorial! Super helpful
Thanks! Glad it was helpful! :P
Amazing
10/10 excellent!
Thank you brother
Super helpful thank you
you are amazing thank you
Awesome bro Keep going
Thank you bro!
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 :/
thanks for sharing 😊
Hi Thank you for sharing this tutorial. Really help :)
keep going
thank u so much.. very helpful...
u save me thxxxxxxxx
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.
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 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: ruclips.net/video/xdvy2g712HU/видео.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
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 😅
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.
thanksssssss
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.
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!
helpful
so helpful, thank u for tutorial.