Workaround for annotations in design and preview mode
While we're waiting on Xd to add a feature for annotations / documentation / callouts / etc., I have come up with a very useful workaround. This workaround lets you add a notes panel next to each artboard that can be easily moved with the artboard, scaled to accommodate longer scrolling pages, and can be easily shown or hidden when running in preview mode.
This attached document includes lots of detail on how to use the workaround yourself, as well as plenty of feedback for the Xd team on what I'd like to see in the annotations feature once they build it.
This idea builds on a previous feature request (Annotations in design mode) I couldn't add an attachment to a comment, so I started this new idea here. https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/16974259-annotations-in-design-mode
MaMaLy
shared this idea
15 comments
-
Omer Nahshon
commented
Comments are nice but they shouldn't be mixed with annotations.
Annotations are required for us to guide our developers, and should be saved as part of the xd file itself,.
This way we will not risk in loosing them when re-publishing a prototype, or if another designer makes a change and publishes using his account -
MaMaLy
commented
Patricia-- I export my artboards + notes to PDF all the time. Simply expand the width of each artboard to include the notes area before exporting. You can do this for all artboards at once by zooming out and selecting them all, so it only takes a few seconds to toggle between seeing your notes and hiding them. I tend to make a little note to myself off in the pasteboard somewhere with the size with and without notes so that it's not a guessing game each time I switch it.
-
Patriicya
commented
Great work. Just one question, I wanted to export my artboards and notes to PDF. Can I? How? Thank you.
-
Cameron Sagey
commented
Great workaround, and to XD: We need annotations badly. No design program is doing this right yet. Implementing a toggleable sidebar like this is the 1st step, but syncing these notes to the prototype and design specs, allowing clients and developers to comment on the notes (as 1 thread rather than a bunch of individual comments like most programs are doing right now), and syncing those comments back to Design View would take it to the next level.
-
Anonymous
commented
Well done and very helpful. Thanks.
-
MaMaLy
commented
Y8sy - Glad this hack helped you. I still use it every day. Wish we could ditch the hack soon and see a real solution built into the app. Relying on comments in prototypes won't work-- that's intended for conversation between your client, not for formal documentation. Not to mention, those of us who work for enterprise giants have the cloud blocked, so we can't use that feature anyway.
I'm a Mac user, and don't use a Waycom. (Just impossible for a left-handed writer / right-handed mouser to make the switch to a pen without losing my mind re-learning keyboard shortcuts with the other hand!) So I don't have much to add on that.
I think that annotations within the tool would be unrelated to which input method is used (mouse, touchpad, Waycom, etc.)
-
Y8sy
commented
Hi all,
I use this hack as part of my design process, thanks @MaMaLy for sharing.
I see that the pen and touch feature https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/17431225-pen-and-touch-support-in-windows-10 has been completed, I thought that I would be able to do annotations using that feature, but sadly it is not the case.
I have documented an inking feature which closely relates to this request, love to hear your thoughts @MaMaLy
-
Martin Klausen commented
Great hack, MamaLy! Thanks :)
-
James
commented
Thanks for this idea MaMaLy, I tend to use bright pink text off-canvas, not dissimilar to what you have suggested in fact.
-
MaMaLy
commented
Here's an updated workaround for annotations / documentation / callouts / etc. that explains how to show/hide all callouts at one time that overlay your design.
Adobe Admins-- will you merge this with my previous idea? I didn't see a way to update the attached file on the other idea.
https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/20399002-workaround-for-annotations-in-design-and-preview-m -
MaMaLy
commented
Brilliant Bekah! I updated the workaround document, but now can't figure out how to attach an updated version. Do I have to create an entirely new idea to update the attachment?
What I found works best is instead of adjusting the transparency (which could allow you to accidentally select/move your callouts while they're hidden), instead I used the show/hide feature on the group within the symbol. Hiding the top-level symbol in the layers list only hides that instance. But if you hide the actual contents within the symbol it hides them all across the document.
This has saved me a ton of time and headache. Thanks for the suggestion, Bekah.
-
Bekah Wilcox
commented
Now that symbols can have unique text per instance, you can make a single annotation marker into a symbol, \change the number for each instance, and then adjust the transparency to hide them all at once.
Agreed, though, that we need better documentation tools.
-
MaMaLy
commented
Thanks Thomas! I totally agree that it would be better if it's a built in feature, but I couldn't wait for it if I was going to use XD for real projects. The reason I didn't use a separate page for my notes is because I like to quickly be able to switch between showing and hiding my notes. Sometimes I like to present a clean view that doesn't get cluttered with notes, and sometimes I want to be able to see the notes in the same view as the design while presenting. My workaround lets me make that switch simply by changing the width of every artboard (which can be done all at once while zoomed way out, so it's not a big deal.) The bigger struggle is hiding all on-screen callouts since there are no global layers in XD.
-
Thomas Hallgren commented
MaMaLy, Awesome job here. But we shouldn't have to do this on a UX design application. Adobe really needs to catch up here on the documentation side b/c it's getting to be a real pain documenting over the current designs. I wonder if designing a notes page for each page would be a better solution, that way just put a notes icon on the pages with notes and show as an overlay. Then again when the overlay feature comes out that will be easier. In the end, nice for now but the app needs to have this feature built in sooner than later.
-
Very cool!
