FigmaのREST APIを使ってみる

FigmaのREST APIの使い方を調べる機会があったので、調べた内容をメモ。

アクセストークンの取得

Figma REST APIのエンドポイントにアクセスする認証方法として、以下の2つが用意されています。

• アクセストークン
• OAuth2

今回はアクセストークンを使った方法を試してみます。
Figmaのホーム画面で、左上のアカウントメニューから設定を選択します。

セキュリティタブを選択して、個人アクセストークンの項目で新規トークンを作成をクリックします。

トークンの名前と有効期限、スコープを設定します。
今回は「ファイルのコンテンツ」を読み取りのみに変更しました。

設定が終わったら右下のトークンを生成をクリックします。

トークンが表示されるので、コピペして保存しておいてください。
次回以降は確認できないため、わからなくなった場合は作り直す必要があります。

使用方法

まずは取得したいFigmaデータのファイルキーを取得します。
ファイルキーはFigmaファイルのURLから取得することができ、例えばデザインデータの場合は以下のようなURL構造になります。

https://www.figma.com/design/ファイルキー/ファイル名

これでアクセストークンとファイルキーの取得ができたので、下記JavaScriptコードで使ってみます。

const FILE_KEY = 'ファイルキー'; // ファイルキー
const ACCESS_TOKEN = 'アクセストークン'; // アクセストークン
const url = `https://api.figma.com/v1/files/${FILE_KEY}`;

async function fetchFigmaFile() {
  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'X-Figma-Token': ACCESS_TOKEN
      }
    });

    if (!response.ok) {
      throw new Error(`API error: ${response.status} ${response.statusText}`);
    }

    const data = await response.json();
    console.log(JSON.stringify(data, null, 2));
  } catch (error) {
    console.error(error.message);
  }
}

fetchFigmaFile();

これで動作を試してみたところ、以下のようなjsonを取得できていることを確認できました。
(一部調整しています。)

{
  "document": {
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "scrollBehavior": "SCROLLS",
    "children": [
      {
        "id": "0:1",
        "name": "Page 1",
        "type": "CANVAS",
        "scrollBehavior": "SCROLLS",
        "children": [
          {
            "id": "1:2",
            "name": "APIテスト用。これはテキストレイヤーで記述しています。",
            "type": "TEXT",
            "scrollBehavior": "SCROLLS",
            "blendMode": "PASS_THROUGH",
            "fills": [
              {
                "blendMode": "NORMAL",
                "type": "SOLID",
                "color": {
                  "r": 0,
                  "g": 0,
                  "b": 0,
                  "a": 1
                }
              }
            ],
            "strokes": [],
            "strokeWeight": 1,
            "strokeAlign": "OUTSIDE",
            "absoluteBoundingBox": {
              "x": 50,
              "y": 50,
              "width": 317,
              "height": 15
            },
            "absoluteRenderBounds": {
              "x": 50.306819915771484,
              "y": 51.93199920654297,
              "width": 308.474365234375,
              "height": 11.088001251220703
            },
            "constraints": {
              "vertical": "TOP",
              "horizontal": "LEFT"
            },
            "characters": "APIテスト用。これはテキストレイヤーで記述しています。",
            "characterStyleOverrides": [],
            "styleOverrideTable": {},
            "lineTypes": [
              "NONE"
            ],
            "lineIndentations": [
              0
            ],
            "style": {
              "fontFamily": "Inter",
              "fontPostScriptName": null,
              "fontStyle": "Regular",
              "fontWeight": 400,
              "textAutoResize": "WIDTH_AND_HEIGHT",
              "fontSize": 12,
              "textAlignHorizontal": "LEFT",
              "textAlignVertical": "TOP",
              "letterSpacing": 0,
              "lineHeightPx": 14.522727012634277,
              "lineHeightPercent": 100,
              "lineHeightUnit": "INTRINSIC_%"
            },
            "layoutVersion": 4,
            "effects": [],
            "interactions": []
          }
        ],
        "backgroundColor": {
          "r": 0.9607843160629272,
          "g": 0.9607843160629272,
          "b": 0.9607843160629272,
          "a": 1
        },
        "prototypeStartNodeID": null,
        "flowStartingPoints": [],
        "prototypeDevice": {
          "type": "NONE",
          "rotation": "NONE"
        }
      }
    ]
  },
  "components": {},
  "componentSets": {},
  "schemaVersion": 0,
  "styles": {},
  "name": "APIテスト用ファイル",
  "lastModified": "YYYY-MM-DDTHH:MM:SSZ",
  "thumbnailUrl": "https://s3-alpha.figma.com/thumbnails/XXXXX",
  "version": "XXXXXXXXXXXXXXXXXXX",
  "role": "owner",
  "editorType": "figma",
  "linkAccess": "view"
}