How do you export PDFs of highly interactive prototypes?

I work at a shop that does highly interactive prototypes. The clients, designers and developers all really like them. My issue is that exporting PDFs can be a pain because of the hidden elements and multiple state dynamic panels.

What I used to do is to just use the print function in chrome and save each page as a pdf. That works ok but the problem is that elements which have their position set with JS, like lightboxes, pushed elements, etc., get missaligned when using the browser’s print functionality.

What I’m doing now is using a chrome extension that captures a full image of the page. It scrolls down the page and captures the exact state of the page. It works great as far as accuracy goes, but because it’s taking pngs and not pdfs, the subsequent conversion to pdf really takes a toll on the fidelity of the image.

What do you guys do? Is there a better way? How can I export high-quality pdfs of exactly what I’m seeing on the screen?

There has to be a better way guys. If there isn’t then this is a real problem for our agency.

Hi matei1987,

There are a number of ways to get PDF versions of your active/live prototypes. But–as you’ve pointed out–they each come with pros and cons. Exporting direct from Chrome gives you great quality, but it doesn’t appear to capture certain elements very well, e.g. pinned Dynamic Panels etc. There are Chrome extensions that accurately capture the current state of the page, but suffer from image-quality issues.

There may be some third party applications–or combination thereof–that could get you to your end point. But most of the solutions that I’ve seen have suffered from one or more of the shortfalls you’ve mentioned above.

We are aware of this limitation and are hoping to significantly beef up Axure RP’s print capabilities in the next major release.

Stay tuned!

Thanks Tuomas, looking forward to it.

My work is extremely similar to the agency’s mentioned above. I need to create annotated wires in pdf format to deliver to scrum teams, designers, etc. I’ve found no good way to do this. According to AxureSupport in this thread, they are looking into it. This was started in February of 2015. It is now November 2017.

Solutions? I sure need one.

Hi leidab,

Thanks for commenting on this. It sounds like you also have a highly interactive prototype that isn’t accurately represented when you print to PDF from the browser. I’m going to be logging your feedback with my PM. Would it also be possible at all to attach a copy of your RP file and some sample PDFs so that our product team can evaluate more closely? The scenario you describe is very clear; observing the specific results will be a big help as well. If you need to keep the files private, feel free to attach them in an email to support@axure.com, let us know the interactions in question, and include a link to this forum thread.

In the meantime, would it help to use the Snapshot widget?

https://www.axure.com/support/reference/snapshot-widgets

This is generally used for flow diagrams, but it may help as a way to reflect certain interactions in the RP editor and to print to PDF from there.

Tabs2.rp (713.3 KB)
Unable to attach a .pdf. Will not accept file type.

Thanks for your prompt replies. I would say this is a high priority ask in that myself and most assuredly others working in an agile environment require this type of documentation for all wires. Thanks for helping as I do like working in Axure and would want to continue to do so; however, without the ability to quickly produce an annotated pdf to deliver to development, visual designers, and internal customers I may be forced to utilize another tool.

Hi leidab,

Thanks for writing! We usually see teams deliver the generated prototype HTML link, which includes both interactivity and notes. Is there a reason you’re not comfortable sharing this with your developers and other teammates/stakeholders? We’d love to hear more about why that workflow isn’t a good one for you! Thanks!

Rachel

I’ve not seen “notes” appearing with an interactive html prototype that I’ve published. Perhaps you can share an example. Here at AT&T everything is highly documented and for what I am speaking to specifically is new development. So, I cannot simply provide a prototype that is most assuredly not to scale and pixel perfect. All the visual design elements are provided as high resolution, redlined comps.

Does this help you to understand my needs?

Hello! Thanks for following up. Here’s an example screenshot of where notes appear in the prototype sidebar: https://www.axure.com/support/reference/widget-and-page-notes#notes_in_outputs

Are the redlined comps from your visual designers in PDF form, and are handed off to development at the same time as the interaction design?

Thank you so much for the link with notes. That is very helpful and perhaps the solution. I will need to study up on how to make my interactive prototype look that way.

Yes, redlined comps are included as well as user stories, requirements and wires. I am responsible for the wires that really include the “functionality” elements of a new or enhancement request.

@matei1987: Hi Whats the chrome extension you are using?