【Figma Plugins】Figma PluginsでAnnotationを作成する

はじめに

FigmaのPluginを開発する際、Annotationを作成したいと思ったことはありますか？
この記事では、Figma PluginsでAnnotationを作成する方法を解説します。

Annotationを作成する

Annotationを作成するには、editorType が devの時のみ設定できます。
Anotationを読み取るには、どのモードでも可能です。

Annotationを作成するには、annotations を利用することで、Annotationが作成されます。

annotations: ReadonlyArray<Annotation>

annotationsのInterfaceは以下のようになっています。

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

Annotationを作成できるのは、以下のノードタイプでサポートされています。

• ComponentNode
• ComponentSetNode
• EllipseNode
• FrameNode
• InstanceNode
• LineNode
• PolygonNode
• RectangleNode
• StarNode
• TextNode
• VectorNode

使い方

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' }] },
]

// Clear an annotation
node.annotations = []

まとめ

この記事では、Figma PluginsでAnnotationを作成する方法を解説しました。
ぜひこの記事を参考にAnnotationを作成してみてください！

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。