Export entire prototype as a User/Wire Flow type diagram
It's very easy to create linked "prototypes" within XD - thank you...
However, the way a prototype is viewed makes seeing the "flows" that exist within it very hard.
What I would like to see is a way to export all the artboards with the prototype "linking" arrows visible and nicely rendered as a large diagram...
This diagram would be similar to the concept of "Wireflows" (https://www.nngroup.com/articles/wireflows/) and enable an easy way to produce another type of design deliverable.
I appreciate that the design specs feature sort of allows this, in that you can see see all artboards, and focusing on one will sort of show the linking arrows (albeit in a not very clear or user-friendly way) but this request is different to that... https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12927024-export-overview-of-all-artboards-showing-interact (this feature was never truly realised despite being marked as complete - if you look at the example images this sort of behaviour is not present in design specs currently)
Improving on the initial idea, so some simple artboard "auto-aligning" based on the relationships that have been set up using the prototype mode would be a great option, as would some control over the arrows styles/colors... but essentially a basic, non-iteractive, single export document that displays the linking arrows and artboard labels is the idea.
Jon B
shared this idea
5 comments
-
Ro
commented
Definitely interesting to have a mapping user-flow / artboards that works both ways:
a) I have a user-flow and artboards are created accordingly
b) I have a prototype and I can generate a user-flow from itA tab on the top could give us access to the user-flow feature (Design / Prototype / User-flow). It would help me save time to be able to map them directly inside Adobe XD instead of using other tools to do it.
-
Dashanan
commented
For the time-being you can use the Overflow plugin for making such user flows. Though it's a paid service after 30 day trial.
-
Tom
commented
It would be extremely useful to be able to export the entire prototype as a vector image showing the connections between each board. Potentially morphing into a cleaner storyboard or flowchart would also work well.
-
Jon B
commented
Sketch has a plugin that does this quite well... the options for output are limited (it would be nice to have arrows with "bridges" and better collision avoidance)
https://abynim.github.io/UserFlows/
When we have access to prototype links in the API (coming soon) I imagine a plugin like this could be created... but I feel it could be so much more powerful.
-
Jon B
commented
Other thoughts include... having the option to display all the "linking arrows" on the design specs web output....
But the arrows could do with some improvements to how they are shown in this context as they tend to overlap and become confusing. Consider using little bridge-like "hop over" styling for where arrow lines cross over.
Also I see that the plugin API will soon support retrieving details of these linkages... it means there could be an option for a plugin to do this (I've started looking into it, but I'm not sure my attempt at a plugin would come close to what could be achieved as a feature within the product)