March 29, 2024
Learn How to Export Assets in Adobe XD

How to Export Assets in Adobe XD

In this tutorial, we’re going to learn how to export assets in Adobe Experience Design CC (Adobe XD).

The Steps (1-3)

  1. Start with your finished design, presented on an artboard, ready to be exported.
  2. 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.
  3. 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).

Daniel White is a designer who loves to share his experience, and help aspiring creatives to develop their skills. For more videos like this, Subscribe to his Youtube channel. You can also find him on Twitter and Facebook.

2 Comments

  1. Lori Reply

    What software do you import the iOS elements into to create an app? Do all of the links transfer or do they have to be rebuilt?

    1. Dansky Post author Reply

      Hey Lori. The exported assets can be handed over to a developer, along with visuals for each screen, and with these combined they are then able to build the app in whichever development program they use (eg. XCode for iOS). To my knowledge, currently a developer would need to build the app from the ground up using the exported assets. Adobe XD is more about being able to rapidly create wire-frames/designs/prototypes to share and collaborate with other people on. Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *