How to create and use an Interactive Overlay in Figma

hey youtube it's will from wheel brett design uh today we're going to be looking at overlays and how to build interactive overlays in figma um there's a few ways to do it but there's some really nice built-in tools that you can use to actually achieve overlays and when i say overlays i'm meaning things like modals pop-ups that kind of thing um and i've got a few examples here essentially this is the first example i'm going to run through and this is the second one and the second one is probably the better option but i'm going to show you the first option first because i think this is what most people are doing if you're coming from software like sketch and things like that then you've probably been doing it this way but there's a really nice way in figma to be able to do modals and overlays and we'll look into that shortly so let's have a look at the first option so we've just got a really simple mock-up here this mock-up isn't something i've created i've actually gone to the community and i've downloaded this impact wireframe kit which is really cool um they've given it away for free loads of people like it make sure you like if you use it uh not sure what that did but um yeah so you can just search up here for impact or you can go for other lo-fi wi-framing tools um so that's low fidelity and yeah so that's what i'm using here so just thought i'd give them a quick shout out and not claim um that i did this work so we're just going to be using this these pre-made templates that are actually available in the example apps section um for this video tutorial right so we've got um some projects here and what we want to do is if you click on a project you're actually taken to this edit project model where you can edit your project and you can also delete your project here and this will bring up this little pop-up asking you if you're sure you want to delete it so how would we do this traditionally well we'd go in and we'd find this icon he's linked to here we do an on click whatever we want here let's just do instant for now and then we'd go through and do the same here do the same here and then here we would do a back because we want to cancel that and go back to this screen um and delete we're gonna leave delete for now because i created a screen to support this but deleting it would delete that project in theory so that's that and then we're gonna do the same for this and this is just to actually open our projects and same again same again so what we've got here we've got a really simple prototype here where we've got these different ui elements opening up different screens using interactive elements so let's open that prototype up so here we go we've got our uh screen here clicking in opens it as expected and deleting it again as expected so it looks great absolutely fine um and it works nicely but we have a better option and this is where overlays come in so you might have seen if i just select one of these in your actions here you've got to navigate to change to and none open overlay swap overlay close overlay back scroll to an open link so we're actually going to be focusing on these three and potentially this one as well so what i've got is i've got my screen here this is my actual ui screen i've got a frame here with essentially this model here but we don't have to have this whole screen behind and we've got another model here so what we're going to do is the same as before we're going to select this and we're going to drag it to this element here instead we're going to do open overlay and you see this has changed here and we've got a load of new settings here that we can play with so what we've got here is our overlay alignment and currently set centered but you can choose any of these and we've also got manual which is quite nice and if we click manual we get like a kind of ghostly version of this appearing and we can put this precisely where we want it and this isn't useful for this example but for example you had a kind of an overflow menu and you clicked it and you wanted to drop down to appear right next to that button that would be a perfect example of when to use this so i'm actually just going to select centered for this and you see it's just big because we know it's just going to center on the screen down here we've got clothes when clicking outside so if we were when this appears if you click anywhere outside you it will automatically close this model and that's kind of um expected behavior of ui um these days you don't have to do that and maybe you have a use case where that's not the best user experience but for the most case that is probably the best user experience it saves users having to carefully select the cancel they could just click out if they don't want to see that model pop up also we've got a add background behind overlay so that that's the actual overlay itself so by default we've got a black with 25 opacity and that will appear behind this overlaying the screen so that this model is the primary focus and everything else is knocked back a bit so let's just have a quick look at that before we move on here we go and i believe it was this one i clicked and as soon as i click it you'll see it will instantly appear with a bit of an overlay there we go so we can see this little kind of slightly knocked back um and if we click outside it will close perfect that's exactly what we wanted let's make that a little bit nicer let's go through and change the animation and let's make it a dissolve and we'll do a nice ease out dissolve so it starts instantly and then slowly eases out and we'll do it over 300 milliseconds as default so there we go it's just a little bit nicer i would argue that's a bit too slow and that would add a bit of friction to your user experience but for this example it's perfectly fine so we have done that that's what we want brilliant so what do we want we want to be able to close this so let's on the cancel you can see oh we've somehow already massively added it that's probably because i added it earlier but uh we got an on click and that will close the overlay perfect we actually want save to do the same thing because we haven't got anything to change it will just return to the screen for the purposes of this video so on click we want to go to close overlay like so brilliant so next we need to do the same for delete so on our let's just do that quickly make sure these all open that overlay and it has all that same behavior from this one overlay and before i move on to the next one just just to explain why this is better than this option up here so you could have this modal appear on pretty much any screen in your app say you've designed other other pages in your design where you can also access this model instead of having to do a single screen for every single one you could just have this one element here and you could link to it and that would use this so you won't have to create it once it's a big time saver it also means it's much easier to come in and revive your designs later and you've got all the access to all of this cool stuff here so let me catch my breath and we're doing the same with delete so like before i'm going to drag that over to this frame we're going to select open overlay and again and again perfect so we've got the exact same settings as before or we did i expected we did but we don't so i'm just going to add those in now cancel we've got a close on there already um we're not going to do anything with delete right now so let's have a look at that and then there's one more thing i'd quite like to do so on delete there we go we've got really nice [Music] really nice little interaction there and we're not having to create multiple screens and it's a big time saver okay so that's everything for overlays um i hope that was really helpful and what we'll do in a future video is we will look at some of these other options um perhaps we'll do back scroll to open link and we'll do a bit more of a deep dive on interaction basics so thanks for watching if you enjoyed the video let me know in the comments below make sure you like and subscribe also drop a message in the comments below letting me know what you would like to see in a future video it really helps me come up with ideas and create these tutorials for you as always these are free so please spread the word the idea is to build this channel as big as possible to reach as many people as possible and do a knowledge share and improve design as general so yeah thanks for watching and i'll see you in the next video

Channel: Will Brett Design

Views: 417

Keywords: How to create an Interactive Overlay in Figma, figma, figma design, figma tutorial, how to, how to figma, figma how to, UI design, ui, ux, ux design, user interface, user interface design, product design, digital product design, design course, free ui design course, will brett-atkin, will brett design, william brett-atkin, figma overlay, figma overlays, overlays, ui overlays, interactive overlays, interactive overlay, figma modal, modal, ui modal, Ui design

Id: 46ojZzXP_N4

Length: 10min 26sec (626 seconds)

Published: Thu Nov 18 2021