Adobe XD CC Tutorial: Real Estate Mobile Application Design

Adobe XD CC Tutorial: Real Estate Mobile Application Design


Hey! I’m Hunter from Skillthrive, and in this tutorial you’ll create this interactive mobile app in Adobe XD. Make sure you download the course files by becoming a free member on skillthrive.com. That way you can follow along with me in today’s tutorial. There’s a link in the description that will take you to a registration page, where you can join. So, with that said, let’s go ahead and jump into Adobe XD and get started on today’s tutorial. So, you can see that I added some styles here, in this Adobe XD file, already. So, for here, you can see just a couple of text styles that I have. So, I just used the Text tool, made it look a specific way that I want. And then, what I did is, I would right-click… So, let’s say, for instance, this test layer, I could right-click and say Add Character to Style Assets. And what that would do, if we come down here and click on this icon, it will add it here to this Character Styles. And I did the same thing here for these colors down here. So, let’s say, for instance, this purple I wanted to add up here to the colors, I could-right click and say Add Color to Assets. And then that color will appear up here. And if I ever want to use it, I can just refer back to this and click there, and I can change the color of that by just referring here to the colors I have in my Style Board. So, let’s just go ahead and talk about what’s going on down here. So, down here I have some icons I’m going to be using throughout this design. And I have this rectangle up here, which is actually a color that’s control-, or a square that is controlling the color of all these icons. So, let’s say, for instance, if I had this selected and I wanted to make all these icons blue, I could just click here, and I could change the color of all of these. Now, don’t worry, you know, I can still come in and change these colors individually, but this is a quick way to just, kind of, control… You know, if I wanted to change the color, I don’t have to go through them individually, it’ll change all instances of it. Unless I tell it specifically, “Hey, on this one, I don’t use the symbol. Use a specific color.” So, that’s a quick tip there. I’m just going to Command-Z to refer back to that color. And now let’s start adding, or actually, start creating our app. So, let’s come over and just hit A on our keyboard, to bring up the Artboard tool. And I’m going to click on this “iPhone 6/7/8 Plus”. Let’s just move it over. And now we can hit T, to bring up the Text tool. I’m going to click here and then type in “Filters”. And now, with this selected, I’m going to come over and click on this one here, to apply that style. And now I can just move this about 20 pixels from the corner here. Awesome! So, now let’s go ahead and hit R to bring up the Rectangle tool, and we’ll go ahead and just draw a rectangle out. Let’s do something like that. We can make it 374. And let’s go ahead and just turn off the Border, and on Fill, let’s go ahead and just add this one here and then drop this down to something like, let’s try 20, see what that looks like. All right, I think it looks good. And let’s go ahead and add a little bit of roundness here, to the edges. So, to do that, I can come over under Appearance, and because we want all of these to be the same roundness, I can select this icon and then just type in 2. Now, if I wanted these to be different roundness, I could come into this icon and actually set all four corners individually. But let’s go ahead and just select this one, because we want them all to be consistent. And let’s set the Height here to 40, really quick. I’m going to zoom in, hit T, type in “Search”. I’m going to select this text, make it this style, but then come back into Fill and set it to this color. Then I can just go ahead and move this about 10 pixels. Says it’s centered, but I’m going to move it up 1 pixel, so it’s 9 from the top. Then, what I can do is refer back to this X here, so, Command-C. I can paste it right here, and just move it onto this Search. It looks like the Search is a little too big. So, let’s go ahead and make it, let’s do like 30. And then that is 10 from the right, 7 from the top and bottom. And I think that looks good. Awesome! So, let’s go back to this View really quick, and let’s just select all three of these. I’m going to Command-G and type in “Search Bar”. Awesome! So, now let’s go ahead and add a, kind of, like a line, to break the search bar up from the next section. So, I’m going to hit L on my keyboard to bring up the Line tool. I’m going to click here on the edge of this artboard, hold Shift and then draw it out, to make a perfectly straight line. On this Border Color I can select, if I come back into this panel, I could just select this color here. Let’s actually drop this down to something like 20. There we go. Let’s move it about 20 pixels from that one. All right, it looks good. Now, let’s come over to Filter, I’m going to Command-C, then paste this here, bring it over. For this one, let’s say, we want it to say “Sort”. I’m going to hold Alt or Option and drag this out. Let’s type this one, and let’s say “Save Search”. Alt and Option again to duplicate that and then say “Map”. I’m going to move this about 51 pixels from the edge here. The Sort/Map, that is. And then move this one in the center. Cool! So, let’s go ahead and just select these and make sure that they’re centered to each other, by clicking on this button. They are. So, now what we can do is, just add some lines here to, kind of, break this up to, kind of, make them look like a separate section. So, again, I’m going to hit L on my keyboard to bring up the Line tool, click, hold Shift, drag it down, have it set to a Height of 20. Again, we can change the color here to this one and set the Opacity here to 20%. Then what we can do is select all these three, and we can say, “Hey, center those horizontally”, and this is going to be in the center of these two. So, then we can select this, hold Alt/Option, duplicate that, select the “Map, Save Search” and then this line, and then make sure that those are centered to each other as well. All right, so, now that we did that, let’s go ahead and just select these layers, come back into this View and then Command-G. We can call this something like “Sort Nav”. And let’s go and just line these up a little bit. There we go. I want to zoom out here, just to make sure that looks good. All right, I think it looks like a good spacing. And now what I’m going to do is go ahead and create a section here for the image. So, again, I’m going to hit R on my keyboard to bring up the Rectangle tool, draw out a rectangle here to something about, let’s do 220, 225. We can turn off the Border. And right now, you know, we want to put an image in here. And I included some of these images in the course files. So, let’s come into our course files here. Come down to “_img”, let’s do “_exterior”. And let’s go ahead and select this picture here. What I’m going to do, while this is still selected, this layer, I can come in and just drag it here. It’ll turn blue and I can release and that image is going to fit in automatically to that shape layer, which is a really cool feature here, that Adobe shifts with, that I think is really neat. Cool! So, now that we did that, let’s go ahead and make sure this is about the same distance. So, 10 pixels, there we go. And now, let’s go ahead and add, you know, a section down here that’s going to act like a card section. So, I’m going to hit R on my keyboard to create a new rectangle. And go to make sure that it’s on the edge to edge here, something like that. I’m going to turn off the Border and actually, now that I’m seeing this, I can see that the white is hard to see. So, let’s come to and select this artboard, and we can come over to this Fill here, and we can change that to this color here. Whoops! Make sure we’re on the right tool here. Here we go. And that, kind of, is this a little bit of an off-white. And we’ll make it, some of these elements a little easier to see here. All right, so, let’s zoom in and on this rectangle, we can just call this something like “Info Section”. And let’s start adding some elements here. So, the first thing I’m going to do is hit T on my keyboard to bring up the text tool. I’m going to click and then just type in some information here. So, let’s do “House”, two spaces. I’m going to do Option-8, to create a bullet, and then two spaces, and then continue just typing out some information here, for this house. Cool! So, once I’m done typing that out, I’m actually going to select this entire text layer and apply this style to it, right here. Awesome! So, I can just go ahead and position this somewhere about right here, for now. And then, what I’m going to do is go ahead and type in the price here. So, I’m going to hit T again. Let’s go ahead and type in a price here. I’m going to select this font and then select this one down here, the 21 Source Sans Bold. Awesome! I can move this down here for now. And now let’s go ahead and type in the address. So, again, T on my keyboard. And let’s go ahead and type in an address here. select that font, and then let’s go ahead and select this one here, this 18. Here we go. Actually, that’s a little too big. Let’s go ahead and select that, this 12 again. There we go. We can, kind of, just space these out, so they look good. Let’s do about 2 pixels from each other. Awesome! Then we can select all these group-, these text layers and Command-G to group them. And we can go and just name this group “House Info”. And let’s move it about 10 pixels from the left corner. And then 10 pixels from the bottom of this. Awesome! So, let’s go ahead and add a shadow to this card, down here, in order to give it some distance from the background. So, to do that, on this info section I’m going to come over to Shadow here. And on this Y and this B, or this Blur, I’m going to type in 1 and then 1. And then maybe add a little bit more blur, so 2. And this kind of gives it a little bit of separation here. I think that looks nice. And we can also see that… Let’s go ahead and just make it a little bigger. So, 10, it’s 11. Let’s take 1 off here. So, now these are, you know, 10 from the top, 10 from the bottom and then 10 from the left. So, it’s nice and balanced. So, now what we can do is just group all of this together. Command-G, let’s call this just “Estate Card”. And then what I can do is just hold Alt/Option to duplicate that. And we can move it down, and you’ll see that it’ll tell me that it’s 10 pixels from this other one. So, now what we can do is replace this image. So, let’s come back into our course files, select this image and just drag it into Adobe XD here, and we can start editing this information down here. Now, I think the spacing is a little wonky right now. So, what I’m going to do is just move this Search up about 10 pixels. And this Nav section in this line, I’m going to move up about 20 pixels. Then move it, I think, back down another 10. I think 20 looks good. And then move these up about 10. All right, I think it looks good. So, now let’s go ahead and just drag this. Click up here on this artboard and we can actually extend this a little bit. And on this one we can come in and just edit some of this information here. So, I’m going to speed through this, so you guys don’t have to watch this in real time. All right, so, now that we did that, there’s one more element here that I want to add to these estate cards, and that’s a little heart, to show the user that they can favorite that spot. So, let’s go ahead and just copy this heart icon, Command-C. Let’s go ahead and just zoom here to this corner. We can paste it. Let’s make sure it’s about 10 pixels from each edge. Let’s make sure that it’s also in this Estate Card, this one right here. Bringing the heart in, there we go. And now, I’m actually going to change the color of this. So, let’s come into the heart, we can expand this. And you can see here that we have that, that symbol that I was mentioning earlier. So, what we can do is right-click and then say “Ungroup Symbol”. And then this allows me to change the color independently, so I can just set it to white. So, we zoom out here. You can see that we have this really nice, white heart. Now, actually, this white heart could be hard to see, depending on which image you’re using for your design. So, I’m actually going to come through and add, you know, a subtle, you know, background here, like a darker background, in order for it to pop from whatever image is being used here. So, in order to create that darker heart, what I’m going to do is come into this heart shape layer that we have here, and I’m actually going to Command-C, Command-V to duplicate that. Let’s go ahead and name this bottom one, just “heart-filled”. I’m going to expand this grouping. I’m going to come into Mask. And let’s go ahead and set it changing, setting this to this Exclude Overlap. Let’s go ahead and select this Boolean operation, which is going to be to add it. And now, when we come into Color, we can select a color here, let’s do something like this one. And if I click out, you’ll see that now it has this nice, darker background. So, actually, let’s come back and make this just a little lighter, so it’s not as dark. Whoops! Come back into the Color and do that, there we go. Let’s do something like 40%, let’s see what that looks like. Cool! So, you can see that, which is a couple of changes that we made this stand out, depending of whatever background that we’re going to be using. So, let’s come in and actually select this heart here. So, Command-C, come down to this estate card, we can paste it here. Make sure that it’s in this one here, let’s go ahead and do that. Make sure that it’s 10 pixels. Awesome! Now, if we zoom out, you’ll see that both of these cards have an easy-to-see heart, that the user can use to like the image. So, the last thing I’m going to do here, for this specific artboard, is to create some, you know, an icon section down here, for the user to easily scroll the page. So, what I can do is click here and expand this and just give myself a little bit more room. And what I’m going to do is come back and select some of these icons. And let’s go ahead and just move this one about, let’s do 20 pixels from the bottom of this card. And now what I’m going to do, before I space these out, I’m actually going to add, like, this blue bar at the bottom, that’s going to show the user what section or what icon they’re actually on. So, to do that, I’m going to hit R on my keyboard to bring up the Rectangle tool. And let’s go ahead and draw a rectangle out, then set the Width here to 82. Now, I’m picking 82 because that’s the, the closest number that we can get, or whole number, to having, you know, five equal sections across this entire artboard. So, let’s do 82 and let’s set the Height here to something like 6. Let’s turn off the Border, and on Fill, let’s go ahead and select that nice blue color here. And let’s go ahead and actually just add this to our color palette here as well, so we don’t have to keep on going back to this View, if we need to. And then, we can, you know, move this to the bottom. Then we can use this to, kind of, just move it about 16 pixels. So, move it up to, there we go. And then let’s go and resize this artboard to fit. Awesome! Now we can use this section to actually center this icon. Here we go. And then we can use this same one, we can just move it over. Let’s Alt to duplicate that. I’m going to move it over to this far edge. Use this to center it as well. And we have this one 16 from that. So, let’s do about 16 pixels. Then what we can do is, kind of, just position these other icons somewhere like this. I’m actually going to delete this, a rectangle. And then we can select these and say, “Hey, reposition yourselves equally apart. And then go ahead and center yourself to each other.” And then we can move these about 15 pixels from this line. So, now if we zoom out, you’ll see really quick that we have this new icon section here, for this artboard. So, now that we did the first artboard, let’s go ahead and move on to the second artboard, which is going to give us some more details about a specific property. So, to do that, I’m actually just going to hit A on our keyboard, to bring up the Art tool. I’m going to click this iPhone 6/7/8 Plus again. And now what I’m going to do is, bring in an image up here, that’s going to, kind of, signify, you know, where this is actually located. Now, I actually had to create this image in Photoshop, because there are some things in Adobe XD that they don’t have yet, like, for instance, desaturating an image and adding blending modes and stuff like that. Stuff that Sketch does have, but I’m sure is soon to come to Adobe XD. So, in order to get around and get the look that I wanted, I actually had to create this in Photoshop. Now, if you come into the course files, you’ll see that I have this Photoshop file called “map-color.psd”. So, let’s go ahead and open this up. And if we come over and expand this grouping, you’ll see that we have this original image here. I added some Hue/Saturation, so, I just desaturated it, and then I added this Gradient, and then I changed this gradient to a Linear Burn with an Opacity of 80. Now, I could actually copy this directly from Photoshop and drop it into Sketch. So, let’s, let’s show you how to do that. So, let’s go ahead and just select this Mask. I’m going to Command-click to select everything here, make sure that I’m on this Color-Map grouping. And then I’m going to come over to Edit, and then I’m going to come over to Copy Merged. What that’s going to do, if i come back into Adobe XD, I can Command-V, and I’m going to be able to paste a bitmap of whatever I just had in Photoshop. Then I can just resize this to fit. Cool! So, now we took that from, you know, Photoshop and then brought it into Adobe XD, by doing Copy Merged. But remember, if you don’t have Photoshop, if you come into this “-img” here and then “_map”, you’ll see that I have this already exported for you. So, you can just drag that into Adobe XD. Awesome! So, now what I’m going to do is, I’m actually going to come in to this layer here. I’m going to Command-C to copy this image and just paste it in, here. And then I’m actually just going to resize it down a little bit. And, if you want, let’s go ahead and actually make it a little bigger. So, let’s actually add 20 to this. So, let’s do 94. And now it’s going to be 10 from each side. There we go, I think that looks a little better. And what I can do on this one as well, I can add a little bit of roundness to these edges. So, let’s do 2 pixels, it’s a really subtle roundness here, on those edges. And the next I’m going to do is hit E to bring up the Ellipse tool. And this is going to be, kind of, like a little tracker here, to, kind of, signify where this actual place is located. So, now what I’m going to do is come into Border, and I’m going to select this nice blue. Come into Fill, select the blue as well, but drop it down to something like 20%. Then I’m going to hit E and go back to my Ellipse, hold Shift to make a perfect circle here. Center that to this one, turn off the Border, come into Fill and then click on that blue to create, like, a little dot here. So, now what we can do is just select these layers, Command-G, and just call this, you know, “Tracker”, so we know what this is. And then position this where we want here, into our artboard. So, let’s do something like that. Awesome! So, now, let’s go ahead and come back into our icons down here. Let’s come into the Chevron, select it, Command-C. Come into our artboard here, and I’m going to zoom into this corner, Command-V to paste that in. And I actually want this Chevron to be white, so, again, we can expand this grouping. We say, “Hey, we don’t want you to be a symbol anymore”, and then come into here and select this to pure white. Then we can move it about 20 pixels from each corner. So, there we go. And that’s going to act like a Back button, for the user to go back to this artboard. Awesome! So, now that we did that, let’s go ahead and add some text down here, that’s going to signify some more details about this listing. So, let’s go ahead and hit T on our keyboard. Let’s start off with the price, so, let’s go ahead and type out the price here. Let’s select this, this font, come back into our Styles here, and let’s go and select this 31. There we go. And let’s go ahead and copy this address. We’ll come back into this, this artboard, hit T and then paste that in. Select this font, come back into our Styles and then select this Source Sans Pro Regular 18-pt. There we go. Then I can just go ahead and play around with the spacing a little bit, let’s do 4 pixels. You can set that about 20 from the left and then 20 from the bottom of this map. So, something like that, I think it looks good. Now, let’s go ahead and add some icons down here, to signify, you know, some different features that this place might have. So, to do that, we’re going to come back into our icons, like you could have guessed, and we can come in and copy the home, paste that. Let’s do the bed. I’m going to hold Shift here and just, kind of, select all of these, that we need. Command-C and then just paste those in. There we go. So, let’s go ahead and just move this first one, which will be the house. Let’s just move it underneath about 30 pixels from the bottom of this. Let’s move these out of the way for now. So, let’s go ahead and hit T on our keyboard and type something in, like “House”. I’m going to select this, and then let’s change it back to this Source Sans here. Let’s go ahead and change the color here to, like this one here. There we go. And we can move this about 10 pixels from the center of this home. We can group those together. Let’s go ahead and just name this “House”. And we’ll just repeat a similar process here, for the rest of these icons. But I’ll speed through that, so you guys don’t have to watch that in real time. So, once you go ahead and just, you know, create these icons, put some of the information, space them out about 30 pixels and then group these, we can go ahead and move on to the next section, which is just going to give some home details, which is, kind of, just like an extended text section. Now, the first thing I’m going to do, actually, is come over and come into this, this first artboard and then select this line here that we created. And I’m going to Command-C to copy that, come into this one here and then just paste that in. And then we can move that about, let’s do 30 pixels. There we go. And now what I’m going to do is hit T on my keyboard, I’m going to type in “Home Details”. I’m going to come into my Styles here, and then let’s set this to the 21. And then, let’s go ahead and move this 20 pixels from the left and then about 30 from the top. Actually, let’s go ahead and set it to 20. There we go. I’m going to hit T again. I’m going to just, kind of, click and drag to create a text box. And actually, I’m going to come in to the course files here, and under “_text”, if you open up this “filler-text”, you can just select that, Command-C. Come back into Adobe XD and then paste that in. And let’s actually make sure that, when we do this, we create a text box like this first, then paste it in. And then, what I’m going to do is just select all of this. And let’s go ahead and select this 16-pt and then change the the color here to, let’s do this one right here, this, this color that we’ve been using up here in this font as well. Let’s zoom out to, kind of, get an idea what that looks like. Now, that might be a little too light. I think the color that we used up here is this 70 all across. So, let’s, again, select this. Let’s try this one, which i think is the 70, yeah. All right, I think that looks better. It looks like it pops out a little nicer. So, let’s go ahead and just hit V and then move this about 30 pixels, or excuse me, 20 pixels from this Home Details and then about 20 pixels from the left. There we go. And then we can expand this to, kind of, just fill this area. And then we can expand the artboard to fit as well. Something like that. Awesome! So, that really just wraps up this artboard. Now, let’s go ahead and move on to the final artboard, which is an easy one, and then we’ll just add some interactive components here, and then wrap up this tutorial. So, now let’s go ahead and actually duplicate this artboard. So, I’m going to hold Alt/Option and drag out to duplicate this artboard. And then I’m actually going to duplicate it again. So, the reason I duplicated this one is because I want to come through and add some heart elements here, to show that, like, this one has, can be favorited as well. So, let’s come back into the first artboard here, select this heart, Command-C. Come into artboard 2, I’m going to zoom in to this corner here. And then I’m going to paste. Then move this about 10 pixels from this side as well. And then, what I can do is select this again, come into this one, paste it as well. And then I can paste it here as well. There we go. Cool! And now, on this one, let’s actually make, instead of it just having this white star, or this white heart, that hasn’t been favorited yet, let’s actually make it this, this red color here. So, let’s come back into this View, and we can expand this heart, come in and expand this color. And let’s actually set it here to this pink. And we can do the same. Let’s go ahead and add this color to our palette. Come back into this View here, come into “heart-filled” and then to “color” and set that to this pink as well. And then we have to make sure that we set the Opacity up to 100. So, now we get this nice, bright pink or red heart, that shows that the user favorited or saved this location. So, actually, let’s come in and select this new red heart. Let’s actually delete this one and then paste that red one back into this, this actual artboard. Cool! So, on this second one or this third one, all we want to do is change the heart. And then on this one, what we want to do is blur out the background and then show, you know, like, the images that the user can look at. So, to do that, I’m actually going to hit R on my keyboard, to bring up the Rectangle tool. And I’m actually going to create a rectangle that is the entire size here of this artboard. So, something like that. Then I’m going to turn off the Border here. And this is a really cool feature, but you can come down to Background Blur and turn that on, and then everything beneath that rectangle is blurred. So, the blur is a little intense. So, let’s turn it down to something like 5. And let’s, instead of bringing the brightness up, let’s actually bring it down just a little bit, let’s do -10. And right now it’s blurring everything beneath it. So, let’s actually come back into this Chevron, because we still want that visible, and bring it on top of that. And now you can see that that is now visible. So, let’s come back and rename this layer, just “Blur”, so we know what it is. There we go. And now let’s go hit R to create a new rectangle here, which is how I want to show the image. Let’s do something like that, let’s make it a little bigger, about 20 pixels. There we go. We turn off the Border, add a little bit of a Shadow there. I think 3 and 6, that looks good. And now let’s come back into our course files here; “_img”, let’s do “_interior”. On this one, we can go and just click this in. Kind of, you know, create this really cool photo gallery look. Let’s go ahead and move this about 30 pixels from this Chevron. And there we go. That wraps up, you know, creating the actual artboards. Now, let’s go through and actually add, and make this interactive within Adobe XD as well. So, to do that, it’s really easy. All you have to do is switch over to this new Prototype window. And what you can do is create links between the elements, in order to create those interactive components. So, let’s come into this card and let’s say, “Hey, when someone clicks on this card, let’s go to this page.” We want the Transition to be a Slide Left, and we want the Duration to be 0.4, easing, we can set that to Ease Out. So, now, if we come in and actually select this artboard and click on this Play button, you can see, once we click on that, this image, that it slides over into this new view. So, now, once we’re in this view, let’s go ahead and say, you know, this user clicks on this heart, and then this is going to come over to this one. And we actually, we don’t want to transition, we don’t want, we want none, we want it to instantly happen. Then, let’s say, for instance, when someone clicks on this image, they come over to this view, we want this to have a Transition of Dissolve. So, it, kind of, slowly transitions into this look. And now, let’s go ahead and set up these back arrows as well. So, we want this one to come over here. We want it to Slide Right. And we want this one to go back to the original one, Slide Right. And then, on this one, we want it to come back to the original one and Slide Right as well. So, let’s go ahead and just, after adding those components, let’s go and click on this. And then hit Play. So, click, favorite, let’s go ahead and view the gallery, let’s go back, and then let’s go back. There you go!

8 thoughts on “Adobe XD CC Tutorial: Real Estate Mobile Application Design

  1. Great vid! I subscribed and liked. More Xd tuts pls

  2. How can I download adobe for free ? Plz

  3. I lerned a lot from u dude 👍🏻

  4. excellent dude thanks

  5. Thank alot… Had to subscribe… Waiting for more

  6. How to put it on the iPhone template?

  7. Can't wait to make an app. So simple

  8. and how to export it?

Leave a Reply

Your email address will not be published. Required fields are marked *