Skip to main content

Annotation

Annotations let you add notes and pin properties to nodes in Dev Mode.

The annotations field is supported on the following node types: ComponentNode, ComponentSetNode, EllipseNode, FrameNode, InstanceNode, LineNode, PolygonNode, RectangleNode, StarNode, TextNode, VectorNode.

Annotation properties​

interface Annotation {
  readonly label?: string
  readonly labelMarkdown?: string
  readonly properties?: ReadonlyArray<AnnotationProperty>
  readonly categoryId?: string
}

See AnnotationProperty for supported properties.

Annotation node properties​

annotations: ReadonlyArray<Annotation>

Annotations on the node.

Learn more about annotations in the Help Center or see the Annotation type for usage examples.

Example usage​

const node = figma.currentPage.selection[0]

// Add an annotation note
node.annotations = [{ label: 'Main product navigation' }]

// Pin the fill property
node.annotations = [{ properties: [{ type: 'fills' }] }]

// Add an annotation with a note and width property pinned
node.annotations = [
  { label: 'Pressing activates animation', properties: [{ type: 'width' }] },
]

// Add a rich-text annotation label with markdown
node.annotations = [
  { labelMarkdown: '# Important \n Pressing activates a *fun* animation' },
]

// Add multiple annotations with annotation categories
categories = await figma.annotations.getAnnotationCategoriesAsync()
interactionCategory = categories[1]
a11yCategory = categories[2]

node.annotations = [
  {
    label: 'Pressing activates animation',
    categoryId: interactionCategory.id,
  },
  {
    label: 'Fill in aria-label with i18n string',
    categoryId: a11yCategory.id,
  },
]

// Clear an annotation
node.annotations = []