By Dani Beaumont
Multiple flows in Adobe XD allow you to create and share versions of a design from the same document, or leverage the same set of artboards across many prototypes.
Each flow retains its own set of wires and share details so that you can make changes and re-publish without having to undo and redo all of your settings each time. This is one of those features that's much easier to see an action that it is to explain, so let's go ahead and take a look.
I'm here in Adobe XD and I have a mobile layout that I'm working on. As I've worked on this design. I've become a bit concerned that this visit button here is going to be too difficult for my users to actually see and click on. A great way to validate if it's actually an issue would be to design a variation of this flow, and then put it in front of some users as part of a usability study to see which one they prefer.
Rather than come on in and duplicate this entire set of artboards, I can use the multiple flows feature to just duplicate what I want to change. For that I'll come on in and drag a second copy of this first card. Notice that as I do so not only did the artwork duplicate, but all of the wires that were associated with that artboard did as well.
To go ahead and make the design change, I now want to switch over to design mode. I now want to switch over to Design mode. I can do that here in the upper left-hand corner by clicking on design. Notice that I also have a shortcut that I can use. Typing OPT on the Mac or ALT on Windows and then the number 1 will toggle me to the Design mode. OPT 2 or ALT 2 will take me to Prototype and OPT or ALT 3 will take me to the share mode.
I want to jump over to Design, so I'm going to go ahead and type that keyboard shortcut and I'll come in and make my design changes. Now that I have that all set I'll go ahead and create a new Home screen or starting point for the second flow. Multiple flows can share some artboards, but each flow does need its own unique Home artboard.
When I click on this duplicate artboard here I'll go ahead and give it a unique name. We'll call it Test 2. Next I'll come in and make sure that they're wired appropriately. So for that I'm going to go ahead and click on Test switch over to Prototype mode, aand just press and drag a wire so that that initial artboard feeds to the second artboard. When I click on the second artboard I can see that all the other wires are already intact.
I'm going to click off and just give myself a little bit of space here between my two new artboards and I'm ready to apply my multiple flows. For that I'll come to the first artboard in my flow sequence and click on it. And then just to the left of the artboard. I'm going to click on the Home icon. From here I can come in and actually apply a label or a name to this initial flow. I'll go ahead and click on it and we'll call this Compass Test 1. I want to do the same with the second flow. So I'll click on that first artboard Define that home location notice that I now have a second flow that I can work with double clicking on that. I'll give it a custom name.
Now multiple flows can be useful just in organizing your content, even when you're not working on -- let's say -- a usability study. If I zoom out here, you can see I have some other flows that I've defined. This one is for an Amazon Echo Show. I'll come on in and click on that first artboard in that sequence and I'll give it a label.
And I'll come down to this last set of artboards here towards the bottom and we'll give it a label for tablet. Now by the way, multiple flows can also be really useful in organizing your content. Notice that I have these labels and as I zoom in and out of the canvas the labels remain visible. I can come in and select a label and it's going to drag off all of the artboards associated with that label. If I switch back to Design mode notice that those labels remain visible so that I can keep track of all the individual flows that I have.
In fact if I click on the label for a flow and then type CMD on Mac or CTRL on Windows and the number 3, XD we'll go ahead and zoom in on the canvas to show me all of the artboards associated with that flow. I'm now ready to start creating some prototypes and design specs, so I'm going to switch back over to Share mode. One other nice feature you'll notice is when I click on any one of the flows XD is going to gray out all of the artboards that are not involved in that flow.
Notice how in my test here I have my first set of artboards, and they're highlighted; everything else is grayed out. For my second test it's going to use those first two artboards, ignore the ones towards the top, and then use the balance of the flow. So it's a nice way to proof my work before I actually generate a link. With one of the flows selected I'm now going to come here towards the Properties Inspector on the right. Notice that the link title automatically leverages the label that I applied to that individual flow.
I can always come in and override it here if I'd like. I want this to be a usability study, so I'll select that, and go ahead and publish it out. From here I want to repeat that process for the second Compass Test 02 flow, and also the Amazon Echo Show flow. One thing you'll notice in the properties inspector is here towards the bottom. It gives me an indication of when the last time was that I updated my individual flow.
So let's say I come in and make some changes to Compass Test 01 I can come in and make those changes and when I come back here and to Share mode in the drop-down menu, I can be sure to select the link that I defined, so that's Compass Test 01. From there I have the ability to update it without changing the link. I can change the content that's being shared, or I can alternatively come in and just select a new link. If I don't want to overwrite the one that I created before I can always save out a new one.
Well, that's a quick peek at a productivity feature in Adobe XD. I encourage you to give it a try.
When you’re working on a complex design with lots of stakeholders or design variations, defining multiple flows allows you to create and easily update multiple prototypes or design specs without a lot of wasted effort.
Prototype multiple user flows in a single document to share versions of a design from the same document, or leverage the same set of artboards across many prototypes. Each flow retains its own set of wires and share details so that you can make changes and re-publish without having to undo and redo all of your settings each time.
