【Figma Plugins】Figma PluginsでAPIリクエストを行う

はじめに

FigmaのPluginを開発する際、Figma PluginsでAPIリクエストを行いたいと思ったことはありますか？
この記事では、Figma PluginsでAPIリクエストを行う方法を解説します。

FigmaのFetch API

Figma PluginsでAPIリクエストを行うには、FigmaのFetch APIを使用します。

FigmaのFetch APIは、ブラウザーで標準となっているWhatWG Fetch APIと同様の方法で使用できます。

FigmaのFetch APIは、以下のように、urlとintiを引数で受け取り、レスポンスとともにプロミスを返します。

fetch(url: string, init?: FetchOptions): Promise<FetchResponse>

FetchOptions は、以下のような型になっています。

interface FetchOptions {
  method?: string
  headers?: {[name: string]: string}
  body?: Uint8Array | string
  credentials?: string
  cache?: string
  redirect?: string
  referrer?: string
  integrity?: string
}

FetchResponse は、以下のような型になっています。

interface FetchResponse {
  headersObject: {[name: string]: string}
  ok: boolean
  redirected: boolean
  status: number
  statusText: string
  type: string
  url: string
  arrayBuffer(): Promise<ArrayBuffer>
  text(): Promise<string>
  json(): Promise<any>
}

Figma PluginsでAPIリクエストを行う

では、早速APIリクエストを行なっていきます。↓こちらの記事を参考に解説していきます。

① ネットワークにアクセスできるようにする

FigmaのPluginsには、manifest.json の networkAccess の部分で、アクセスを許可するドメインを指定することができます。
そのため、APIリクエストを送りたいドメインをallowedDomainsに指定することで、アクセスできるようになります。

manifest.json

{
  ...
  "networkAccess": {
    "allowedDomains": ["https://httpbin.org"],
    "reasoning": "MyPlugin queries httpbin.org/get for example responses.",
    "devAllowedDomains": []
  }
}

networkAccess には、allowedDomains・reasoning・devAllowedDomainsの３つがあり、それぞれ以下のようなことを指定することができます。

• allowedDomains（必須項目）
  • アクセスを許可するドメインを指定することができる
  • 例） 特定のドメインのみ許可：
    • "allowedDomains": ["https://...", "https://..."]
  • 例） 全てのドメインを許可
    • "allowedDomains": ["*"]
  • 例） 全てのドメインを許可しない
    • "allowedDomains": ["none"]
• reasoning
  • アクセスを許可したドメインが、どうしてアクセスする必要があるのかを説明する
  • 例） "reasoning": "MyPlugin queries https:// for example."
• devAllowedDomains
  • localhostなどの開発中の時にアクセスを許可するドメインをしているすることができる
  • 例）"devAllowedDomains": ["http://localhost:3000"]

② APIリクエストを行う

FigmaのFetch APIを使用して、以下のように記述することで、APIリクエストを行い、JSON形式のレスポンスをコンソールに表示しています。

const RequestAPI = async () => {
  const response = await fetch('https://httpbin.org/get?success=true')
  const json = await response.json()

  console.log(JSON.stringify(json.args, null, 2))
}

③ APIリクエストが行われているか確認する

最後にFigmaでAPIリクエストが行われているか確認する。
以下のように "success": "true" とコンソールで表示されたら完成です。

まとめ

この記事では、Figma PluginsでAPIリクエストを行う方法を解説しました。
この記事を参考にFigma PluginsでAPIリクエストをしてみてください。

---

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

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