🚧 Dev Mode is out of beta
Dev Mode in Figma gives developers everything they need to transform designs into code. Starting January 31, Dev Mode will require a paid seat to access.
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.
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.