January 29, 2019

How to prepare individual assets for export in Adobe XD

This post is inspired by a brief discussion in the UX Course Slack channel. As part of the design handover, you may need to export assets from your design.  While the course material extensively explains how to achieve this with Sketch or InVision studio, the rest of the tools are up to you to figure out.

To combat that, here's a very quick and straightforward explanation of how to get your assets (and not just complete artboards (aka "screens")) out of Adobe XD.

Step 1

A sample screen: Layer menu shows three assets we'll be exporting

Give the objects (aka layers) names and group them appropriately, if necessary. In the example above we have 3 things we're interested in: two buttons and a background picture.

Step 2

This way you can mark multiple objects at the same time. If you want to mark just one object, you can hover over it and then click a little "export" icon, once it appears.

Now that your objects/layers are properly named and grouped, select them in the "Layers" menu and righ-click on your selection. Find and click on "Mark for Batch Export". This tells Adobe XD that you want these things exported.

Now go through each of your artboards and repeat steps 1 and 2 until you're done. 

Step 3

With all the necessary assets thusly marked for export, press Shift + Ctrl + E for Batch export. Follow on-screen prompts to select the necessary format and size (check the Activity requirements, as these may change) and enjoy your assets.

No comments:

Post a Comment