By Dani Beaumont
As a designer, you know what you're looking for in a project. You know how to meet the requirements of your stakeholders and how to test the experience with your customers. What you might not know is the exact format your developer needs to take your design assets live. With the latest release of Adobe XD, your developer can now have direct control over the file format and resolution of each of the assets you've tagged for batch export. Let me show you what I mean.
I'm here in Adobe XD. My work is done I'm ready to hand it off to my developer by way of a Design Spec. Now, before I publish to Design Specs I want to come in and flag each of the assets that I want to be batch exported along with my publishing process. So I'm gonna come here with an XD and under View I'm gonna go ahead and open up the Layers panel. When I click on one of the items on the artboard, I can see it there in the Layers panel, the logo mobile. When I roll over that item, notice that I have three icons. The one to the left allows me to mark that particular item for batch export so I'll go ahead and check that off. And I'll do that for a number of the other elements in the design. I'd like to mark the shopping cart here my hamburger menu I don't even have to click on it in the design canvas if I know I want to export it. I can just access it here in the Layers panel. So I'll tag the Facebook icon, the Twitter icon, and Instagram icon. And I'll proceed to do that for all of the artboards that I'm actually sending over to Design Specs.
Once I've completed that process, I’m ready to publish the Design Spec. So on the upper left-hand corner here, I'll click on the Share icon and select Publish Design Specs. Notice that I have a new option that allows me to decide what I'm exporting for — this is where we're getting specific to the development environment. I can choose if it's a website and iOS device or Android. I'll go ahead and stick with web and I do want to include these 7 assets that I've tagged for batch export. From there, I'll go ahead and create a public link.
Once that's done I can copy the link to share with my developer. The developer will log in to a web browser so I'll click that browser link right now, which brings me into the Design Spec experience. So, as the developer now, I'm looking at all the artboards that have been tagged to be exported. Clicking on that first artboard takes me to the iOS layout. I know that the designer in this case flagged particular assets. What you'll notice on the right hand side is, in addition to the other specifications like screen details, colors, and character styles, I now have an asset section. I can expand or contract that section. I can come in and select an individual asset. Once I do so, based on how the designer tagged it, I can then go ahead and download that particular file in a format that's good for me: SVG PNG or PDF. For this particular vector element, if I'd like to, I can come in and bulk select the whole group of assets and download those all at one time. Notice that I continue to have control over how I want the individual file formats to be handled. I encourage you and your developer to give this new feature a try.
Share assets with development teams easily by marking assets and artboards for export with a click. In the layers panel in Adobe XD, assets, layers and artboards can be marked for export, and when sharing for development those assets can be made available to download with a click. This makes going from design to code easier than ever with all exported assets in one place, and no searching for missing files on a crowded desktop.
