【Figma Plugins】Figma PluginsでAnnotationの取得・作成を行う

はじめに

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

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

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

• label：プレーン テキスト
• labelMarkdown：markdownテキスト
• properties：プロパティ
  • サポートされているプロパティはこちらを参考にしてください
  • 参考：AnnotationProperty

Annotationを取得する

① Annotationを作成する選択したフレームを取得する

選択したフレームの最初のノードを取得します。

const node = figma.currentPage.selection[0];

② Annotationを取得する

const node = figma.currentPage.selection[0];

// labelを取得する
const label = node.annotation.label
console.label(label) //出力: Main product navigation

// labelMarkdownを取得する
const labelMarkdown = node.annotation.labelMarkdown
console.label(labelMarkdown) //出力: ## Main product navigation

// propertiesを取得する
const properties = node.annotation.properties
console.label(properties) //出力: [0: {type: 'fills'}, 1: {type: 'width'}]

Annotationを作成する

① Annotationを作成する選択したフレームを取得する

選択したフレームの最初のノードを取得します。

const node = figma.currentPage.selection[0];

② Annotationを作成する

const node = figma.currentPage.selection[0];
node.annotation = [{
  label: 'annotation label',
  labelMarkdown: '# annotation markdown label',
  properties: [
    {type: 'fills'},
    {type: 'width'}
  ]
}]

まとめ

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

---

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

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