By Dani Beaumont
Quite often, the last step in designing a web or mobile app and Adobe XD is handing your work off to a developer. There are a number of ways to do that and with the latest version of Adobe XD we've made that process even easier. I'm working on my design here on XD and the next thing I want to do is indicate which elements in the design I want to export for use in the finished product. In general, the most common assets are bitmap images, icons and background patterns.
Now I always have the ability to come in and select an object here in the Layers panel and towards the right hand side of that object, click the icon that marks it for export. This means that when I export my content this image will be exported. One improvement to this process is whenever I import an Illustrator or Photoshop document with images, XD is going to automatically mark all of those images for export.
So if I pull down under file here to select Import and I select a Photoshop file that has two artboards on it, I'll go ahead and click Import. XD has gone in and imported the two artboards from that original Photoshop file. And I can see here towards the bottom it's also marked the 17 images that were included in those artboards as images marked for export. I can come on in and dismiss that message and if I want to click an individual element on one of the artboards, I can see in the Layers panel all of the images that have been marked for export.
A second improvement to this feature is any object on the design canvas can be marked for export by selecting the object and then clicking in the right menu. So if I move over here towards that original artboard that I was working on. So rather than having to come in and select an object in the Layers panel, I can always come on to the design canvas and then using the right menu, select mark for export.
Notice that I also have a keyboard command available to me Shift + Command + E on Mac or Shift + Control + E on Windows. Another way I can do that is to select an object on the design canvas and in the properties inspector there's now a tickbox to mark an object for export. Now let's say I've gone in and made a mess and I've marked a lot of images for export and I'm rather confused what I've done. I can always come in and pull that on Edit to select all so select all of the elements throughout my entire project. Notice in the Properties inspector I have what's known as a mixed state. This means some objects are marked for export and some are not. I can toggle through that mixed state, so I'll click once to select everything, then click a second time to deselect everything in the project... which pretty much gets me right back to that original state that I had before I started marking the assets.
I'm going to go ahead and undo that change so that I have that nice mixed state with some of my objects set for export. And what I want to do is go ahead and now export my work. To do that, I can pull down under File and select Export and go in and define which aspects of the export I'd like to implement. This is not a new feature. I also have the ability to pull down under Share and select Share for development. In this area, I can come in and indicate to my developer what is the type of destination I want to work with. I know this is a web design but I could also select iOS or Android. This allows my developer to come into each individual object and determine the file format and the resolution that's best for the development environment that they're working in.
Now these improvements are all available in the Adobe XD 17 release. I encourage you to give these new workflow optimisations a try.
Adobe XD provides control over which assets and layers should be shared for export in development mode. To save you time when importing images into your design, Adobe XD now marks elements imported from Photoshop and Illustrator for export, making it easier to share project elements for development. All you need to do is import an image or vector layer from Photoshop and Illustrator and the assets will automatically be marked for export in Adobe XD.
