Add measurements and annotate designs
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
Use annotations and measurements to create speedier and more transparent handoffs that stay up-to-day, even as designs change.
With annotations, designers can communicate and connect key details directly to designs:
- Highlight important properties so developers can't miss them
- Help developers quickly visualize specs like spacing and sizing
- Share additional context with text notes
- Create and categorize annotations for easier navigation
Developers can see annotations update in real time as they work in Dev Mode, ensuring they don’t miss any crucial callouts during handoff.
Add measurements to a design
Adding measurements to quickly visualize spacing and sizing between components.
To add a measurement to a design:
- Click Measurement in the toolbar or use the keyboard shortcut Shift M.
- Hover over a layer to see options for where to start your measurement.
- Click and drag from your starting point to the layer where you want the measurement to end.
- Click and drag the measurement so it doesn’t cover the design.
- You can double-click on the measurement to customize its text.
Tip: To delete a measurement, click it and press the Delete or Backspace key.
Add annotations to a design
Designers can add annotations to provide context, define design properties, or communicate other relevant information for developers to turn design into code. You can annotate a layer’s defined properties, like alignment direction or sizing, or provide additional details with free text. Even if designs are later updated, annotation properties stay-up-to-date and accurate, ensuring nothing gets lost in translation.
You can add annotations from Design or Dev Mode. To add annotations to a design:
- Click Annotation in the toolbar or use the keyboard shortcut Shift T.
- Select the layer you’d like to annotate.
- Write a note in the text field, or click + Property to select a property from the list. You can include both plain text and properties in an annotation.
Categorize annotations
Give annotations even more clarity by categorizing them. Categories help distinguish different types of annotations, making it easier to scan for relevant information.
Editors can use the default labels, as well as edit or delete those categories. Category labels only apply to the current file - nothing will change in other files when you edit or delete the default categories.
Figma design files come with preset annotation categories:
- Development
- Interaction
- Accessibility
- Content
To add a new category:
- Select an existing annotation or create a new one, then click the category dropdown.
- Click Edit categories…
- Click , then select a color and type in a name for your new category label.
Note: Copying layers that have annotations with categories will copy over the category from the source file to the target file. If there is no exact match in the target file (color and label), a new category is defined.
Tip: With the plugin API, teams can build custom Dev Mode plugins to create and manage annotations in bulk.
Filter by category
You can filter annotations by category, making it even easier to find the details you need on the canvas. There are a couple of ways to filter annotations by category:
Right-click menu
- Right-click an annotation on the canvas.
- Select Filter by.
- Select which category you want to filter by, or select All categories.
Zoom menu in Dev Mode
- Click the zoom dropdown in the Dev Mode right sidebar.
- Hover over Annotations.
- Select which category you want to filter by, or select All categories.
Hide annotations
All annotations on a Figma Design file are visible in Dev Mode by default. To hide annotations:
- Click Main menu in the toolbar.
- Hover over View in the dropdown.
- Deselect Annotations.
Tip: To delete an annotation, click it and press the Delete or Backspace key.
Before you Start
Who can use this feature
Available on all paid plans
Anyone with a full Design seat can edit
annotations in Dev Mode
Anyone with a Dev Mode seat can view
annotations in Dev Mode
Create speedier and more transparent handoffs with annotations and measurements that stay up-to-date, even as designs change.
With annotations, designers can communicate and connect key details directly to designs:
- Highlight important properties so developers can't miss them
- Help developers quickly visualize specs like spacing and sizing
- Share additional context with text notes
Developers can see designers’ annotations in real time as they work in Dev Mode, ensuring they don’t miss any crucial callouts during handoff.
Tip! While in Design Mode, you’ll get notified when new annotations have been added to a file. Click on the dot next to the design and select View annotations in Dev Mode to see the updated annotations in Dev Mode.
Add measurements to a design
Adding measurements helps developers quickly visualize spacing and sizing.
To add a measurement to a design:
- Click the Dev Mode toggle in the top-right of the toolbar or use the keyboard shortcut Shift D.
- Click Measure in the toolbar or use the keyboard shortcut Shift M.
- Hover over a layer to see options for where to start your measurement.
- Click and drag from your starting point to the layer where you want the measurement to end.
- Click and drag the measurement so it doesn’t cover the design.
Tip! To delete a measurement, click it and press the Delete or Backspace key.
Add annotations to a design
Designers can add annotations to provide context, define design properties, or communicate other relevant information for developers to turn design into code. A mix of free text and defined properties, like alignment direction or sizing, can be annotated. Even if designs are later updated, annotation properties stay-up-to-date and accurate, ensuring nothing gets lost in translation.
To add annotations to a design:
- Click the Dev Mode toggle in the top-right of the toolbar or use the keyboard shortcutShift D.
- Click Annotate in the toolbar or use the keyboard shortcut Shift T.
- Select the layer you’d like to annotate.
- Write a note in the text field, or click + Property to select a property from the list. You can include both plain text and properties in an annotation.
Tip! With the plugin API, teams can build custom Dev Mode plugins to create and manage annotations in bulk.
Hide annotations
All annotations on a Figma Design file are visible in Dev Mode by default. To hide annotations:
- Click Main menu in the toolbar.
- Hover over View in the dropdown.
- Deselect Annotations.
Tip! To delete an annotation, click it and press the Delete or Backspace key.