'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Add measurements and annotate designs in Dev Mode
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 →
Before you Start
Who can use this feature
Available on all paid plans
Anyone with a full Design seat and can edit access to a file can add annotations
Anyone with a full Design seat or a Dev Mode seat and at least can view access to a file can view annotations
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 annotations update 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.
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.