はじめに

みなさんは、Figma Widget を開発する際、非同期処理を行いたいと思ったことはありますか？

この記事では、Figma Widgetで非同期処理を行う方法について解説しようと思います。

非同期処理を行う

非同期処理を行うには、waitForTask という関数を使う必要があります。

waitForTask 関数は、引数に Promis を受け取り、Promis が解決されるまでウィジェットを維持します。

waitForTask(task: Promise<any>): void

waitForTask 関数の主な使用方法は、ウィジェットが挿入されたときにデータをフェッチすることです。
useEffect と組み合わせることで、iframe 経由でネットワークリクエストを行い、その応答をウィジェットの状態に保持できます。

waitForTask 関数は、以下のように引数に Promis を渡します。

waitForTask( new Promise(() => {
  /* 非同期処理 */
}))

この記事では、Figma Widgetで非同期処理を行う方法について解説しました。
ぜひこの記事を参考に、Figma Widgetで非同期処理を行なってみてください！

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

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