Artwork by Gleren Meneghin
L
earn how to publish an interactive prototype, gather feedback, and iterate on a design. In this introductory tutorial with Dani Beaumont, you’ll understand the variety of ways you and your stakeholders can interact throughout the design to development process.
This tutorial guides you through the tools and features you need to share your work with stakeholders.
When you're designing an interface, the sooner you put your concept in the hands of your stakeholders, the better off you'll be. In this tutorial, I'll show you how you can publish an interactive prototype, gather feedback, and then iterate on your design. I'll also show you a variety of ways to export your finished work or hand it off to the development process. I'll be leveraging some of the skills from the other Get Started with Adobe XD tutorials. If you haven't watched those already, you might want to do so, although it's not required. If you want to follow along with me during this video tutorial, you'll want to make sure you have the XD collaboration practice file open. You can find a link to that in the description area for the video.
With those housekeeping items out of the way, let's go ahead and get started. We'll begin with the process of publishing your first prototype to the web.
Step 01: Publish a prototype.
Publish a prototype to the web for your stakeholders to review.
In this first step, let's take a look at how you can publish your prototype to the web. If you're following along with me, you'll want to have Step 01: Publish a prototype in the collaboration practice file visible on your design canvas. You don't need to have the Layers panel or the Libraries panel open. I'm in Prototype mode right now and you can see that here in the modes on the upper left-hand side. You can switch there if you'd like to. Here on the right-hand side, I have eight artboards. I want to use all of these artboards throughout this tutorial. So, let me give you a little bit of the back story for how you might use them with your stakeholders as you collaborate. In this set of four artboards, what I've done is designed an onboarding tutorial experience. So the idea is, if a user comes to the landing page and isn't sure how to navigate the site, after about 3 seconds, this will automatically transition to the set of three artboards where the Auto-Animate transition goes between each of the tiles, and gives them guidance for how to navigate the site. At any time, they can come in and skip the tutorial. For the most part, I'm leveraging a lot of the skills I showed you in some of the earlier tutorials, along with a few more bells and whistles.
So, let's go ahead and take a look at this flow so we're familiar with it. For that, in Prototype mode, I'm going to click on the first artboard in the sequence and then in the upper right-hand corner, I'm going to bring up the Desktop Preview window. Here in that Desktop Preview window, I have the first artboard that I designed. Now, after about 3 seconds, if the user doesn't click to start shopping the collection, it does a Time transition to my tutorial. We're using Auto-Animate and it's now transitioning between each of those tiles to give the user more information. Now, I set the time pretty fast so that you could understand what I've done here. But you could slow it down if the user was actually reading these cards. At any time, the user can step out of the Onboarding Tutorial, by clicking on the Skip Tutorial, which takes them into the main workflow.
So, let's assume for a moment, I want to test this out first with my client to make sure that I've actually designed the experience that they wanted. I'll go ahead and close out the Desktop Preview. Next thing is, here in Prototype mode, I want to let XD know which of the artboards on my canvas I want to publish up. I can indicate that by coming to the first artboard in the flow, this Landing artboard. Notice to the left, there's a greyed-out icon. It's actually a House icon and if I click it, it'll become blue. Above that, I now have the ability to assign a label to the flow that I've just clicked on. Now, the way this works is, any artboard that's linked to this artboard that has the Home screen is going to be considered part of the flow. And if I zoom out a bit, you can see that all eight artboards, in one way or another, are linked to that first artboard. I'll go ahead and give this a name so I remember which flow I was looking at. And we'll call this Onboarding Tutorial.
Now that I have that named, I'm ready to publish it up to the web to show to my client. What I'll do is, come here to the upper left-hand side of the application and click on the Share mode. Like the difference between Design and Prototype, the UI stays pretty much the same. Here on the right-hand side in the Properties Inspector, I get specific options that allow me to share this prototype in different ways. So I can see on the canvas, all of the artboards that are linked to that flow. Notice that these artboards here on the left weren't linked, so they're not included. This is a great way for you to make sure that you're publishing just the artboards that you want if you have a rather large site. I'll come here under the Link Settings and I'm going to go ahead and stick with the name that I defined, Onboarding Tutorial, so that's based on the flow that I defined here.
In the View Setting drop-down, there are lots of options. And you're welcome to explore them by kind of clicking on the info, this Eye button as you change out the options in the drop-down. For now, I want to go with a Design Review. So I'm going to stick with that default. Under Link Access I can control this so that anyone that gets the URL can look at it, let's say, I put it on a public website and I want to share it broadly. I can limit it to only invited people, so that can be people that have Adobe IDs that I invite by their Adobe ID email. If you've got a client that doesn't license any Adobe products, they can create a free Adobe ID that they can use to view your prototypes -- they don't need to license the Adobe software. Anyone with a password would basically just put a password on the front door. In that case, I share the link freely and make sure that they enter the password in order to see that prototype. I'm going to stick with Anyone with the link for now, and I'll go ahead and create that link. XD is going to go through, gather those artboards, and publish it to a website. When the work is done, I get an indication of when the last time was that I published that link. I can see the URL a bit here. Notice to the right, I can copy that link to the clipboard. If I want to embed this prototype on a website of my own, I can click on the link here on the right which gives me embed code to embed it into a web page and that fully interactive prototype will appear on the page. Pretty handy, depending on what you're looking to do.
In Step 02, let's jump into a web browser and take a look at this prototype experience.
Step 02: Gather stakeholder feedback.
Gather feedback from stakeholders, track comments, then publish updates to your prototype.
In this step, let's take a look at what it's like to gather stakeholder feedback in a prototype using Adobe XD. Here in the Share mode I'm going to go ahead and click on the link that was created after I published the prototype. It's going to open up a web browser and bring the prototype up for me.
Now, as you remember, the onboarding screens of that initial prototype automatically transition from one artboard to another, so my client can see that experience, even though I'm in a web browser. Here on the right-hand side, the client has the ability to come in and add specific comments against the design. So what they first might want to do is, actually try to interact with the design. Notice that, as I click around, I can include hints with the prototype that let my stakeholders know where they can navigate on the design. So the blue indicates click areas. I can suppress this if, let's say, I'm doing a usability study and I want to figure out if my users can determine how the design actually works.
For now, my client has the ability to come on in and skip that onboarding tutorial and start to interact with that second set of artboards and see what that experience is like. At any time, if they want to get more of a bird's eye view of all of the content in the design, they can click here in the upper left-hand corner on this Grid icon. This brings up all the artboards that are included with the prototype. Clicking towards the bottom on any one of those on this little Org icon here, I can see any screens that are linked to that primary screen. I can always jump back to the screen by clicking on the thumbnail, which takes me back into the flow. As my client continues to evaluate and look at this content... let's say they want to start giving me some feedback. What they can do is, navigate in the web interface here to one of those artboards. And notice on the right-hand side, I have a Commenting panel here. I can close it if I'd like, but when I open it up, my client can come in and place a pin on the design, let's say right here, and add a comment.
So they've got a comment for me. When they hit the Submit button, that comment is sent to me by way of email. It's also sent as a notification in the Creative Cloud desktop app. Clicking on that notification opens up a web browser for me, takes me right back to the artboard where I got that comment, and lets me see the comment. Now as it stands, I'm talking to myself here. So I don't want to be confusing. But I could reply to that comment. I can also mark it as resolved, if it's something I've updated and republished the prototype. It'll retain the comments as part of the history of this commenting workflow, but I can update the design and refresh the same URL without having to start all over again, in essence. I'll come into just another artboard or two and add just one or two more comments. Let's say this lovely chair here. And I'll submit that second comment.
Let's move on to the next step where we focus on what you can do as a designer, once your work has been signed off and you're ready to export it to the development process.
Step 03: Export your design.
Control which images and vector content is exported along with resolution and file formats.
Okay, let's go ahead and focus on what you can do in XD, once your design is complete, to start to prepare it to hand off to the development process, whatever that process is. If you're following along with me, we are here in Step 03. What I want to do is, go ahead and step out of Share mode. I want to go back to, let's say, Design mode. So I'll bring that up and we'll take a look at the artboards that we have, these eight artboards that are part of our current design.
So when I'm finished with my work, I have some choices around how I can hand that work off. One is just, as a designer, exporting my content. So I can come in and select either all of the content on the design canvas or some of the artboards. I'll go ahead, just for an example, and select these four artboards here. When I pull down under File, I can select Export. And notice under Export, I have some options. I can batch process a number of XD files. I can only export what I have selected, so from the four artboards I'm looking at here. If I go ahead and select that, I have a dialog that gives me some good options here. I've created an export folder on my hard drive of my computer. And from here, I can come in and start to determine how I want my content to be exported. And this really relates to the type of development environment that you're going to work in.
So, for this design, it's a website that I've been designing and I've been working on the mobile layouts. What I'd probably do is, come on in and export for the web. Other ways I might want to work... Let's say that I'm doing a presentation for my client and I've laid it out in a layout program, like InDesign. What I want to do is have complete artboards that I can share with the client as I storyboard my work or do a specification document, for example, for the developers. In that case, I can again come in and select some artboards and then under File here, select Export. But this time, I'll go ahead and export what I have selected and I'll do it as a PDF format. When I select that, I can come in and create a single PDF document that has thumbnails or pages for each artboard. Or I can save it out as multiple PDF files. For this example, I'll go ahead and select multiple PDF files and then I'll click the Export button. And here within the folder, I can see the individual PNG files that I saved or alternatively, the PDF documents.
Let's move on to the final step of this tutorial where I show you more of a designer to developer handoff using design specs.
Step 04: Review design specs.
Explore the specifications available to developers when you publish design specs.
If you're following along with me, we're in Step 04 of the collaboration tutorial and we're going to focus now on the designer to developer workflow. I'm back here in the collaboration practice file, and I'm still in Share mode. If you remember, in Step 2, we published a prototype by clicking on this first artboard and defining it as Home. It then selected all of the artboards that were attached to that first artboard and published it up as a prototype. Let's assume for a moment, I worked with my client and we decided we don't need the Onboarding Tutorial. So, as I hand off my content to my developer, I just want to hand them these four artboards here towards the bottom. XD supports multiple workflows and multiple prototypes or design specs within the Share mode. So what I have the ability to do is, come over to Prototype, I'm going to click here in the modes and switch to Prototype mode. I've already defined this as a flow and I want to leave that alone for a moment, but I want to find a second flow that really just starts at the official front door of the website.
So for that, here in Prototype mode, I'm going to click on the Landing Stakeholder artboard. Notice that, and I'll zoom back out so you can have context here, notice that as I do so, there's that little Home icon to the left-hand side, much littler now that I zoomed out. If I click and release on it, XD allows me to define a second flow. So I'll come in and this one's called Onboarding Tutorial. We'll go ahead and name this one Landing Page and I'll hit Return. A curious thing happens then... that landing page, if I press and drag on it, notice that it's only grabbing or selecting all of the artboards that are linked to this artboard outwards. So, although these artboards are driving to this page, they are not linked from that artboard back up. So when I define my first flow, I can press and drag it. It's going to take all of the artboards and publish them. I can define a second flow with a different first page in that flow, and decide that only some of those artboards, shared artboards in fact, but only some of the artboards need to be published as part of the second flow that I'm about to work on.
So now that I have that set, what I want to do is come in and make sure that I define which images I want the developer to work with. So I'm going to go ahead and switch over to Design mode again. And let's just look at this set of four artboards that are here. When you import images into XD, we assume you're going to want to output those and export them. So, by default, any time you place an image into XD, it's going to be marked for export. If you want to clean up and just be organized about your project, one thing you can do is, come on in and select everything on the design canvas. So if I pull down on Edit to Select All. And here in the Properties Inspector, I can come in and uncheck the Mark for Export checkbox. That's going to make sure that nothing is marked for export.
From there, I can come to individual images that I know I want exported. Let's say I want this couch here. I'll come on in to select it. I can mark it for export in a couple of different ways. With it selected, I can come to the Properties Inspector and check the box here. I can also right-click and in the menu, select Mark for Export. Additionally, I can come over to the Layers panel and in the Layers panel for that particular layer, I can mark it for export here as well. So, I'm just going to come through and mark some of these images for export so that we can see what it's like for the developer to consume them.
Let's assume I'm all set for that and I'm ready to now hand off to my developer this set of artboards. As we know, we already went into Share mode and we defined that Landing Page flow. That's the one that I'd like to publish to my developer. So, I'm going to click on it to make sure it's active. Notice that everything else grays out here in Share mode. It's letting me know: Hey, Dani, you're only going to export these four artboards because they're the only ones that are associated with the Landing Page flow. I can change my mind and jump to another flow if I'd like, but I want to go with that Landing Page flow.
Here in the Properties Inspector for Share mode, under Link Settings, I like the name that I gave it. That's fine. Under View Settings, this time I'm going to select Development. I'm going to go ahead and export... not for iOS, because remember, this is a website, it's optimized for the web. So I'll select the Web. I can choose to include any of those assets that I marked for export. So I'll go ahead and check that box. And then under Link Access, again, I'm not going to bother with a password for now. I'll just go ahead and create that link.
Once that publishing is done, I can come in and share that with my developer. So I can copy this to the clipboard by clicking that Link icon. I do want to mention here towards the top, notice in the Link drop-down. I have two different flows that I've defined. There's the Onboarding Tutorial that I gave to my stakeholder, my client. And then there's this Landing Page flow that I'm giving to my developer. I can continue to have two different flows, two different processes going on. I can have multiple flows and processes and I can see them all here. I can go in and republish to either of these links with updates. I can also choose to create a new link so that I, in essence, archive any of the older versions for record-keeping purposes, let's say. For now, I'll stick with Landing Page. This is for my developer, so that's good. I'm going to then come in and just click that link and bring it up in a web browser.
Now the developer experience here is going to look pretty similar to what I just had for the prototype as a stakeholder. There's some subtle differences. What you want to assume is that, when I publish for Development, it has everything that a prototype has plus a whole lot of developer specifications. So my developer here has the ability to go on in and close out the commenting window if they'd like. They can jump up to that bird's eye grid view. They can see each artboard, see artboards that are linked to it. They can jump to any one of those artboards. They can navigate here towards the bottom to see individual artboards, jump back to Home if they'd like. On the right-hand side they can give comments back to the designer. So if the developer has questions, they can communicate it here, same way as I did with my stakeholders. I can receive those, come on in, and comment back so that the developer and I are both on the same page. You'll notice there are two more tabs. If I click on View Specs, what this does is bring up the specifications for the current artboard.
Notice that I can see my screen details, which images are included on that design. I can come in and select individual images. And as I do so, control how I download those as a developer. So I can go with PNG or PDF. I can see the colors that are in use, any character styles. If there are micro-interactions, the Auto-Animate transitions, I get specifications around those to make it easier for my developer.
If I come in and click on the canvas, what you'll notice is, as I do so, I get some Smart Guides showing me spacing details about the elements on the canvas. If there's a hierarchical structure to the design, right-clicking on the web browser in fact, will show me that stack, and will move me up in the hierarchical structure of the design. So I can dig into particular elements. As I look, as a developer, if I'm coding up the site alongside this view, here in the web, I can come in and capture snippets, in essence. So I've got some CSS content here. So come on in and select it and that automatically copies to my clipboard.
Well, okay. We have to stop at some point. This rounds out the last step in the Get Started with Adobe XD: Collaboration tutorial. If you haven't checked out some of the other tutorials in this series, I encourage you to do so. And I've appreciated spending this time with you.
