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
-
Geo
commented
There is a plugin called Overflow ( https://overflow.io/ ) which can do this for XD users, but I could never set it up. I contacted Overflow's support team to see if they could figure out the issue and they were never able to simulate the problem that I was facing so I am not sure if Overflow works or not. Might be worth a go for anyone looking for create what Jon B is requesting.
Has anyone else found another way of doing this? I am happy to install over software as this feature is quite important for my job.
I have created a working prototype for an app and the clients want to see the flow diagram with linking arrows. It would be great if I can just press an export button that produces a huge PDF file with all the artboards and linking arrows, as Jon B describes above.
-
Caroline Otterud
commented
Really need this feature to explain to stakeholders, but also as a material for developers sitting remote from the team, to have the whole picture.
-
Andrea
commented
This is really important for UX
-
Peter
commented
This is very important. Just give us a way to export from Prototype mode and display all connections.
-
Helena Sandberg
commented
This is a feature that would really improve team collaboration! Clicking through a prototype is good but you need to have an overview. Now I type headline of each page large, then make a screen dumpand import in illustrator to make draw all lines between pages. A lot of extra work and I have to redo it after every change. A AI user flow feature would certainly make my work much easier and faster! Thanks! And I love most Adobe products.
-
Anonymous
commented
It would be helpful to have the ability to export all the pages and the connections between them as a flowchart.
-
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)