The Annotation tool allows you to add notes, labels, and annotations directly to your designs. Perfect for design reviews, feedback, and documenting design decisions without cluttering your actual design elements.
Activating the Annotation Tool
Access the Annotation tool from the toolbar or via keyboard shortcut.
- Click the Annotation tool icon in the toolbar
- Or select it from the toolbar dropdown menu
Creating Annotations
- Select the Annotation tool from the toolbar
- Click anywhere on the canvas to place an annotation
- Type your annotation text
- Press
Escor click outside to finish
Annotation Features
Text Annotations
- Add notes directly on the canvas
- Multi-line text support
- Formatted text with rich editing
- Resize annotation boxes as needed
Visual Styling
- Background Color - Customize annotation background
- Text Color - Change text color for visibility
- Border - Add borders to make annotations stand out
- Opacity - Adjust transparency to avoid obscuring designs
Organization
- Layer Organization - Annotations appear in the layers panel
- Grouping - Group related annotations together
- Show/Hide - Toggle annotation visibility
- Lock - Lock annotations to prevent accidental edits
Use Cases
Design Reviews
Add feedback and suggestions directly on designs:
- "Consider increasing font size here"
- "Needs more spacing"
- "Alternative color suggestion: #4A90E2"
Design Documentation
Document design decisions and specifications:
- Explain complex interactions
- Note accessibility requirements
- Specify animation timing
- Reference design tokens or variables
Developer Handoff
Provide implementation notes for developers:
- API endpoint requirements
- State management notes
- Special behavior explanations
- Data source specifications
Editing Annotations
Modify existing annotations:
- Select - Click on an annotation to select it
- Edit Text - Double-click to edit annotation text
- Move - Drag annotations to reposition
- Resize - Drag handles to resize annotation boxes
- Delete - Select and press
DeleteorBackspace
Annotation vs Comments
Choose the right tool for your workflow:
| Feature | Annotations | Comments |
|---|---|---|
| Visibility | Part of the design canvas | Separate comment panel |
| Best For | Design specs, documentation | Feedback, conversations |
| Threading | No threading | Full conversation threads |
| Persistence | Permanent part of file | Can be resolved/archived |
| Export | Included in exports | Not included in exports |
Best Practices
- Be Concise - Keep annotations brief and to the point
- Use Color Coding - Different colors for different types (feedback, specs, notes)
- Position Thoughtfully - Place annotations near relevant elements
- Hide When Done - Hide or delete annotations after addressing them
- Group Related Notes - Keep related annotations together
Tips
- Use semi-transparent backgrounds to avoid obscuring designs
- Create a dedicated "Annotations" layer group for organization
- Lock annotation layers during design work to prevent accidental edits
- Export annotations separately for documentation purposes
Related Tools
- Comments Panel - For collaborative feedback
- Text Tool - For design text elements
- Dev Panel - For developer handoff