0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Documentation

Annomate Docs

Everything you need to know about installing, using, and getting the most out of Annomate.

Quick Start

Getting Started

1

Install Annomate

Open Figma Community, search for Annomate, and install the plugin.

Direct install link
2

Select a design element

Choose one canvas layer. The plugin enables annotation creation only when exactly one element is selected.

3

Fill required fields

Add a title and content, pick a position, and choose a theme color. Optional fields include link, tags, and author name.

4

Create annotation

Click Create Annotation. Annomate adds a grouped annotation with content card, dashed connector, and anchor dot.

Core Workflow

Annotation Flow

Annomate uses four placement directions and computes line endpoints based on selected element bounds and annotation frame position.

Position
Placement behavior
Top
Annotation appears above container and connects to element top center.
Bottom
Annotation appears below container and connects to element bottom center.
Left
Annotation appears left of container and connects to element left center.
Right
Annotation appears right of container and connects to element right center.
Annomate finds the outermost parent container, then positions annotations outside that container to avoid overlap.
Formatting

Markdown Support

Content parsing supports lightweight markdown and converts list syntax into readable annotation text.

Syntax
Result
**bold**
Bold text range
*italic*
Italic text range
- item
Bullet list item (•)
1. item
Numbered list item
[Label](https://...)
Hyperlinked text if URL is valid
Display

Themes and Tags

Annomate includes six preset themes plus custom color picker mode. Tags can be selected, added, edited, and deleted with persistent colors.

Theme presets

Red, Green, Blue, Orange, Purple, and Gray color tokens.

Custom color

Any hex value can be applied through color picker mode.

Smart links

Known domains map to readable labels like View in JIRA or View in Notion.

Show author

Adds current Figma user name to annotation footer section.

Reuse

Presets

Presets store annotation setup so repeated QA and handoff comments stay consistent.

Save preset with current position, title, theme, tags, link, and author option.
Apply preset to restore style settings while keeping current content editable.
Rename presets in preset manager.
Update or delete presets from storage.
Update Flow

Editing Existing Notes

Selecting an existing Annomate group enters edit mode. The plugin loads stored annotation data and switches the primary action to update.

Edit mode updates annotation content and style while preserving the existing annotation group on canvas.
Troubleshooting

Tips

1

Selection required

Create action stays disabled until one element is selected and required fields are filled.

2

Link validation

Use full URLs with http or https for clickable links in annotation content.

3

Font availability

Plugin loads Inter first, then Arial fallback. Missing fonts can affect styling fidelity.

4

Tag consistency

Use shared tag names for workflows like Bug, Review, and Done to keep handoff searchable.