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 master the critical skill of exporting graphics optimized for both iOS and Android applications. Understanding platform-specific export requirements is essential for delivering production-ready assets that meet developer expectations and ensure seamless app performance across devices.

Getting Started

1. In Adobe XD, go to File > Open from Your Computer or press Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
2. Navigate to Desktop > Class Files > Adobe XD Class > App Design and double-click Pulse App.xd to open it.
3. Set your zoom to 200% by pressing Cmd–2 (Mac) or Ctrl–2 (Windows) for optimal visibility during asset selection.
4. Scroll to the top of the artboard and click the search icon to select it.
5. Hold Shift and click the shopping bag icon to add it to your selection.
6. If the Layers panel isn't visible, click the icon in the bottom left of the window.

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

   These layer names will become your exported file names—a crucial organizational practice that helps developers quickly identify and implement assets in their projects.

Now that we have our assets selected, let's explore the platform-specific export workflows that ensure your designs translate perfectly into functional app interfaces.

Exporting for iOS Apps

1. Go to File > Export > Selected.
2. Windows users: Next to Export to, click Choose Destination (or Change).
3. Navigate to the iOS Assets folder within your App Design directory. (Full path: Desktop > Class Files > Adobe XD Class > App Design > iOS Assets)
4. Windows users: Click Select Folder to confirm your destination.

5. Configure the following export settings (Mac users: Click Options if these aren't visible):

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

6. Click Export.

   iOS developers work with two primary asset formats: PNG files (exported at 1x, 2x, and 3x resolutions for different device densities) or single 1x PDF files. Since PDF is vector-based, it eliminates the need for multiple resolution variants—the system automatically scales as needed. This approach reduces file bloat and simplifies asset management. Always consult with your development team about their preferred format before beginning your export workflow.

7. Let's explore the PDF export option for iOS. Return to File > Export > Selected.

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

8. Update your export settings (Mac users: Click Options if needed):

   Format:	PDF
   Save selected assets as:	Multiple PDF Files

9. Click Export.
10. Switch to your desktop file browser (Finder on Mac or File Explorer on Windows) to examine the exported assets.
11. Navigate to Desktop > Class Files > Adobe XD Class > App Design > iOS Assets.

12. You'll see six PNG files (both icons exported at 1x, 2x, and 3x resolutions) plus two PDF files—one for each icon.

    Professional Tip: Establish asset format preferences with your development team early in the project. This prevents redundant exports and streamlines your workflow. PDF exports also serve as excellent vector sources for other design applications like Adobe Illustrator, making them valuable for cross-platform design consistency.

13. Return to Adobe XD to continue with Android exports.

With iOS assets complete, let's tackle Android's different approach to asset density and organization.

Exporting for Android Apps

1. Ensure the search icon and shopping bag icon remain selected.
2. Go to File > Export > Selected.
3. Windows users: Click Change next to Export to.
4. Navigate to Desktop > Class Files > Adobe XD Class > App Design > Android Assets.
5. Windows users: Click Select Folder to confirm.

6. Configure these Android-specific export settings (Mac users: Click Options if necessary):

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

7. Click Export.
8. Switch to your desktop file browser to examine the Android export structure.
9. Navigate to Desktop > Class Files > Adobe XD Class > App Design > Android Assets.

10. Notice that the Android Assets folder contains six distinct folders, each containing your exported icons at different density specifications (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).

    This folder-based organization reflects Android's density-independent pixel (dp) system, where assets are automatically selected based on device screen density. This approach ensures your icons display crisply across Android's diverse ecosystem of screen sizes and resolutions.

11. Return to Adobe XD to complete the exercise.
12. Close the file. Since no modifications were made to the original design, saving isn't necessary.

You've now mastered the fundamental export workflows for both major mobile platforms. Understanding these platform-specific requirements positions you to deliver professional-grade assets that integrate seamlessly into development workflows, regardless of your target platform.