Export overview of all artboards: showing interaction flows, annotations, specifications
I would like to share my full document to my team in order to communicate all specifications I added. This would help them giving a bit more context to the prototype and also be able to see all the different states of a pattern to build.
Maybe save as a PDF file or also online?
We’ve released the Design Specs feature in our November release as a Beta. You can now publish a Design Spec, which will show your developer an overview of the flow and allow them to introspect measurements and styles. We’re working on additional functionality based on this foundation, so I’m closing this feature as completed in order to get new suggestions as to what specific additions you’d like to see to the Design Specs feature.
Please also note that we now have a new feature area called “Design Specs” in UserVoice, so please file new feature requests there! As a reminder, please file one suggestion per UserVoice submission so that we can better aggregate!
Martin Sangolt commented
THIS! I have to do this tedious task on many of my screen flows manually. They are very useful, as both project managers and developers can see the whole flow and easier create separate tasks across screens.
Ian Armstrong commented
This is actually a really clever idea. It would require some sort of an annotation system, as well as the ability to selectively pull out a symbol/group (like a nav element) as a zoomed object. See the layout style at http://uxkits.com/products/website-flowchart-and-sitemap
Bill Alexy commented
Another helpful feature would be one where the designer creates the flow first, like a sitemap. Automate the artboard build from there. In a user Journey, the designer could mark touchpoints that would map to specific artboards. A task/state flow diagram is an interesting scenario. It could have parent states. Each state would have actions the user could choose from (ie. Confirmation Screen | Ok / Cancel).
Designers would likely need a way to annotate the transitions.
Normally in my workflow I create a printable blueprint (pdf) of all the screens where developers, sales, managers can visualise the full application in wireframes.
Similar to architectural drawings the document will simply print out all the art boards (with a selected wireframe device offset) and highlight the screen names, the link paths and eventually, overlay comments in tooltips format (it can explain in words that particular selection).
From the prototype view just arrange the art-boards into a flow, then select blueprint view, select style, add comments, save as pdf.
For more details about this Idea please don't hesitate to contact me.
Paula Seo commented
This would be a nice feature. For the clutter, it would be nice to group the flows so they can be turned on/off, like layers. That way designers can group the cluttered flows by feature for meetings and developers. Executives and developers seem to be able to imagine the flow with this and have an easier time understanding. I do this manually in inDesign and takes forever.
Total agree. We currently use MS Visio for flow diagrams. I'd rather use XD!
Alan Valek commented
I think what people are getting at is something like Zeplin, that spec program for Sketch. I haven't tried it, but it sounds amazing. It does mostly all the specs for you, besides all the intricate functional call outs.
David Ross commented
yeh, this is a big one. I need a way to share flows and pages as a whole. Ideally these would also have annotation abilities. Soni's linked mock-up is pretty close to the mark.
Client's are going to want to be able to see the flow chart printed out and write on it in addition to the click through. It's essential that this program allows you to print large/wide format sheets that show the flow of the site with options to include the link paths.
Nicholas McClay commented
I was genuinely surprised that PDF export wasn't in the initial release. I think having a mechanism to generate design documentation to express clear design scope to a team implementing it can't be underestimated here. Interactive prototypes help a lot about specific contexts, but to get an overall sense of scope I think these types of specification documents are really helpful.
Dan Reneer commented
Soni Makarovic commented
Yes it can get cluttered with all the lines, but you can add an option to hide the unwanted connections. And also the connection lines could be editable so you can arrange them better so they don't cover each other. Adding notes to the exported flow would also be great. A quick mock https://dl.dropboxusercontent.com/u/18181350/flow.jpg Probably you'll need an export preview mode where you can manage all this.
Chris Mash commented
Same as others I think but thought I'd weigh in with my comments:
I've been directed here from my query here: https://forums.adobe.com/message/8642232#8642232
A PDF export of all the artboards (as they're laid out in Xd) would be great, with links between artboards displayed (nicely) to give an overall flow diagram of the app.
[Deleted User] commented
Options to export all project or a range of artboards as PDF like InDesign.
Capt. Proton commented
Here's a wireframe example of how I see it working. (From unknown designer).
I would like to be able to export art boards in form of a storyboard.
Josh Curtis commented
Or, once I've linked my pages in a prototype that it would export as a single page of screen flows with arrows connecting each page just like they were linked in the prototype.
Josh Curtis commented
If you can make this then I can completely stop using OmniGraffle ever again. Stakeholders at my job love to see screens in a flow on a single page rather than a prototype. Nearly every department here likes to see interactive callouts / annotations for a wireframe deck. It would be amazing to have a way to accomplish this in XD.
If you want to see all of your wires, it might get a bit ugly. Here is an example:
Is this what you would want? If not, can you give me an idea of what you would like to see if your exported flow document?
Please consider adding a flowchart/sitemap to the online sharing feature. This would provide an opportunity to present the project overview in addition to the interactive prototype.