【Figma Plugins】Figma Pluginsで通知を表示する #JavaScript

はじめに

FigmaのPluginを開発する際、Figma Pluginsから通知を表示させたいと思ったことはありますか？
この記事では、Figma Pluginsから通知を表示させる方法を解説します。

Figma Pluginsで通知を表示する

Figma Pluginsで通知を表示するには、figma.notify() を使うことで、通知を表示させることができます。

figma.notify() の引数には、メッセージ・option を渡すことができます。

figma.notify(message: String, options?: NotificationOptions)

option には、以下の値を渡すことで、通知をカスタマイズすることができます。

timeout：通知を表示する時間を指定することができる(ミリ秒)
- デフォルト：3秒
- infinityを指定すると、閉じられるまで無期限に表示させる
error：エラー通知の見た目に変更することができる
onDequeue：通知が非表示になった時、実行される関数
button：通知にボタンを追加する
- text：ボタンのテキスト
- action：ボタンを押した時に実行される関数

interface NotificationOptions {
  timeout?: number;
  error?: boolean;
  onDequeue?: (reason: NotifyDequeueReason) => void
  button?: {
    text: string
    action: () => boolean | void
  }
}

以下のように、通知とエラー通知で見た目が変わります。

通知	エラー通知

詳しくはこちらをご覧ください。

実際に使ってみる

⚪︎ デフォルト

sample.ts

const setNotification = () => {
  figma.notify("The process is underway")
}

デフォルトの通知は、上記のように記載することで、以下のような通知を表示させることができます。

⚪︎ オプション全のせ

sample.ts

const setNotification = () => {
  figma.notify(
    "The process is underway",
    {
      timeout: 10000,
      error: false,
      onDequeue: () => { /* 削除時に実行する処理 */ },
      button: {
        text: "Skip the process",
        action: () => { /* ボタンを押した時に実行する処理 */ }
      }
    }
  )
}

こんな感じに記載することで、シンプルですが、以下のような通知を表示させることができます。

⚪︎ 通知を削除する

const notification = figma.notify(
  "The process is underway",
  {
    timeout: Infinity
  }
)

notification.cancel()

cancel() を使うことで、通知を削除することができます。

まとめ

この記事では、Figma Pluginsから通知を表示させる方法を紹介しました。
ぜひこの記事を参考にFigma Pluginsから通知を表示させてみてください。

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

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

【Figma Plugins】Figma Pluginsで通知を表示する