A short, hands-on tutorial by Jeremy Mura that shows how to import Adobe Illustrator (.ai) files into Adobe XD. The video covers preparing screens in Illustrator (artboards and layers), saving the .ai file, importing it into Adobe XD (via Import / Shift+Ctrl+I), editing grouped elements and text inside XD, ungrouping (Shift+Ctrl+G), and creating simple prototypes between artboards.
In this tutorial, I'll be showing you how to import an Illustrator file into Adobe xd. So in Illustrator you would have created your screens or your app or whatever your design is. Could be pretty much anything, even illustrations. I've got three different screens here. Each have its own artboard and they're on separate layers. So you can see I've got three layers here, one for the each screen. So home, Athens and Bucharest. And then I've put some IPO icons and some cool text here, and just a couple little icons here as well, which is really cool. So all you have to do is go to File Save as, and you want to save the travel app. So Travel app. I'll just say export and you want to click Save As. And in the Settings menu, all you have to do is just save it. You can save in older versions, but I'm just gonna keep it on the top version and you can leave all these other settings the same and press ok. So it's okay if you have things grouped up. So you can see if I click on these things, they can be grouped and they can all be live. They don't have to be expanded. It's totally fine. So now I'm gonna go into xd. I can click on the top menu and you want to go to Import. So you can click Shift Ctrl. I. I'm pretty sure if you click Open as well, that will work. Locate the file and I'm gonna double click the file. This will automatically import your screens into Adobe xd. It's really that simple. So now you can see that the artboard names are here on the top, so you want to make sure you name things correctly. You can see this screen has the Athens, but I can double click and change it to Home screen like that. I can also go to the left hand side and click on the artboards here. So if I click on the artboard on the screen, click that and you'll get the folder. I can click the folder and within that you can see, you can see all your grouped elements. So if I click on the group, you can see I have all these elements. I can open them up. I can also just go ahead and click on the screen. So if I double click, it should go within the groups. So because this is grouped, I can double click in that group and I double click again. It'll take me inside the group. So I can go in here and edit this text. Like that, really easy. I can, you know, click on and scale up and down the actual icons. I can ungroup things as well. So you can right click and press Ungroup. The shortcut is Shift Ctrl G. So the shortcuts are very similar to Illustrator as well. So you can see images get inside shapes, colors. See, there's an image here and I could press Ctrl Z. It's all inside of the screens. Exactly how you did it in Illustrator. And obviously you want to keep your files named and everything neat. But obviously for this tutorial, just want to keep it short. Once again, I can just click on Prototype and start prototyping some things. So maybe I want this to go to this screen and this. Let's just make this button go to this screen, right? So I can press Preview. Now if I click that should go there and click that should go to that screen. So that's how you import into Illustrator into Adobe xd. It's really easy, really simple and the both programs work really well together and I think they do a great job. Thanks guys for watching. Subscribe and like this video if you think it was helpful and I appreciate any comment for feedback for future videos. Hope you guys have an amazing day. Take it easy.
