Make an APP version of your Adobe XD UX project

Hey there, in this video we're going to build the app version of Instructor HQ. We're going to build a simple onboarding system and then stylize our sign up system, then have a look at our Dashboard. As part of this as well, we'll look at logos and some of the pros and cons of using XD, PNGs, SVGs, gradients. There's a little bit of goodness at the beginning and then we're just going to build out the app up to this level. All right, let's go and do that now in XD.

First up, let's grab the Artboard tool, pick an iPhone. I'm just going to use the size 6 and 7. Bring it down here. End it up in between these pages, not a real problem but if you have the whole Artboard selected, 'Command 3' kind of gets you close. Then 'Command 1' gets you at least to 100%. Couple of things I want to do straight up, is this option here. This is going to be my App but this is going to be the onboarding. It's going to be like a little onboarding message that comes along so this will be our first one. And I want to change the background color to that F2 that I'm using. There he is there. I want to bring in a logo. And I want to show you logos because it is something, your probably 1 and 2.

So if I go to 'File', 'Import' you can see here, it won't bring in ai file natively yet. So what you can do is just open that same thing in Illustrator. Select it all, and copy it, and just paste it in, and most of the times, that works. It's not working for me at the moment because I'm using some complex gradients. So it's dropping the top one but it's doing it fine for the bottom chunk of gradient that I've got going. I have no idea why that's happening. So, if you know, leave it in the comments, I'd love to know why. But watch this, if I double click on it, see, it's got a Gradient Fill. You can see it there, it's got a Gradient Fill but for some reason it's not displaying. I'm not sure if I will be using gradients in the final version, gradients are…

They're nice, sometimes not, I'm not sure. But to get around that let's go into Illustrator, and save it as a PNG. There's a couple of ways to do it, you got 'File', 'Export', and 'Export As' will work. You can just pick PNG from the bottom there or there's an option in the Assets Panel, 'Asset Export'. You can just drag this whole thing in and then decide, I want it to be a PNG and that's a way to export it as well. You can see, it did in lots of pieces. You might have to group it first, so 'Group', then drag into the Assets panel, whichever method you're using you can now export a PNG. I'll export this and put it in your exercise file so you don't have to do it but just know there can be some complications. I think it's just gradients and SVGs that have the issues.

So you can bring in the option that I've made. It is in your 'Images', and it is called-- there's a PNG, a SVG, and an ai file, we want the PNG in this case. It's quite big, so I'm going to zoom out, and scale it down. I bet you this is something that won't be a problem in a little while just as at the moment. And add a big circle to the middle. I'm going to use that line. A liner around the outside, but I'm going to fill it with one of the colors. Which one? Not sure. I might have to toggle through between the different onboarding messages. I want to use one of these as an example, I want this one. Copy it. I want to kind of just give you an idea of what's actually happening in this app before they-- just a little onboarding. So this is how cool it is. There's going to be a little bit of a marketing message over here as well. Centered. Marketing message, something like that. And down the bottom here, I want there to be--

So whenever we're mocking it up, there's kind of a 'Next' and 'Back'. And little dots here that kind of show you where you are in this process. So what I want is two options. I've just pulled these from our Wireframes, you can see them here. Skip, Next, and these dots. I'm going to grab them. Originally, if you haven't seen this they'll pull from this UI kit for Google Material. So I'm just going to grab these, bring them through. Didn't actually copy them. They won't copy and paste if I got the Type tool selected. Grab the Black Arrow, and paste. Weird thing. So these bits of text now are going to be Roboto Bold. Back to 100%. I'm grabbing my green. And the reason I have these boxes in the background here is it's going to make them easy to click which we'll use later on. You're fine, you're fine. I don't want to make them that same color. You can't even see them, but they are clickable. Same with these dots, I'm going to go in. I've got to ungroup them. You, you, and you. So these two--

I'll actually just start with them all being green. And then we'll have washed out green for these two. So you know at the first dot. All right, easy. Duplicate this guy, I'm going to hold 'Alt' and drag it out. And this one's going to be 'Onboarding message#2'. And I'm going to pull some other data from here. And what I might do just to save time is I'm not going to change these for the moment. All I'm going to do is add the details because you don't want to watch me copy and paste text. So what I'm going to do is, you my friend are going to be-- I'm going to use the Eye Dropper tool to select you. Actually no I'm not, I'm just going to crank up the opacity because they are all actually the same color. So what is the opacity for this? '36'. '36'. And the other thing this one's going to need that the first one didn't, is a back arrow. This, you got here, you went forward and if you want to go back and check, it needs a little arrow. So we're going to pull that from our Wireframes as well, I'm going to--  

Okay, this is all grouped, so I'm going to ungroup it. I'll grab just these two pieces from here. Place them in, stick them. Make this guy the same color as the background. Often, if you zoom in, it's just easier to select individual objects. And this one's going to be a little green arrow. Duplicate it again. And this one's going to be the third option. This next part, I want to actually steal from the Wireframes because it had a really good option that I stole from the Google Material login screen. So I'm going to copy both of these. Now if you click both the names, holding 'Shift', it will select both of them, and we can bring in the whole Artboards. What we did previously is we were just bringing in elements from it. So I'm going to drag these guys so they all line up nicely. Select both of these guys, and here's my colors. These need to be in the same spot, unfortunately, they are different. I've kind of moved these into weird spaces here. So I want to make sure these are exactly in the same spot as the last place.

Nice way to do that is, instead of dragging and just copy them. So I'll click on this board, copy these guys. Actually I might group them first. 'Group'. Click on the Artboard. So you know you're on the right Artboard. Click him, the Black Arrow. Copy, so 'Edit', 'Copy'. Click on this, and go 'Paste', and it will put it exactly in the right place. Now I can go through and say, actually you need to be white. So I double clicked on it to get him into the group, or you can ungroup it. That looks too good. Now I'm going to copy him. Go to this one, paste, and it will go back as well. Nice little trick now, we've got to go through and change everything from Helvetica. So there's no fine change font. What you can do is a little sneaky trick. Say I want to change all of these blue guys, so I'm going to ungroup all of it. So I can actually select on this thing here. So it's blue, and it's the wrong font. So I want to change it in a big box. What I can do is add it as a Character Style. I'll say, here you go. Then I can go and edit that Character Style, watch this. And say, actually I want it to be black. Can you see, magic, it's updating them all. And I want it to be my Roboto. Or you might do it a different way, instead of editing it up here-- I wonder which one is he. He was this one here, this 14. He's transformed, the name pulls from the font. And because I changed the font, you can see, down here it is now down the bottom here. I don't want this one. I just used them to grab all of this, so I can just hit 'delete'. And nothing really changes, so, you right click, go to 'delete'. And it doesn't delete the option. So we're going to do the same for this one.

We're going to select them, make him a temporary style. Right click him, go to 'Edit', and say, you my friend are now Roboto. And you're going to be black, and you'll see even though they're not part of the style, it's pretty cool. So Roboto 10 point, if you want to keep it. I might keep this one now to work on my app. If you don't want it, you can just right click it and delete it. Same with this guy. Actually what I might do for images, 'Shift' click both of those and pick-- because I got a font that actually matches these two already. So no big drama. 'Instructor HQ'. What I will do for Instructor HQ is I'll switch it out for the logo. Logo, I've made a white version, in your images, there's one in there called 'Instructor logo version 2 white.png'. So we'll bring him in. And shrink him right down. Far too big. It will do, this guy. Copy him, selecting this guy, paste him. It goes in the right place actually before I paste him. Delete that. So all the fonts are updated, this Line Style needs to be updated. They're grouped, so ungroup them.

Actually I just want the boxes because I had this text selected as well. And in here, I want the border to be-- I'm using this color here for my lines. The background color for both of these apps are going to be my Fill color, my 'F2'. Same with this one, 2. Anything else needs changing, this stuff does. Personal Information, I'm just going to pick you. That's updated, I need you, you. This one's still repeating grids. The cool thing about this is if that-- because I ungrouped those other ones, this one's still repeating grids. You know it is, because, see this thing here, those like two little strange handles either side. Means I can keep dragging more options out. So it's kind of handy when they are still there and you can double click to go inside have them selected, and if I changed one of them, the darker green, you'll see they all change.

Anything else? This little guy, how close should he be? He's going to be the dark green, this one's going to be white. Ungroup it, in here a white button. So how's it looking? We're nearly there. You, go. You. I don't need you. Come along for the ride. So we're getting there. I want two more pages for this kind of mockup example prototype. Doesn't really matter, I'm going to start kind of from the beginning. I don't need any of this. So I just double clicked it, moved it, so we're going to go to Login. There's Sign Up and Login.

Next one I want is going to be the Dashboard. That's the main feature for this app. We kind of mocked it up before. Then what we do is bin everything. Background color, it's going to be that gray. And here's the other version, the Logo. Where are you, logos? Here's that one. It's actually just way too big. Steal him. From my Wireframe I want this option here. I'm just going to cover him. Can you see, if I didn't have that selected it just pastes it in the middle of my view port here. So right in the middle of the screen. But when I click on it, it pastes it kind of where I got it from. So I'm just going to go through and click on him. Ungroup him, go to the Fill. Give him that Fill. Actually there's obviously a little bit of a box in the background of this one. I'm going to zoom in. Ungroup it again. Grab these three fellows, and you are going to be that green option. And go up to Dashboard that I made. And grab an example—

Actually I'm going to grab them all except for these two because I want them to be part of my mobile app. I'm just going to stack them up over here. So I've copied and pasted them, and I'm going to start grouping some stuff. You three can be grouped, so that you can go underneath. Same distance. Copy, actually no, group them. And then bring these guys down. And then I'm going to select them all, and make them one big group. Kept them. And what I'm going to have to do for this specific app here is I'm going to have to make this super long so I'm going to paste it in here. Does it fit already? It does. Just handy.

There's a couple of things that this thing needs to do. First of all, I click the outside of the Name. Zoom out so that it goes down and you can see everything. And I want to make sure that this thing here is scrollable. So that when people-- because otherwise they just collapse it to the top here and we want it to be able to be scrollable in our prototype. And I want to keep making some other stuff but really I'm just getting into like making things, and you're not learning anything new. You'd probably get it up already by now. So we'll leave it there, we've got our apps. There's one thing I just noticed, this blue line. I'll go and do that once I've finished this video, and save it. Hopefully there was something in there, helpful for you. All right, let's get on to the next video.