Exporting Assets for iOS & Android Apps

Topics covered in this Adobe XD tutorial:

Exporting for iOS apps, Exporting for Android apps

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to export graphics for use in iOS and Android apps.

Getting Started

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
2. Navigate into Desktop > Class Files > Adobe XD Class > App Design and double–click on Pulse App.xd to open it.
3. Zoom to 200% by hitting Cmd–2 (Mac) or Ctrl–2 (Windows).
4. Scroll to the top of the artboard and click on the search icon to select it.
5. Hold Shift and click on the shopping bag icon to add it to the selection.
6. If the Layers panel is not open, go to the bottom left of the window and click the  icon.

7. Notice the names of the two selected layers: search icon and shopping bag icon

   These layer names will be used for the exported file names.

Exporting for iOS Apps

1. Go to File > Export > Selected.
2. Windows users only, next to Export to click Choose Destination (or Change).
3. If you’re already in the App Design folder, go into the iOS Assets folder. (Otherwise, navigate to Desktop > Class Files > Adobe XD Class > App Design > iOS Assets.)
4. Windows users only, click Select Folder.

5. Set the following (Mac users: If you don’t see them, click the Options button):

   Format:	PNG
   Export Size:	Choose iOS from the menu.

6. Click Export.

   Before we look at the exported files, we want to do one more export. iOS developers can use PNGs (1x, 2x, and 3x sizes), or a single 1x sized PDF. Because PDF is a vector format, the different sizes are not necessary. The 1x, 2x, and 3x assets can be generated from the vector PDF. You should ask your app developer which format they prefer (PNG or PDF).

7. Let’s see how to export a PDF for iOS apps. Again go to File > Export > Selected.

   • Mac users: You should still be in the iOS Assets folder.
   • Windows users: Export to should still be set to the iOS Assets folder.

8. Set the following (Mac users: If you don’t see them, click the Options button):

   Format:	PDF
   Save selected assets as:	Multiple PDF Files

9. Click Export.
10. Let’s look at the final exported files. Switch to the Desktop (the Finder on Mac or Windows Explorer on Windows).
11. Navigate into Desktop > Class Files > Adobe XD Class > App Design > iOS Assets.

12. Notice we have the 6 PNG files (both icons were exported in 1x, 2x, and 3x sizes) as well as as a PDF for both icons.

    REMINDER: Ask your app developer which format they prefer (PNG or PDF) so you can save yourself some work and only export the format they want.

    TIP: Exporting as PDF can also be a nice way to get graphics into other apps, such as Adobe Illustrator.

13. Switch back to XD.

Exporting for Android Apps

1. Make sure the search icon and shopping bag icon are still selected.
2. Go to File > Export > Selected.
3. Windows users only, next to Export to click Change.
4. Navigate to Desktop > Class Files > Adobe XD Class > App Design > Android Assets.
5. Windows users only, click Select Folder.

6. Set the following (Mac users: If you don’t see them, click the Options button):

   Format:	PNG
   Export Size:	Choose Android from the menu.

7. Click Export.
8. Switch to the Desktop (the Finder on Mac or Windows Explorer on Windows).
9. Navigate into Desktop > Class Files > Adobe XD Class > App Design > Android Assets.
10. Notice the Android Assets folder contains six folders. Each folder contains the icons we exported in different sizes.
11. Switch back to XD.

12. Close the file. We didn’t make any changes to the file so there’s no need to save it.