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. The design assets can be exported from XD to PNG, SVG, JPG, and PDF, optimized for deployment on iOS, Android, or the web.

You can export specific assets or text, specific artboards, or all artboards in the project. If you are using XD on Mac, you can also export assets to other applications. For more information, see Third party integration.

Export design assets and artboards

  1. To export design assets 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 following export options are available:

    • Batch: Export assets that are marked using the Mark for Export option.
    • Selected: Export selected assets.
    • All Artboards: Export all the artboards in your design.

    To learn how to include assets in design specs, see Export assets from design specs

    Options to export assets and artboards

    Pastaba:

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

  2. 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:

  3. To save the output files, specify the directory.

  4. 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).

  5. Click Export.

Export design assets to PNG

  1. To export design assets as PNG on Mac, select File > Export. On Windows, click the Hamburger menu, and click Export

  2. Click the drop-down list next to the format option, and select PNG. XD exports all associated resolutions for that object.

  3. Select the platform you want them to be exported for - DesignWebiOS, or Android, and click Export.

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

Design 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 design assets to SVG

  1. To export design assets as PNG on Mac, select File > Export. On Windows, click the Hamburger menu, and click Export

  2. Click the drop-down list next to the format option, and select SVG.

  3. Set styling options, and save them as embedded or linked images.

    • Styling: Choose how visual styling information is stored in the SVG markup as Presentation Attributes or Internal CSS. The default styling for SVG is set to Presentation Attributes as it improves compatibility with common developer tools, such as Android Studio.
      • Presentation Attributes: Uses separate XML attributes for each individual style property on each SVG tag. This format is required to use SVG assets with Android Studio.
      • Internal CSS: Uses a single style tag with CSS classes and shares the styling settings between objects with same styles leading to smaller file sizes.

    Save images: You can save as embedded or linked images.

    • Embed: The bitmap image is encoded into the SVG file.
    • Link: The bitmap image is stored separately with a reference to the SVG file. 
    Export design assets to SVG
    Export design assets to SVG
  4. If you want to optimize your assets, select Optimize File Size (Minify) on Mac, or Optimized (Minified) against File size on Windows.

Export design assets to JPG

  1. To export design assets as PNG on Mac, select File > Export. On Windows, click the Hamburger menu, and click Export.

  2. Click the drop-down list next to the format option, and select JPG.

    Export design assets as JPG
    Export design assets as JPG
  3. When you export assets (such as photos) as JPG, you can set the quality level of the exported JPG accordingly. Choose any of the percentage options in the Quality drop-down list, and against Export for, choose Design or Web.

Export design assets to PDF

  1. To export design assets as PNG on Mac, select File > Export. On Windows, click the Hamburger menu, and click Export.

  2. Click the drop-down list next to the format option, and select PDF. You can choose to export them as a single PDF file or individual PDF files.

    Export design assets to PDF
    Export design assets to PDF
  3. 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.

  4. Then, click Export.

Work with third-party integration

You can bring your designs into other applications that integrate with XD: Zeplin, Avocode, Sympli (only on MAC), Kite Compositor, and Protopie. 

The section below provides a high-level overview of the workflow using the example of XD running on Mac with Zeplin.

The procedure works the same way on XD running on Windows.

Pastaba:

This procedure varies slightly depending on the application you are using. For more information, refer to your application's documentation:

  1. Select an artboard or layer in your XD file, and click File > Export > Zeplin.

    Exporting assets to Zeplin
    Exporting assets to Zeplin

    Pastaba:

    If you have multiple applications integrated with XD, the Export to keyboard shortcut (⌥⌘E) launches the last integration you used.

  2. In the dialog box that opens, click Import.

    To replace existing screens in Zeplin with the same name, select Replace screens with the same name. Zeplin adds it as a new version of that same screen, without losing your notes.

    The Import screen in Zeplin
    The Import screen in Zeplin

    The artboards are imported into Zeplin.

    The artboards in Zeplin
    The artboards in Zeplin

Extract assets for design specs

You can mark layers as assets for export and send them to developers as a design specs link. Developers can download all the vector assets as SVG, PNG, PDF, and bitmap assets as PNG and PDF.

For more information, see Extract assets for design specs.

If you are unable to see third-party applications in the File > Export option, see Unable to see supported third-party app in Export options.

If you are unable to export your file, see Why can't I import or export files in Adobe XD?

Šis darbas yra licencijuotas pagal licenciją „Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License“  „Twitter™“ ir „Facebook“ skelbimams „Creative Commons“ sąlygos netaikomos.

Teisiniai pranešimai   |   Privatumo internete politika