Annotations

Annotations are documentation blocks that can be placed between interaction pieces (triggers and responses) to provide context and explanations. They act as inline comments appearing directly in your interaction flow, making them ideal for:

• Documenting interaction logic for team handoffs
• Explaining complex prototype behaviors
• Providing implementation notes for developers
• Adding context for stakeholder reviews

Creating Annotations

From the Top Bar

Click the Annotation button in the top toolbar to add an annotation:

• With interaction piece selected: Creates a Trigger-level or Response-level annotation directly below the selected piece.
• With no selection: Creates a Trigger-level annotation at the bottom of the interaction panel.
• With layer selected: Deselects the layer and creates a Trigger-level annotation at the bottom.

Between Interaction Pieces

Hover between any interaction pieces to reveal the + button, then select Annotation. This creates a Response-level annotation at that specific position.

Annotation Levels

Annotations exist at two hierarchical levels.

Trigger Level

Trigger-level annotations that provide general context for a set of interactions. These are created from the top bar or by dragging Response-level annotations to the trigger level.

Response Level

Annotations nested within triggers that document specific responses or interaction sequences. Created between interaction pieces or by dragging Trigger-level annotations under a trigger.

💡Tip: You can easily convert between levels by dragging annotations to different positions in the interaction hierarchy. You can also use shortcuts to move them:

• To the top:
  • Mac: ] or ⌥⌘ ]
  • PC: ] or Ctrl + Alt + ]
• To the bottom:
  • Mac: [ or ⌥⌘ [
  • PC: [ or Ctrl + Alt + [

Editing Annotations

Click on an annotation to edit its content in the property panel. Annotations support full markdown formatting, allowing you to:

• Add headers and emphasis (bold, italic)
• Create lists and tables
• Include code blocks for technical documentation
• Add links to external resources

When focused, you'll see raw markdown text. When you click away, the content renders with proper formatting.