Your clients will love you

Share for review and development from Adobe XD

 

What you’ll learn in this video

Now that you've created your first designs in Adobe XD and wired them up, it's time to share - but not just with friends and family, we also want to share prototypes and design specs with our developers and stakeholders.


 
xd-resources-dashboard-ui-299x169.png

Responsive Resize UI Kit

Grab the UI kit used in this video to follow along!

 

Design for every screen size

To help your clients understand how projects will look at various resolutions, let’s look at responsive resize in Adobe XD and how it can help you quickly transition your designs to fit the screen size you need.

 

+ VIEW TRANSCRIPT

Hey, everyone – I’m Howard Pinsky. Now that you’ve created your first designs in Adobe XD and wired them up, it’s time to share – but not just with friends and family, we also want to share prototypes and design specs with our developers and stakeholders. Let’s dive in.

Share for Review

Let’s face it, requesting feedback isn’t always simple, especially when multiple designs are involved. I can’t tell you how many hours I’ve spent saving individual files from Photoshop then emailing them all to clients. XD aims to make that process much simpler.

At the top right, you’ll find the share button, which will allow us to publish our prototypes for review and development. To start, we’ll focus on publishing a prototype with the hopes of getting feedback. Here, you can give your project a name, choose whether or not to allow comments – in this case we do – open in full screen, show hot spot hints, and for added security, you can require a password or even create a private link.

For now, we’ll keep it public, but only people with the link will be able to find it unless you post or embed it publicly. Once you’ve set all your options, hitting that big blue button at the bottom will start the publishing process, and once it’s good to go, three options will appear at the top. You can grab the embed code, copy the link, or open in a browser. Let’s open it up.

And this is what a published prototype looks like. Your first artboard will be front and center and additional ones can be viewed by clicking the arrows at the bottom. You can scroll to make sure everything looks good, and if they're wired up, you can interact with it right from here – and now that auto-animate is enabled on the web, animations render beautifully.

But one of the most important aspects of publishing your prototypes, is feedback. If you enabled comments, anyone with the link can jump in and provide suggestions, and if it’s something very specific, they can drop a pin to show you exactly where they’re referring to.

Putting on my Creative Director hat, I may want my designer to fix the navigation bar to the top of the page. I’ll drop a pin, then leave a constructive comment.

Back as the designer, I’ll see a notification pop up from my Creative Cloud desktop app, alerting me that a comment has been left. I can now jump in and quickly make those changes.

Share for Development

Great. Now that I’ve gotten approval from my Creative Director, I want to be able to offer up colors, character styles, dimensions, and assets to my developers, but first, we need to mark which layers and groups they’ll have access to.

With an artboard active, you’ll notice three icons beside each layer as I hover over top of them, giving you the ability to hide or unhide, lock or unlock, and mark for batch export. When you mark a layer or group, it’ll allow you to quickly export all marked assets in a single go, and just as importantly, it’ll also allow those with access to your published design specs to be able to download the assets they need.

On the home screen, I’ll make sure to mark the logo, profile icon, the various icons that are part of the side and top nav bars, and the map image down below.

Great – with our assets chosen, let’s first look at how they can be saved locally. Under the File > Export menu, you’ll find the Batch option, where we’re able to choose not only where they’re saved, but how they’re saved. With PNGs, you’re able to choose what the export is for, either Design, Web, iOS, or Android. Since this is a web project, I’ll select that, and at the direction of my developers, I’ll choose to export 2x versions, as well.

Now when I export, two different sizes will be available to me locally in the folder I chose.

At this point, I could send these to my developers, but offering them design specs would probably be more helpful. Up under the share menu, just like we were able to publish a prototype for review, we can also publish specs for development. I’ll start by giving it a name, then make sure my desired export options are available. Again, I’m designing for web, and I want to include the marked assets.

Once I create a link, I can either copy it to send around, or open it directly in my browser where my artboards will be displayed just like they are on my XD document – and clicking on any of them will display crucial information to the right. Screen details, our marked assets, the colors we used throughout this artboard, all character styles, and any targets that may be available.

While there are no fancy animations within design specs, you can still interact with the prototype. Holding down your shift key will highlight the clickable elements, and clicking on them, while still holding shift, will take you to the target. You can also navigate your artboards with the arrows at the bottom.

Back to our specs, hovering over any assets, colors, or character styles will highlight where they’re located or used on the artboard, and clicking on a color or character style will quickly copy either one to your clipboard.

For assets, individual elements can be selected, or multiple can be clicked for batch downloading – and once any are chosen, they can be downloaded at the bottom as either PNG, PDF, or SVG for vector elements.

Just like when viewing a prototype, comments can also be added to design specs, giving designers and their stakeholders a seamless work experience.

And that’ll wrap it up. Whether you’re already working with XD files, or are still designing in Photoshop, the sharing and feedback features within Adobe XD will help you and your stakeholders work seamlessly.