From the course: Adobe XD for Designers

Creating a screen overlay - Adobe XD Tutorial

From the course: Adobe XD for Designers

Start my 1-month free trial Buy for my team

Creating a screen overlay

“

- [Instructor] Now, currently in this app, I don't have the ideal situation going on here because I have a lot of duplicate assets, right? So I have this main, and then I have this keyboard. The only difference is this keyboard, right? And yet I have to make this separate screen, is that really how it should work? That's how it's currently set up. We can see we click here, it's going to transition to this screen. It doesn't need to be that way. In fact, what we can do is we can change this Transition to Overlay, from Transition, make it an Overlay, so it will take whatever content is here on this art board and put it over the top. So that's great. So what that means is I can go to design and back to design I can get rid of this image after I unlock it, like that background image, right? And get rid of all of this stuff. Don't even need it. It's going to overlay over the top. In fact, it will overlay, right, it gives me how it will overlay, but what I can even do, is I can make this smaller. So that's what I'd like to do. Go could have this keyboard, let's move the keyboard up to the top, select this art board, by clicking on the title, shrinking it up like so. In fact, I'll just kind of move it out of the way, don't really need it taking up so much room. We'll put it right down there. We'll take this results, move it on over like that. So now when you click on this, I'll go into the prototype tab, it will move it up, it'll move it up to the top. No, I don't think so. We're going to move it up and it's going to move it to this position, okay. How is it going to transition it? Right over here. Move the keyboard on top of it. Don't have it dissolve, we'll have it slide up. And then when you click, it will transition to that screen. So that's the idea, we can see again that tap, that transition and the animation, all that stuff. So let's go ahead and play this, here we are. We click Search and that slides up. We can click and it's like we've searched on Colorado, so much easier to maintain. So think about doing this for your UI elements, any sort of pop-ups, make them an overlay interaction. So basically it's a separate art board where nothing is duplicated. Just makes your life easier, especially if you're dealing with mobile screens.

Contents