Annotation Overlay

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

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

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.

Hope this helps! :smile:

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)
1 Like

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.

1 Like