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.
![[object Object]](https://framerusercontent.com/images/OB6bLKP6tRpq3OvJnaqlEs7h5k.gif)
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.
![[object Object]](https://framerusercontent.com/images/cVyx9InPj2ZiL3STl8sRbOZZx8.gif)
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.
![[object Object]](https://framerusercontent.com/images/jUFcsZY1Mhmo9mj7s1z6u0upIbw.gif)
💡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:
]orCtrl + Alt + ]
To the bottom:
Mac:
[or⌥⌘ [PC:
[orCtrl + 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.