Adding annotations in Figma is a simple process that allows you to add contextual notes and properties directly onto elements within your design files. This is invaluable for collaboration, documentation, and feedback loops.
You can add an annotation in Figma by activating the Annotate tool, selecting the desired layer, and then writing your note or adding properties.
Getting Started with Annotations
Annotations serve as a visual layer of communication on your design canvas. They are different from comments as they are tied specifically to layers and can include structured data like properties, making them useful for specifications, status updates, or linking documentation.
Steps to Add an Annotation
Adding an annotation is a straightforward process involving a few key steps. Based on the reference provided, here's how you do it:
- Activate the Annotate Tool:
- You can initiate the annotation process by clicking the Annotate icon in the toolbar. This icon typically looks like a speech bubble or a note symbol.
- Alternatively, you can use the keyboard shortcut Shift T. Using shortcuts can speed up your workflow significantly.
- Select the Layer:
- Once the tool is active, select the layer or object on the canvas that you wish to annotate. Figma will then display a visual indicator near the selected element.
- Write Your Note or Add Properties:
- A text field will appear, allowing you to write a note. This note can be any plain text you need to communicate.
- For more structured information, you can click + Property to select a property from a predefined list set up for your project (e.g., Status, Assignee, Link).
- You can include both plain text and properties in an annotation, combining freeform notes with structured data.
What Can You Include?
As mentioned, annotations are flexible:
- Plain Text: Use this for general comments, explanations, or instructions related to the layer.
- Properties: Add specific, categorized information. Properties are powerful for tracking work status, assigning tasks, or linking to external resources like Jira tickets or documentation.
Practical Uses
Annotations are incredibly versatile:
- Design Handoff: Specify measurements, interactions, or development notes for specific components.
- Feedback: Provide targeted feedback on particular elements rather than the whole frame.
- Documentation: Link components to design system documentation or specification sheets.
- Task Management: Assign ownership or track the status of design elements (e.g., "Ready for Dev", "Needs Review").
Summary of Methods
| Method | Description |
|---|---|
| Toolbar Icon | Click the 'Annotate' icon in the toolbar. |
| Keyboard Shortcut | Use the shortcut Shift T. |
Adding annotations helps clarify your design intent and streamlines communication within your team, ensuring everyone is on the same page regarding specific design elements.
