Lessons

Lesson Info

How to Add Assets

Now I've got this out here and what we wanna do is we wanna start getting some things out here. I wanna first of all focus on getting raster content and vector content. We're gonna bring in file formats. We can bring in TIFF, JPEG, PNG, GIF, SVG if we want to. Right now, we can't bring in native Illustrator or native Photoshop files, but I'll show you how to do that. Now, we've got this out here and what I wanna do first is bring in a logo and an image. So, if you come up under File, you can import using Command + Shift + I rather, or Control + Shift + I. If I click on Import and go out to my Assets, I'm actually gonna grab something here. So, I'm gonna grab a logo. If you have a file, you can bring it in. I've actually got an SVG file that I saved from Illustrator that is the logo, so I'm gonna import that and it's gonna bring it in. Now, what it tends to do is it tends to put it right in the middle of the document if nothing is selected. So we could see it's right there. It's really ...

pretty small. I'm gonna actually drag that over here onto the artboard and I wanna zoom into it so I can see it. So, I'm gonna use my Option + Scroll wheel. You can use pinch zoom. You can do Command + Plus and Minus, all that. And since it's SVG, we can scale it. Now in here, you're gonna find that if you scale SVG, if you scale raster, that kind of thing, you don't have to hod any keys down. It's gonna do it proportionally automatically. And the reason why is because there's actually a little keep proportional lock over there. It's called lock aspect over to right in the property inspector. All right, I'm gonna zoom out a bit here. And I've got that out there. That looks pretty good. And you'll notice that if you drag stuff around, you'll actually see smart guides kicking in. That's pretty cool. All right, now, one thing I wanna mention about images, about content that you import or you place, they're embedded, okay? There is no linked connection kind of like InDesign. When you place it out there or import it rather, it's going to be embedded in the file. Now, what I'm gonna do next is we're gonna bring in an image file. So, I'm gonna move over here. I'm zooming out a little bit using Command + Plus, Minus, pinch zoom, however you do it. And over here on this artboard, we're gonna bring in a raster image. Now, to bring in images and content, you can also drag from your desktop if you wanna do that. So, what I'm gonna do, and this could take a little practice, but I'm gonna go out to my desktop and I'm gonna open up a folder where I've got some assets. Now, I'm gonna make sure that I can see that folder, I've got it there. I'm gonna toggle back over to XD. Now, what I'm doing is I'm using Command + Tab. You can also use Alt + Tab on Windows to tab between opened windows. I can then see the folder and XD. In this way, you can drag in a whole bunch of stuff if you select it. I just wanna pull in an image. So, what I wanna do here, I'm gonna grab an image called Place-OLDMill. This is a JPEG. Now, I wanna point something out here. You're gonna see this JPEG is actually 1125 by 633. Those are the pixel dimensions. I'm gonna drag it in and I'm gonna drop it over by that artboard over there. Just put it right over there and let go. When you place or import or drag in JPEGs, they are placed at half scale or half size. So, if you look over in the property inspector on the right, you're gonna see it's now 562 or whatever. That's half the scale or half the size. So, just know that going forward. It is also embedded in the XD file. We can replace it by dragging on top of it. I'll talk about that in a while. But all I wanna do right now is get that out there. You can see smart guides kicking in if I want to align it. And you'll notice that if I put it on the artboard and then I click away, the artboards will actually hide anything outside the edge of the artboard, which is great. That way, you can click on an object and still see what's there, but you can then drag and move it around. Now, we're gonna bring in some other content as well. I wanna show you how to bring in from Illustrator and Photoshop. So, I'm gonna go over to Illustrator first. We'll start that. So, I'm gonna switch over to Illustrator and I've got this Eiffel Tower, and what I wanna do is I wanna bring that in. So, I'm actually gonna click on that. Now, it's black right now. I could, actually, you guys, if we take from Illustrator and we copy and paste, which is what I'm about to do, we are actually copying and pasting it as SVG. It stays vector and it remains editable if it can. So, what I'm gonna do right now is I'm just gonna change the color of this to white just 'cause I think it's gonna look better. I wanted you to see it first. And from Illustrator, we can copy-paste. So, I'm just gonna copy. Also, just to mention it, from Illustrator, you can use the Asset Export Panel and save as SVG or whatever format you think is best to go over to XD. So, I'll go over to XD and I'm just gonna paste it in. I'm gonna make sure, actually, I'm gonna move over using the Spacebar. I'll click in the Home artboard that we had pasted in the artboard and paste it in there. There we go. Not too bad. Now, what I wanna do is I wanna actually make a little transparent so we can see through it. So, if you look on the right, almost any object in the property inspector, we can change the transparency on it. There we go, not too bad. If you place an image, you can transform and do all kinds of things by rotating, et cetera. If you move the cursor just off a corner, you can rotate and do something like that. That looks pretty good. Designing on the fly, it's fine. Now, if we wanna bring in Photoshop content, I'm gonna go over to Photoshop and show you how we can do that. So with Photoshop open, if you have a design file you're working on, we're either gonna copy and paste selected content using either Copy or Copy Merged commands to flatten everything out, or we can copy layers or we can actually export or save as SVG or whatever it needs to be. So, what I wanna do right now is I'm actually gonna click on this layer here and I'm gonna select all. That's all I'm gonna do. And if I go up to Edit, you'll see we have Copy and Copy Merged. Copy will copy the selected layer. Merged, Copy Merged rather, will flatten everything out and let you paste that in. So, I'm just gonna copy that. And one thing I do wanna mention here as far as Photoshop is concerned, if you want, you can also export however you do that. If you have, for instance, like this SVG content, this vector content right here, if I look at the group in the layers panel on the right over here in Photoshop, one of the easy ways to do that if I have an icon like this that I need to move to XD, I can right-click on that layer and just copy the SVG. That way, I could go over to XD and paste it in. So, I'm gonna go over to XD and I'm just gonna paste. So, I've got that image, there we go. Now, what I wanna do, you're gonna notice here that sometimes you get in a little bit of trouble 'cause it associates it with an artboard and it starts to grab and pull it in. I'm gonna use the Spacebar to move over and I'm gonna put this one up here and you'll notice that it's pretty big and I wanna associate it, there we go, associate with that artboard. So, what I'm gonna do is just grab the bottom point and make it smaller, for instance. And then I'll do something like this, make it a little bigger, that's fine. Something like that. That's good. We're designing as we go here, kinda working it. So, we got a lot of ways to actually bring in different types of content, different assets. If you work with Sketch, for instance, you can go in there and you can drag-drop right in here. The caveat to that, the thing you need to make sure of rather, is that you Make Exportable. If you have content, and I just wanna show you that if you plan on bringing in content from Sketch, I'm gonna open up a file that's just got some UI elements and I'm gonna go up here, I can go out and select, now, I'm in Sketch, I could select content, it could be a bunch of things, I have to make sure, if you look in the lower right corner here or wherever it is there, I'm gonna Make Exportable and make sure it's SVG. That way, if we drag-drop or copy-paste, it stays vector coming in to XD. So, I can just drag it in. I'm just gonna drag it in here, drop it in, and you know what? I'm actually gonna drag, I do this all the time, I'm gonna drag right from here in the left, the layers panel, I'm gonna make it a little easier, and let go, and I've got myself that vector content. You can see it right there. I'm actually gonna put that on the Home artboard. Now, I'm gonna show you how, we need the white version of this, but I'm gonna show you how we can also bring in assets from other UI kits. This is pretty great. If you come under File, come to Get UI Kits, now, there are a series of UI Kits that we can work with, for Apple iOS, for Google Materia, Microsoft Windows, that type of thing, they're not in the program. What you're gonna do is you're actually gonna go out and download them. So, if you're gonna go to the website, like Apple iOS, this is the Apple Developer site. You can also go and choose Wireframes, and I would totally check this out. This is actually an amazing wireframe kit. It's on Behance right now. And what you can do is download it, and it's got a lot of kind of pre-made elements that you can copy-paste or bring in to your design to start with. There's some great stuff in there, and it's got an app and a web design to work with too. And there are more UI kits. There's Apple Watch, all kinds of things you can get. If I go to Apple iOS, just to show you, what you're gonna do is it's actually gonna open up the browser, it's gonna open up the Apple Developer website, and you'll see for a lot of these, they actually have an XD file you can download. So, your job is to download that, unzip it, open it up, and copy and paste that content in. So, it's pretty easy to do, you guys. I already grabbed that. If you wanna try it, go ahead. Just click the download. It's gonna ask you to agree, Agree and download. It's just gonna pull it right down your machine as a ZIP file. Now, there is a font in there called San Francisco. This is the Apple San Francisco font. On Mac currently, I'm not sure if they've done it for Windows, but on Mac, you wanna install that San Francisco font. On Windows, right now you don't have to worry about it. You can just copy-paste content and bring it over, but you can do that pretty easily. That's a great way to work. It's got a ton of, look at the UI elements right there on my screen. It's got a ton of those. There are a lot of them out there. I don't think I actually have that, but I have the Wires one, you guys. There's actually the Wires coming under File, Get UI Kits, Wireframes, check all those out. There's some great things for starting points.