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
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
1) Click the pencil icon to edit your text
2) Make your changes and click Enter/Return to save
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.
You can align the numbered dots by extending them to the edge of the annotation area. They will automatically align.
1) Hover over your annotation label
2) Select the trash icon to delete your annotation. It will renumber your annotations accordingly.
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
Change annotation label color
You can change the color of your annotation labels in the Styleguide settings under Design uploads
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.