Anatomy diagrams

Brienne Wong
Brienne Wong
  • 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.

Anatomy diagram of a button component

Enter annotation mode

1) In Inspect mode, toggle on Annotate design uploads

Gif showing how to toggle on annotation mode

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

Gif showing how to add annotation label

Edit annotations

1) Click the pencil icon to edit your text

2) Make your changes and click Enter/Return to save

Edit annotations function hovered over in annotation list

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.

Annotation label is hovered over to be dragged.

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.

Delete annotation function is hovered over in annotation list

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 Styleguide settings under Design uploads

Change the annotation appearance in the design uploads section of the styleguide settings.

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 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?