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:

1. Click Measurement in the toolbar or use the keyboard shortcut Shift M.
2. Hover over a layer to see options for where to start your measurement.
3. Click and drag from your starting point to the layer where you want the measurement to end.
4. Click and drag the measurement so it doesn’t cover the design.
5. You can double-click on the measurement to customize its text.

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:

1. Click Annotation in the toolbar or use the keyboard shortcut Shift T.
2. Select the layer you’d like to annotate.
3. 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:

1. Select an existing annotation or create a new one, then click the category dropdown.
2. Click Edit categories…
3. Click , then select a color and type in a name for your new category label.

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

1. Right-click an annotation on the canvas.
2. Select Filter by.
3. Select which category you want to filter by, or select All categories.

Zoom menu in Dev Mode

1. Click the zoom dropdown in the Dev Mode right sidebar.
2. Hover over Annotations.
3. 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:

1. Click Main menu in the toolbar.
2. Hover over View in the dropdown.
3. Deselect Annotations.