I annotate designs in Figma extensively for developer handoff (behaviors, interactivity, important callouts, etc). Right now, it’s frustrating that annotations are treated as design elements (get sucked into a frame, cant cross multiple frames easily.) I also typically duplicate all screens to show one set with annotations, and one “clean” set that represents the actual look of the interface.
I propose an “annotation layer” that can be toggled on and off quickly, where drawn elements are not bound by frames but can freely be superimposed on any design. Comments accomplishes some of this, but I need to draw arrows and other visual elements when comments aren’t adequate. This would also allow me to use a single set of screens for annotated and “clean” designs
A capability I used to use often when designing UIs in Adobe Illustrator was to dedicate a single layer that existed across all artboards as a callouts/presentation notes layer.
It was a single click to toggle on all callouts across every artboard on a page so that they were visible and in a presentable style (for example when reviewing with product owners and devs). Another single click to turn all of the callouts off (for example when user testing or presenting to execs). Would love to have something similar in Figma.
Commenting is great for a back and forth, but doesn’t meet the need of being able to control exactly what is displayed on screen. I’ve thought of making a simple plugin that could hide all objects named “callout”. Is there a better way that I’m missing?
Hey @Carey_Smith thanks for the feedback here. There are a few plugins already out there that may come in handy. For example this one, Annotate It, will let you add annotations to your layers. There are a bunch of others that you can use to help do redlines, add notes, etc.
As part of the design process, author/editor commentary traditionally sits in margins of wireframes or designs; with lines, or [numbered, geo-marker-type] bubbles, to ‘point’ to the subject (an element for example) of the comment.
This serves as editorial commentary to elucidate intention/function, and to contextualize the design.
It’d help to have this or similar functionality – if it doesnt already exist?
I found a previous topic that mentioned/requested this functionality, in the context of ‘speaker notes’ for presentations–as offered by MS Powerpoint
implementation
as simple as a hover behavior to reveal commentary, or left/right click for ‘info’
can also aggregate these per page, or per project, as a type of nifty and very simple project management tie-in (api to integrate with roam research, <insert modern note-taking tool>, for dynamic updates that transcend email notifications)
I’ve tried Annotate It and it doesn’t quite work when working with non-designers. We use Figma for hand-off to dev as well, who are not going to go into layers and turn off the annotations. I would love a feature for annotations that is a part of the figma interface that can easily be hidden, like comments. Because, as it stands, we are having to do a lot of screen duplication with ones that are “clean” and one that has annotations on it. It’s not ideal.
I’ve been struggling with this as well. What I wanted was a simple way to annotate without having to create a group of hundreds of text blocks or frames containing everything (that mess up the distance measurement on inspect mode).
It’s hard to navigate and to move things around when needed.
This is really important. My ideal solution would allow for turning annotations on/off (across all screens) and seeing these annotations in a sidebar that doesn’t overlap the actual screen. As others have mentioned, not having to manage a clean and an annotated version (especially when the design is still fluid) would save a ton of time and frustration.
Zeplin has the ability to add annotations to design files on handoff but the only way to do this right now in Figma is to use commenting. The problem with commenting is that it doesn’t have a specific per page annotation system where I can set what type of annotation it is. I also can’t filter per page except saying “Show Current Page Only” in the comments dropdown. So if there are comments from version 1 of the design, and then I add comments in version 2, and then I want to do comments for annotations to handoff, I have to go back and delete all of the comments from V1 and V2 to do that.
Would be fantastic to see a similar annotations feature in Figma that zeplin has where I can add comments with categories to any screen individually, and be able to sort them by versions as well. That way I can ask people to leave feedback in comments but then when I need to handoff, I can use the annotations panel for that.
