In this tutorial, we’re going to learn how to export assets in Adobe Experience Design CC (Adobe XD).
The Steps (1-3)
- Start with your finished design, presented on an artboard, ready to be exported.
- Simply use your mouse to drag over and select the elements that you wish to export, and then go to File > Export… to export the assets that make up your design.
- You can select between Web, iOS and Android, depending on your site/app design. You can also specify the size that your site/app has been created at (1x, 2x, 3x), and it will create the other versions for you at the correct sizes.
Additional Notes
- You can export in both PNG and SVG formats. PNG format is raster based, and SVG is vector based. SVG files are great with the majority of new devices nowadays displaying high-definition content, and ensure that an object is sharp in terms of quality and visual fidelity, and doesn’t pixelate like raster-based graphics.
- You can export the whole screen as an individual jpeg by either clicking on the artboard name (located above the artboard). Alternatively, select nothing, and Adobe XD will export individual versions of all the artboards within the document.
- You can also export individual assets (eg. a button), by simply clicking that one object individually, and then exporting the same way that we did in Step 2.
- If you group multiple objects together, Adobe XD will export the group as one object/file, rather than the individual objects that make up that group.
Download Adobe Experience Design CC (Adobe XD).