The Art and Science of Annotations in Dev Mode | Figma Blog (opens in new tab)

Figma’s Dev Mode annotations aim to make designer–developer collaboration clearer and less manual. The feature centralizes design context, keeps specifications synchronized with changing designs, and avoids cluttering the design canvas. Its core conclusion is that annotations should be dynamic, connected to design properties, and presented in a developer-focused workspace.

Solving Designer and Developer Needs

• Designers need to document information that visuals cannot fully express, including:
  • Accessibility requirements
  • Interaction behavior
  • Rationale behind design decisions
• Developers need more than access to an entire design file; they need a curated engineering specification that identifies the relevant work.
• Figma placed annotation workflows in Dev Mode so designers can:
  • Annotate from the same perspective developers use
  • Create a focused specification
  • Share a direct Dev Mode link with developers
• Dev Mode is intended to involve the broader product team rather than isolate developers after design work is complete.

Dynamic Annotations That Stay Current

• Traditional annotations are manually created and quickly become outdated as designs evolve.
• Figma explored connecting annotations directly to design properties so they update automatically when the underlying design changes.
• Measurement indicators can also respond dynamically to layout or dimension changes.
• Referencing actual variables and components from a design system reduces ambiguity and helps keep specifications aligned with implementation.
• This approach supports the constantly changing nature of product development, where developers need visibility into ongoing design updates.

Positioning Annotations Without Canvas Clutter

• Manual annotations often force designers to move frames and rearrange the canvas to make room for notes and pointers.
• Figma wanted annotations to remain visible to developers without consuming space in the design itself.
• The proposed solution was to position and display annotations automatically.
• This required handling complex interactions such as:
  • Zooming and panning
  • Scaling
  • Selecting and hovering
  • Minimizing annotations
• Engineering worked through numerous prototypes and tuned the display logic to make automatically positioned annotations usable in practice.

Figma’s approach treats annotations as a living, developer-oriented specification rather than static notes on a canvas. Connecting them to design properties and displaying them dynamically can reduce maintenance for designers while giving developers clearer, more reliable implementation context.