Annotate parts of the design & publish annotations in Design Specs handoff view
As a UX designer, one of the most important information while handing off designs is ability to explain each component in your design. Functional annotations like ON click of this button slide this page or specify error conditions or text or color changes that occur when the user interacts with that component in your design.
UXPin has a great way of annotating designs. Its a separate tab that allows developers to view the design, annotation and style guide separately. Attached is an example of UXPin does it and having this feature on Adobe XD would be great! We use Photoshop and Illustrator for our design and Axure for prototyping. But with Adobe XD all of this can be done using one software. If Annotations and Design specs are included it would greatly help reduce the time we spend on spacing out every detail and changing it often.
Original request also asked for "Pattern library for designs assets, colors,typography" ... "It would also be really helpful to have a pattern library that has colors,typography,assets,customized designs that can be used to help design and prototype faster and maintain consistency in the entire experience." XD's Design Specs feature should cover that now.
Varshini Jagannath
shared this idea
-
Brigitte
commented
When designing prototypes, I like to add instructions or comments for the developers so I can explain actions like what happens on hover, or when to make a particular section visible.
I also add special buttons for "Home" and "Back" to each artboard to make it easy to get to my custom-made menu of all screens in the prototype.
And lastly, I sometimes use a bootstrap background on my artboard to help with layout alignment.
What would really make things amazing is if I could put each group of associated items in a global layer that I choose whether or not to export. One check to decide to export the bootstrap layer, another to decide to export comments and back/home buttons. Then I could export both clean and 'messy' versions from the same files.
I don't find that the existing layers utility is an option because there is a layer per artboard. I have 100 artboards in some of my files. I'm not going to set these for each artboard. I need global layers to facilitate this.
For those interested: My current work around that works at least for my bootstrap template and home buttons is to make them symbols, then edit the symbol before exporting and make all the elements in the symbol either transparent or 100%. It's annoying, but at least it gets me part of the way to what I need. (This is no solution for comments though.)
-
Rica-Marie Garcia commented
It would be nice to add text or section titles for multiple screens. So I can show my developers which screens go in the section; in design spec mode. Currently, I am creating a new artboard just to add text. Attached is a screenshot.
-
Joseph Kim
commented
As designing and working, I always used to add specific UI description beside artboard.
In that sense, I've liked to use Sketch notebook pro and powerpoint because writing policy in the UI document is really important for exact communication with developer and planner. (Prototyping cannot cover all kind of policies and interactions)
Even if Adobe XD may not be targeting document tool for designer, I've always wanted to take the note and description in design artboard. Especially Korean ux designer have had no choice when writing description (we've used powerpoint almost 20 years)
Thank you for your consideration.