SVG is the vector format used by XD. In this video you will learn how to export Illustrator drawings using the Asset Export feature of Illustrator to create SVG images for placement in XD.
- [Narrator] When it comes to UX design, a lot of line art comes in as a Scalable Vector Graphic or an SVG graphic and these can be easily created in any drawing application that outputs vectors, but we use Illustrator, so let's take a look at how we can get stuff from Illustrator into XD. There are actually two ways of doing it. So let's get started and to get yourself started, open the Beijing.ai file found in your Illustrator folder in your chapter three download. And when it opens, you'll see the Chinese characters for Beijing.
So the first way of getting anything from Illustrator into XD is real simple. Just select what you want to put there, just like that. So I've marqueed it. I'm going to copy it to the clipboard, command+C or you can choose Edit, Copy, it doesn't matter, and when you come over to XD, just paste, comand+V or control+V and there we go. It's an SVG graphic. And then here's the really cool thing, notice each of these is able to be manipulated. Okay, so that's one way of doing it.
I guess I can just move that up there. Let's go back to Illustrator. I want to show you another way of doing it. And this way is actually very good if you've got tons of icons that you want to use or custom icons and they're all on an Illustrator document. So what you're going to do is you're just going to come up to Window, asset export, and the asset export dialogue box will open and you can see there is the asset there.
And how do you get it in there? Well I'm going to take it out of here just so you can see how all that works. You just select it and you just drag it in. Just drop it. See? It says asset two. And what you have to do here now is give it a name. So I'm just going to call it Beijing. And you notice you can output for iOS and Android, that's for bitmaps. We're not too concerned about that, we're more concerned with SVG, right there. And then to get it out, all you do is just select it, you notice that blue selection around it, the export button lights up, you click export, and it's going to ask you where to stick it.
I'm going to put it in the Illustrator folder, click choose, and then if I come over to XD, and we'll import it this time. I'm just going to go over the Illustrator folder, there it is, there's the SVG, click import and there it is again. So there are two ways of doing it. First way is to straight copy and paste between Illustrator and XD and the other way is to use the asset export dialogue box, which is somewhat new to Illustrator actually and export your SVG from here.
- 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.