By Matt Rae
E
xperience design projects can take on many shapes and sizes, spanning across desktop web, mobile, and into surfaces like TV, car audio, and wearables. Adobe XD makes working with various screen formats simple with built in artboard presets, responsive resize, and component states. If you’re working with multiple display types in a single XD document, organizing and sharing these flows is now even easier with multiple flows.
Multiple flows allow specific user flows to be defined in Prototyping mode, labelled, and shared with specific links for gathering feedback, defining development specs and more. Labels persist across Design, Prototype and Share mode so flows can be organized on canvas, and easier to find.
Creating a flow
Flows work great for defining various flows with different screen sizes, like mobile and desktop, but are also a great option for defining A/B flows for usertesting.
Select a home screen
Creating a flow is as simple as identifying the ‘home’ artboard in Prototyping mode. The home indicator is the grey tab icon found on the top left of an artboard.
Once toggled on, a new label will appear above the artboard, titled Flow 1 if no other flows exist on the page. This label persists across all three modes (Design, Prototype, Share) to help identify the flow throughout the design process.
A flow is defined from the home artboard and connects all other artboards that have been linked from the home via prototype links. Multiple flows may share artboards within their flow, but must all have unique home artboards to define the start of the flow.
A single artboard can be shared by toggling the home icon to identify it as a flow, and not linking it to any additional artboards in Prototype mode.
Name the flow
The flow can be renamed from the default Flow 1 by double clicking on the label and entering in the new name. Clicking outside the label will exit the editing view, and save the label name.
When naming flows, it is best to use clear and concise naming so that as other people view the file, or when it is referenced at a later time, the purpose of the flow is clear and understandable. Defining a standard naming convention is a good practice to avoid duplicate naming, or confusing abbreviations.
Removing a flow
As you’re iterating on the design, there may be a need to remove, or change how a flow is structured. Since a flow is defined by a particular home screen. It can be removed by toggling the home indicator on that screen. Once toggled off, the flow will be removed, but all links between the artboards will remain.
Sharing a flow
When sharing out work for design reviews, development handoff, or user testing, flows make it easy to see what is being shared, and define specific links for each flow. For instance, if you’re working with one developer on the mobile implementation, and another on the desktop experience, having individual links for each flow is important for delivering the proper specs, and information the development team needs.
To share a flow, toggle to Share mode (Option+3 on a Mac, Alt-3 on Windows). If a flow is selected, it will be highlighted in Share mode, while other flows and artboards are faded in the background. The desired flow can be selected by clicking on the label above the home artboard.
With the flow selected, the link title will default to the name of the flow, but can be edited in the Property Inspector. Link share settings can be set to the desired outcome, for example, when handing designs off to development, select Development from the dropdown menu. Clicking Create Link will generate a link that can then be copied to the clipboard with the link icon, or opened by clicking on it.
To share an additional flow, click on the label of the flow you wish to share, and the Property Inspector will automatically update to show a new link creation, with the name of the selected flow pre-populated.
Updating flow links
Flow links can be updated at any time by selecting the flow, and clicking Update Link in the Property Inspector. The link settings view adapts dynamically based on the flow selected, and will show the last updated date and time above the link URL.
If more than one share link has been created for a particular flow, the most recently updated link will be visible by default when the flow is selected in share mode. To access additional links, clicking on the dropdown icon next to the link title will reveal a dropdown list of available links for the document. Selecting one of these available links will reveal its settings in the panel.
Whether you’re working with multiple screen sizes, or trying to test various iterations of a design, multiple flow support in Adobe XD helps keep your user flows organized, and links in order for sharing across the team.
Quickly share selected artboards
Alternatively, if your artboards are not connected together in prototype mode, a flow can be created using the Share Selected Artboards feature. This feature allows you to convert all selected artboards into a flow, and opens Share mode all in a single click.
To use it, ensure you’re on XD 40 or later, and then select the artboards you wish to share. Click on the share icon in the top left of the first selected Artboard. By default this feature will create a Design Review link automatically, and connect all the selected artboards together with a simple dissolve transition.
At any point you can turn off the option to automatically create a link by deselecting the option in the preferences menu.
Once created, this new flow behaves just like any other flows created in the document and can be renamed, updated and moved around the page.
