XD can open Sketch files so that you can start prototyping right away. XD can also open Adobe Photoshop files for you to bring your designs created in Photoshop directly into XD. You can also open Adobe Illustrator files. Just go to File > Open and pick the file you want to convert into an XD document.
- We know that a lot of UX designers are doing work in Photoshop, Sketch, or Illustrator. And to help you jump into XD, you can now open Photoshop files, Sketch files, and Illustrator files in XD, so let's see that in action. So here I have a Google material design file and I'll choose to open that in Adobe XD CC. It brought a lot of the files here, a lot of the pieces here perfectly.
I would say it does 90% of the work, we're still fine-tuning this feature so stay tuned for updates. But it helps you with 90% of the work. One interesting thing here is that, that Photoshop file has 85 megabytes. If I go here and I choose to save as an XD document, with the same name and save, you can see that that same file goes from 85 megabytes to 1.5 megabytes.
So a lot smaller, a lot more precise. There's a lot of things that are not supported in XD yet, like blend modes, some specific things that only Photoshop does, and in that case, we're gonna flatten that portion to allow that to show here in XD. So it's gonna be flattened as a bitmap. Alright, now let's see how we can open a Sketch file in XD. Here I'm using the iOS UI kit that's hosted and maintained by Apple, and the same thing, I'm gonna right-click and choose to open in Adobe XD CC.
In here you see that the Sketch file had a lot of pages and that's all translated into one single canvass in XD. And then the page name goes up here. One thing that's also coming is, if you had colors in Sketch, all the colors are here in your color picker and if you had character styles, they come across this way, and if you had symbols, they come across here as well. So your character styles, your symbols, and your colors are transferred to the new XD document.
And then you can start prototyping right away. And the last thing is Illustrator. So we know a lot of designers like to use Illustrator for very precise and very complex icons, vectors. You can now open the Illustrator file right here and in this case I'm using the Microsoft one and you can see that everything came across correctly. And now that I have this content here, I can start using this UI elements into my projects.
So, you can transfer your Photoshop, Sketch, and Illustrator files. Just go to file, open, and pick your files. Then you can start prototyping right away. Next, let's see how you can access amazing UI kits, free UI kits, to power your design work.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins