Search

Create anatomy diagrams with annotations

Chi
Chi
  • Updated

You can create anatomy diagrams and annotate your design uploads in zeroheight. This will help your team communicate important details about your components in the designer/developer handoff.

We currently support uploads from Figma, Sketch, and Adobe XD. We don't support the ability to create anatomy diagrams of design uploads from Zeplin.

Enter annotation mode

1) In Inspect mode, toggle on Annotate design uploads 

Add annotations

1) Select the area you want to annotate and drag a line away from the upload. 2) Under Annotations, write your annotation label and click Enter/Return. You can also do multi-lane annotation labels. There's no character limit or maximum number of labels you can create. 3) Continue adding annotation labels 

Edit annotations

1) Click the pencil icon to edit your text 2) Make your changes and click Enter/Return to save 

Arrange annotations

Annotation numbering is based on the order in the inspect sidebar. You can move labels to change the numbering by dragging a label to a new spot. 

Align annotations

You can align the numbered dots by extending them to the edge of the annotation area. They will automatically align. The numbered dots for the labels are aligned on the left side of the annotation area.

Delete annotations

1) Hover over your annotation label 2) Select the trash icon to delete your annotation. It will renumber your annotations accordingly. 

Display annotations

You can display your annotations within your design system. 1) In a design uploads block, choose Layout settings 2) Toggle on Show annotations 3) To edit your annotations, select Edit underneath your annotation labels Design uploads settings shows display annotions toggled on.

Change annotation label color

You can change the color of your annotation labels in the theme editor under Design uploads

FAQs

Can you annotate when inspect is disabled?

Yes! Toggle on Display annotations from the design upload block settings, and you’ll see a prompt to add annotations.

Can you display component properties, variants or Figma descriptions alongside annotations?

No, if you choose to display annotations, you cannot display Figma descriptions, notes, or component properties and variants.

What happens if I update a component in my design file and resync with zeroheight?

The annotations will stay on the canvas when the component updates. We recommend reviewing your anatomy diagrams after making any changes to a component and updating the annotations.

What happens to the annotations if I create a new version of my component?

The annotations for the previous version component will stay the same within the inspect mode from when that version was created.

Was this article helpful?