Add UX Notes mode (to Design and Prototype)
As UX, I would like to add page and object notes for my engineering and QA teams. These notes should be visible in PDF exports as well as in the online prototype. See proposed feature UX Design Prototype Link.
WE NEED ANNOTATIONS!
Some way to hide/unhide a notes layer of some sort for developers to see, when they review what we export for them from XD.
When designing in Photoshop, I include a lot of info/notes for devs - I export a clean, pixel-perfect version of a page and also the ConDoc (Construction Documents) version that may have tons of notes and arrows all over it.
The artboards and prototypes are great, but as a UX Designer who works with both local and remote developers, a lot gets lost in translation. The ability to add notes to both design specs and prototypes to entire art-boards, as well as on specific objects on those art-boards, would be amazingly helpful. Not only would it give me the ability to call out animations (particularly when 'auto-animate' is not animating everything on the page as intended), but it would also allow me to call attention to specific nuances that developers may not notice when moving quickly through the specs. It would also allow me to note specific conditions, use-cases, etc. I also love the idea of being able to share prototypes/specs with OR without the comments (as suggested by another commenter on this post). So when I'm just presenting to the design team, the view is less cluttered/distracting.
Also, it'd be ideal to have an export option to include/exclude notes by category (not just always include) because sometimes when routing a project, one team needs to see all notes while others should not see any notes.
This would be great. Right now we use commenting, but having huge problems as project becomes more complex, and several revisions take place. Would be great to have comments attached to the actual file, rather than to the exported Specs.
bella johsan commented
Timothy Dungan commented
This would be great for adding notes about animations that have to be built into the pages but could never be supported in XD itself.
William Ford commented
Absolutely need this! There are so many methods I use to create graphical work in designs that requires back and forth with front end developers to ensure it's displayed 100% the way I intended. A lot of this could be avoided with having notes on elements.
Scott C commented
Acrobat already has a comment system similar to what it seems like is requested for this.
- Have the ability to right click on a UI element/symbol/grouped object/artboard etc and add a comment
- Able to see on the layers panel next to the batch export icon weather the object has a comment on it.
- Show who did it and when a comment was made, (may want to include in that timeline feature that's currently being worked on).
- Add the comments to the list of comments on the Design Speck layout.
- Automatically add a "pin" element on the object the comment relates to.
Also it would be great if I could insert a link int this notes/comment field. For example if I'd like to add some examples or link to my spec document, it would be useful if link is link, not plain text.
Justin Straver commented
This sounds like a great idea. Currently, I'm making artboards in between my artboards with the number of the user story (VSTS) the design is connected to and a status(done, in progress, etc). There must be a more convenient way to collaborate between design and development.
I would love to have this feature. It would be super helpful for internal and external collaboration with UX designers, developers, PMs.
Jeff Swartz commented
This would be very welcome. Simply attaching notes to an artboard would be super helpful at this point. When presenting to clients I often find myself using XD iteself and just dropping text notes outside the artboard for later.
Just use the comment feature of the online prototype... ?
Would it be possible to have sticky notes like they do in Balsamiq? Just drag them on and put your notes in.
Adrien Dubois Ahlqvist commented
I love the way you proposed it! This is a big pain point and that combined with the lack of integration between the shared prototype and the prototype makes this the obvious next step!
Great idea. Something similar to InVision.
Bruno Alves commented
Amazing idea! It can be very useful both for keeping specs for devs and also making presentations to clients.
Matthew Lewen commented
As a developer it would be great to have designer defined descriptions for elements on the wireframes/prototypes. Not comments per say but rather interaction annotations defined by the designer describing how this element is meant to function when a action such a top or how a element transitions from one state to another.
This would exist in the shared design specs/protoype.
Azure's element notes & web publish tool is a good example of this and my team uses this at work all the time for developer handoffs.
It provides both a visual understanding as well as a descriptive understanding of how the UI should function when coding it up.
It would also be nice to comment on said notes to ask questions or suggest feedback.
Thanks MaMaLy for your suggestions, this is awesome! I can't believe that this feature and 'inking' is not implemented yet!
C'mon adobe, please add some priority to this!
Alwyn Balingit commented
Adobe XD Development Team, please support this inline documentation feature for mockups DURING DESIGN MODE, and can also be seen DURING SPECS MODE.
Our current prototyping tool is Microsoft PowerPoint.
We use "Speech Bubble: Rectangle" to point to UI elements and explain details about it.
Other may be using "Callout: Line" for the same purpose.
Inline Documentation: https://www.thoughtco.com/adding-powerpoint-callout-to-a-slide-2767352
Now I understand that in REVIEW MODE for SHARED PROTOTYPES, you have a COMMENT SYSTEM. Microsoft PowerPoint has that, too, and the purpose is for reviewers to add comments, more like a TODO LIST FOR UX DESIGNERS.
We need a similar "Comment System" but for purposes of DOCUMENTING UI Elements.