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.
