Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us…

Follow publication

Exporting assets from Adobe Xd

How to export assets from Adobe XD in two easy steps

Aleksandar Tasevski
Prototypr
Published in
3 min readMar 15, 2016

--

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:

  1. 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
Step 1: Creating Artboards

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.

Step 2: Exporting Artboards
Exported PNG assets at 1x, 2x and 3x
Exported SVG assets

(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.

SVG Exporting Bug

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

--

--

Responses (5)