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

## はじめに
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e47e84e5-413b-caa4-616a-8f8006645acc.png)
FigmaのPluginを開発する際、Figma PluginsでAPIリクエストを行いたいと思ったことはありますか？
この記事では、Figma PluginsでAPIリクエストを行う方法を解説します。

## FigmaのFetch API
Figma PluginsでAPIリクエストを行うには、Figmaの[Fetch API](https://www.figma.com/plugin-docs/api/properties/global-fetch/)を使用します。

FigmaのFetch APIは、ブラウザーで標準となっている[WhatWG Fetch API](https://fetch.spec.whatwg.org/)と同様の方法で使用できます。

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

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

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

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

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

```ts
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>
}
```

https://www.figma.com/plugin-docs/api/properties/global-fetch/

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

https://www.figma.com/plugin-docs/making-network-requests/#limit-network-access

### ① ネットワークにアクセスできるようにする
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](https://www.figma.com/plugin-docs/api/properties/global-fetch/)を使用して、以下のように記述することで、APIリクエストを行い、JSON形式のレスポンスをコンソールに表示しています。

```ts
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"` とコンソールで表示されたら完成です。

![スクリーンショット 2024-06-26 0.35.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f39fd29e-60fe-c74b-cb06-9f48a81d76de.png)


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

---

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

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

https://twitter.com/degudegu2510