By Dani Beaumont
It’s easier than ever to communicate your design intent and save your developer time navigating between prototypes and design specs with the new unified shared for development link. Let me show you what I mean.
I'm here in Adobe XD and I've got a prototype flow that I want to share with my developer. To do that, I click on share here in the upper right hand corner and then select Share for Development. I've already gone in and published this to save a bit of time — so I'll just come in here towards the link at the bottom and click it to open up the web browser. Here in the web browser, in the new design spec interface, I'm presented with a prototype mode. So as a developer, here I'd be able to come in and actually click through the experience and navigate individual artboards. I can advance through that prototype until I get to a specific artboard that, perhaps, I want some more developer details. For that, I can now come here towards the right-hand side and toggle over to the Developer mode. Notice that I have the ability now to click into individual items and take a look at any assets or colors that might be used in this particular artboard.
At any time I can toggle back to Prototype mode by just clicking on that icon once again. Here on the right hand side I'd like to mention one other feature improvement that developers have been asking for for some time, and that's specifications for a subset of text within a larger text container. I'm going to go ahead and advance to one more artboard here and then I'll go back into that Developer mode.
As I move down on the screen, you can see here I have a text container that has a whole lot of mixed text states. So I've got the words Yosemite Firefall that's bold. I've got a footnote here that links to a footnote item in the body text above. I've got underlined text and superscript text here. Towards the right-hand side. if I click once to select the text container, I can see in the Design Specs that I have a mixed state for the styles that are associated with that container. If I click a second time on the bold text, I can see exactly the attributes that I used to define the bold text. I can click on underline here and those attributes change to define the underline. If I click on superscript herem those attributes change as well.
This is a perfect example of how the XD team keeps listening to our customers, both designers and developers, and iterating on the process of building an immersive experience in the application. I encourage you to give these new capabilities a try.
When sharing prototypes and design specs with development teams, one single shared prototype link includes all the information the development team requires. When sharing from Adobe XD select the "Development" option to share a combined view with commenting, interaction and development specifications.
