【Figma Plugins】Figma Pluginsからバージョン履歴にアクセスする

はじめ

FigmaのPluginを開発する際、Figma Pluginsからバージョン履歴にアクセスしたいと思ったことはありますか？
この記事では、Figma Pluginsからバージョン履歴にアクセスする方法を解説します。

バージョン履歴に保存する

バージョンヒストリーに保存するには、saveVersionHistoryAsync という関数を使います。

引数には、title と description を受け取ることができます。

• title：バージョンのタイトル
• description：バージョンを表す説明

saveVersionHistoryAsync(
    title: string,
    description?: string
): Promise<VersionHistoryResult>

saveVersionHistoryAsync の戻り値は、Promiseの<VersionHistoryResult>が返ります。

interface VersionHistoryResult {
  id: string
}

詳しくは、以下のリンクをご確認ください！

注意事項

このメソッドを使用する前に行われたすべての変更がバージョン履歴に保存される訳ではありません！

例えば、以下のような場合、figma.createRectangle() で作成した Rectangle が保存されることは保証されません。

async function example() {
  await figma.createRectangle();
  await figma.saveVersionHistoryAsync('v1');
  figma.closePlugin();
}
example().catch((e) => figma.closePluginWithFailure(e))

そのため、以下のように保存する前に一時処理を止めてから保存すると、バージョン履歴に保存されます。

async function example() {
  await figma.createRectangle();
  await new Promise(r => setTimeout(r, 1000)); // wait for 1 second
  await figma.saveVersionHistoryAsync('v1');
  figma.closePlugin();
}

バージョン履歴を取得する

バージョン履歴を取得するには、FigmaのREST APIから取得する必要があります。

API周りは以下の記事を参考にアクセスしてみてください。

const FILE_KEY = "**********************"
const TOKEN = "********************************************"

const getVersionHistory = async () => {
  const response = await fetch(
    `https://api.figma.com/v1/files/${FILE_KEY}/versions`,
    {
      method: "GET",
      headers: {
        "X-Figma-Token": TOKEN
      }
    }
  )

レスポンスは、以下のようになります。

{
  "versions": [
    {
      "id": "**********",
      "created_at": "2024-06-29T03:56:12Z",
      "label": null,
      "description": null,
      "user": {
        "handle": "**********",
        "img_url": "https://s3-alpha.figma.com/profile/**********",
        "id": "**********"
      },
      "thumbnail_url": "https://s3-alpha-sig.figma.com/thumbnails/**********"
    }
  ],
  "pagination": {
    "prev_page": "https://api.figma.com/v1/files/**********/versions?page_size=**&before=**********"
  }
}

まとめ

この記事では、Figma Pluginsからバージョン履歴にアクセスする方法を解説しました。
ぜひこの記事を参考にして、バージョン履歴にアクセスしてみてください！

---

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

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