既存のFigmaプラグインをDynamic Page Loadingに対応させる

私は「Smart Chroma」というFigmaプラグインを開発しています。

• Smart Chroma | Figma

先日、Figmaから「ファイルの読み込み時間を短縮するDynamic Page Loadingをロールアウト中だから、プラグインを新しいAPIに対応させてね」というメールが届きました。現時点で既存のプラグインを必ずしも修正する必要はありませんが、4月以降に新規公開する場合は必ず対応する必要があるようです。

ということで、今回は公式のガイドに従いながら、既存のFigmaプラグインをDynamic Page Loadingに対応させる方法を紹介します。

型定義を更新する

新しいAPIが追加されたり、既存のAPIが非推奨になっていたりするので、まずは型定義を更新します。GitHubのコミット履歴を見たところ、v1.88.0以降にアップデートすれば良さそうでした。

この作業は、TypeScriptを使用していない場合は不要です。

npm uninstall @figma/plugin-typings
npm install -D @figma/plugin-typings

ESLintを追加する

更新が必要な箇所を半自動的に修正してくれるESLintのプラグインが提供されています。まだESLintを導入していない場合は導入してから、プラグインをインストールします。

npm install -D @figma/eslint-plugin-figma-plugins

1
{
2
    "extends": [
3
        "eslint:recommended",
4
        "plugin:@typescript-eslint/recommended",
5
        "plugin:@figma/figma-plugins/recommended"
6
    ],
7
    // ...
8
}

あとは、ESLintにしたがって修正すれば、対応が完了します。

私の場合は、とくに修正が必要な箇所はなさそうでした。Dynamic Page Loadingではプロジェクトを動的に読み込むようになるため、要素を検索して取得するようなコードがある場合は修正が必要です。

マニフェストの修正

manifest.jsonに"documentAccess": "dynamic-page"を追加します。これによって、プラグインがDynamic Page Loadingに対応していることをFigmaに伝えられます。

1
{
2
    // ...
3
    "documentAccess": "dynamic-page"
4
}

アップデートの公開

ここまでの修正が完了したら、Figmaで正しくプラグインが動作することを確認して、アップデートを公開します。お疲れ様でした！

おまけ

プラグインを公開してから1年間アップデートしていなかったので、開発中のプラグインをFigmaに読み込む方法が変わっていて戸惑いました。

以前はプロフィールのアイコンをクリックして設定の中から読み込めたと思うのですが、現在は任意のファイルを開いて左上のFigmaロゴをクリックし、［プラグイン］>［開発］>［マニフェストからプラグインをインポート］から読み込めるようです。

また、依存関係をまとめてアップデートしたせいで、エラーが出て2時間半くらい悩みました。結局、HCT色空間を扱うために使っていた@material/material-color-utilitiesが原因でした。

material-color-utilitiesを使うコードをバックエンドからUIのコード（フロントエンド）に移動したら動きました。たぶん、Figmaのプラグインのバックエンドで実行できる処理には制限があり、その制限に引っかかってしまったのでしょう。

私が公開しているSmart Chromaの詳しい仕組みはこちらの記事で解説しているので、気になる方はぜひ読んでみてください。

人間の色覚にもとづいたカラーパレットを生成するFigmaプラグインを作った - Qiita

半年ほど前の話になりますが、人間の視覚にもとづいたカラーパレットを生成する「Smart Chroma」というFigmaプラグインを作りました。この記事では、プラグインを作った理由や難しかった点について書いていきます。 作ったもの Smart Chromaは、人間の...

qiita.com

参考

• Version 1, Update 87 | Plugin API
• Migrating Plugins to Dynamically Load Pages | Plugin API