Sketch 3, an application for Mac onlye, is very popular among UX designers. In this video learn how to export Sketch images and line art for placement in XD.
- [Instructor] An application that has gained a lot of traction within the UX design community is Sketch 3 from Bohemian Coding. This Mac only application is very flexible and it allows you to create various projects with multiple size artboards, and then just get them ready to go for mobile design and mobile output. And that's what we're going to look at in this exercise. How do we get our stuff from Sketch 3 into XD. So to get yourself started, open up the Xian file, that's located in your Sketch folder.
Which is found in your chapter three download. So the first thing we want to do is we want to get this image out, okay? Now, be aware of one thing before we start. Notice that this is the artboard size, okay? So that's the same size that we've been using in XD. The problem is is the iPhone 6 has twice as many pixels as a regular device, so that means that the images have to be two times bigger. And we're going to have to output them so that they fit right into our 375 by 667 screen in XD.
So here's how you do that. Select this image here, we'll just select the pit, and you come down here and you select Make Exportable, and this will open the Export dialogue box, or the Export panel. And if you've got a regular device, it's going to have 1x size, that'll be the size that you're looking at here. iPhone 6, you're going to need to do it twice as big, so you're going to need 2x. And for the more common, more modern iPhones, it's 3x, so we've got three sizes we've got to output for this image.
So to do that, what you do is you just come over to here, and you click on the plus sign. And you notice you got 1x, 2x, and 3x. And we want to output JPG images. So we're just going to change the format to JPG. And the suffix will be added to the file name, so if I select Export Pit, which is the file, it's going to ask me where do you want to save it, and I'm going to stick them in the Sketch folder. Click Export. And it's done. And if I pop over to that folder, you can see there they are.
There's the 1x, 2x, and 3x. Now let's see how all that works inside of XD. So I've got a blank document open here. iPhone 6/7. I'm going to import two of the files, well actually yeah I'll import the 1x and 2x versions. So I'm just going to go over to my finder here, and with the shift key held down I'm going to select the 1x and 2x versions and just drop them on the screen. And there's the 1x version.
And there's the 2x version. So you see what I'm talking about here. You could scale this up, but it would probably get fuzzy so you got to be aware of that sort of thing, and if you just let the software do the work, things are much more easier for you. Okay, we're going to go back to Sketch. I want to show you one more thing. We've got some SVG images right here. Okay you can see it, right here. And what we want to do is export our little like icon here. This is line art, so it's got to go out as SVG, so I'm going to make it exportable.
And I'm going to change the format to SVG. And then all I have to do again is click Export Like. Click save, it goes to the same folder that we had before, and if I pop back over to XD, and drag it in, there it is there. You can see there's the like image. So there you go. There's how you can bring your stuff into XD from Sketch.
It's not that hard to do. Just select the layer or the image that you want to export, and then just make it exportable, choose your resolution or your size, and then just click the export button.
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
Q: This course was updated on 11/29/2017. What changed?
A: New videos were added that cover the XD Assets panel, Experience Design symbols, Creative Cloud Libraries, and pinning comments.