FigmaのREST APIで画像を書き出す

FigmaのREST APIを使って、画像を書き出す方法を試してみます。

認証について

REST APIを使用する際、認証が必要になります。
方法としてはアクセストークンとOAuth2がありますが、アクセストークンでの認証方法については以前に記事を投稿していますので、方法についてはそちらをご確認ください。

使用方法

画像を取得する場合のエンドポイントは下記になります。

https://api.figma.com/v1/images/【ファイルキー】

このエンドポイントを使って、画像を取得してみます。

const ACCESS_TOKEN = 'アクセストークン'; // Figmaのアクセストークン
const API_URL = 'https://api.figma.com/';

const FILE_KEY = 'ファイルキー'; // 取得したいFigmaファイルのキー
const NODE_ID = '1-3,1-4,1-5'; // 画像として書き出すノードID
const SCALE = '2'; // 書き出す倍率

const queryParams = new URLSearchParams();
if (NODE_ID) queryParams.append('ids', NODE_ID);
if (SCALE) queryParams.append('scale', SCALE);
const url = `${API_URL}v1/images/${FILE_KEY}/?${queryParams.toString()}`;

async function fetchFigmaImg() {
  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);
  }
}

fetchFigmaImg();

コード内6行目で指定していますが、今回は2倍サイズの指定にしています。

上記コードを実行したところ、指定したノードIDの画像のURLが返ってきました。
注意点として、このURLは有効期限30日となっているようです。

{
  "err": null,
  "images": {
    "1:3": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "1:4": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    "1:5": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  }
}

上記URLで取得できる画像は全てpng形式になっていたので、次はフォーマットの指定を試してみます。

const ACCESS_TOKEN = 'アクセストークン'; // Figmaのアクセストークン
const API_URL = 'https://api.figma.com/';

const FILE_KEY = 'ファイルキー'; // 取得したいFigmaファイルのキー
const NODE_ID = '1-3,1-4,1-5'; // 画像として書き出すノードID
const SCALE = '2'; // 書き出す倍率

const queryParams = new URLSearchParams();
if (NODE_ID) queryParams.append('ids', NODE_ID);
if (SCALE) queryParams.append('scale', SCALE);
queryParams.append('format', 'jpg');
const url = `${API_URL}v1/images/${FILE_KEY}/?${queryParams.toString()}`;

async function fetchFigmaImg() {
  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);
  }
}

fetchFigmaImg();

これで実行すると画像URLは変更され、取得した画像はjpg形式になっていました。

scaleやformatを指定する際の注意点として、このオプションの指定は単一になるので、ノードIDを複数指定している場合すべてにそのオプションが適用されるようです。
拡大率や形式を画像毎に変更したい場合、リクエストを分ける必要があります。