How to export assets from Adobe XD in two easy steps
On first try Adobe Xd really fascinated me. As a designer who still uses Photoshop for UI design and never started with Sketch, this is a fresh breeze.
The interface is intuitive and there isn’t any learning curve for Adobe users. It’s lightweight and simple. The interactive prototype and video recording is awesome.
But what I got interested at the first try — which is a well known pain, is: How to export assets for developers? I mean, that’s why I don’t use Sketch. Most of the developers I worked with expect PSD files for delivery.
Here’s what I did:
- Create artboard for each icon/asset and turn off the artboard background fill so the icon is exported with transparent background. If you are using icon font make sure you convert to vector: Select all icons and go to Object / Path / Convert to Path
2. Now go to File / Export and export all artboards either as PNG files at 1x, 2x, 3x resolutions automatically or even better SVG files. This way you have each asset as a separate file which can be used in development.
(You can also export a single asset by selecting it, and again with File / Export which now exports only selected asset)
But there is a problem I have noticed: It adds a square background to the SVG file although the background fill from the artboard is removed. I hope this is a bug which Adobe will fix soon.
Thank you for reading, hope this article helps. If you have something to share about Adobe XD please leave a response below.
I’m a Product designer, check the side-projects I’ve made on Product Hunt and follow my updates on Twitter @ mightyalex.
2018 update: I’ve made UI Faces, a plugin for Adobe XD, which got supported by the Adobe Fund for Design: https://uifaces.co
