Learn how to export production-ready assets from Adobe XD to PNG, SVG, JPG, and PDF files.

You can share production-ready assets with developers for use in websites or mobile applications. You can export design assets from XD to PNG, SVG, JPG, and PDF formats, optimized for deployment on iOS, Android, or the web.

You can export specific assets or text, specific artboards, or all artboards in the project.

Export assets or artboards

  1. To export all artboards: Ensure that no artboard or asset is selected. You can click the pasteboard (gray area around the artboards) to deselect objects or artboards.

    To export specific assets or artboards: Select the asset or the artboard that you want to export. To select an artboard, click the artboard title, (Cmd/Ctrl + click) its background, or double-click its background. Alternatively, open the Layers panel and select the artboards you want to export.

    Note:

    To export multiple objects as a single asset, you must group the objects before you export them.

  2. On Mac, select File > Export. On Windows, click the Hamburger menu, and click Export

    If you have artboards selected in the Layers panel, right-click, and select Export.

    The Export Assets dialog box appears.

  3. Select a target platform (web, iOS, or Android), and the file format (PNG, SVG, JPG, or PDF).

    For more information on the export options, see:

  4. Specify the directory to save the output files.

  5. If prompted, specify the resolution at which the assets were designed. If you are not sure about the resolution, leave the setting to the default (1x).

  6. Click Export.

Export to PNG

When you export to PNG, XD exports all associated resolutions for that object. You need to choose the format you designed at to get the correct export sizes.

For example, if you designed at 1x, a 10 x 10 rectangle is exported at 10px x 10px, 20px x 20px, and 30px x30px. If you designed at 2x, a 10 x 10 rectangle is exported at 5px x 5px and 15px x 15px. 

When exporting assets as PNG, you also have to choose which platform you want them to be exported for - Design, Web, iOS, or Android.

Export options when you export as PNG
Export options when you export as PNG

Design

Design is the default option where your asset is exported to PNG at 1x resolution.

Web

Assets are exported at 1x and 2x resolutions.

iOS

iOS has three export sizes. Assets are exported at 1x, 2x, and 3x resolutions. 

The default artboard sizes for various iOS devices assume that you are designing at 1x, so if you’ve used the defaults, leave your export at 1x. However, you can opt to design at 2x too by doubling the width and height of your artboard.

Use the following infographic to understand how your design assets are exported for iOS when you design at 1x and 2x.

Export assets as PNG for iOS
Export assets as PNG for iOS

Android

Assets are optimized and exported for the following Android screen densities:

  • ldpi - Low density (75%)
  • mdpi - Medium density (100%)
  • hdpi - High density (150%)
  • xhdpi - Extra high density (200%)
  • xxhdpi - Extra extra high density (300%)
  • xxxhdpi - Extra extra extra high density (400%)

Use the following infographic to understand how your design assets are exported for Android when you design at different resolutions.

Export options when you export as PNG for Android
Export options when you export as PNG for Android

Export to SVG

When you export to SVG, you can choose to export them with embedded or linked images.

Export options when you export as SVG
Export options when you export as SVG

Embed

If an image is exported as an embedded image, the bitmap image is encoded into the SVG.

Link

If an image is exported as a linked image, a bitmap image is stored separately with a reference to it in the SVG file. 

Optimized (Minified)

Select Optimized (Minified) if you want to optimize your assets.

Export to JPG

When you export assets (such as photos) as JPG, you can set the quality level of the exported JPG according to your needs. Choose any of the percentage options in the Quality drop-down list, navigate to the destination folder, and click Export.

Export options when you export as JPG
Export options when you export as JPG

Export to PDF

When you export to PDF, you can choose to export them as a single PDF file or individual PDF files.

Export options when you export as PDF
Export options when you export as PDF

Single PDF file

You can select multiple artboards or assets, and export them as a single PDF file. Multiple artboards or assets are placed in separate pages and a single PDF is created.

Individual PDF files

You can select multiple artboards or assets, and export them as individual PDF files. Separate PDF files are created for each of the selected assets or artboards.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy