はじめに
こんにちは！ 株式会社WebCrewのデザイナー @wc-nakagomi です。
今回は、前回の記事の最後に「1年前までVSCodeも使えなかったデザイナーでも、AIを使えばプラグインは意外と作れる」と予告していた話です。
実際の流れがあった方がわかりやすいと思ったので、どうやって作るのかをFigmaプラグイン第3弾 「Renumber Page Numbers」 を元にご紹介します。
コードの中身の解説というよりは、デザイナーがゼロから公開までたどり着くまでの流れがメインになります。
プラグイン第1・2弾はこちら↓
今回作成したプラグインページはこちら↓
https://www.figma.com/community/plugin/1680142022790029730/renumber-page-numbers
作ったもの
資料のノンブル（ページ番号）を一括で振り直すプラグインです。
簡単な資料の場合、Figmaで作ってしまうことが多いのですが、資料作成の途中でページを足すと、ノンブルを振り直さなければならないのが地味に面倒でした。直し忘れをした時には、また振り直しなので悲惨です。
これ1クリックで揃え直せたら便利では? と思ったのが作成のきっかけです。
ここから先は、このプラグインをどう作ったかの話です。
VSCodeで分からなかったのは「フォルダを読み込む」だった
VSCodeを触り始めたのは1年ほど前、プラグインを作り始めたのは今年の5月あたりです。
その1年前、VSCodeを開いてまず手が止まったのが「フォルダを読み込む」という考え方でした。
デザイナーの感覚だと、ファイルは1つずつ開くものです。Figmaもそうですし、Illustratorもそうです。でもVSCodeは違って、フォルダごと開いて、その中のファイルを行き来するという作りになっています。
これが分かっていなかったので、戸惑いました。（汗）
今は仕様をある程度理解して、便利に使っています。
話がそれましたがプラグインの作成を進めていきます。
任意の場所に空のフォルダを1つ作って、それをVSCodeで開いておきましょう。
用意するもの
- Figmaデスクトップアプリ（ブラウザ版では開発中のプラグインを読み込めません）
- VSCode
- AI（Claude Code。作り始めは無料版のGeminiとChatGPTを使用していました）
以上です。
ファイルは3つだけ
基本的に必要なファイルはこれだけです。
| ファイル | 役割 |
|---|---|
manifest.json |
プラグインの定義。名前や、どのファイルを使うかを書く |
code.js |
Figmaを操作する処理 |
ui.html |
プラグインの画面 |
Figmaプラグインの作り方で調べるとTypeScriptを使う記事が多いのですが、今回は使いませんでした。理由は私には難しそうだなと思ったからです。（爆）
※TypeScriptでもAIと進めれば問題なく作れると思います。
続けます。まずはAIに「Figmaプラグインを作りたいです。TypeScriptを使わないやり方で必要なファイルを作成して」と伝え、上記3つのファイルを作成してもらいます。
※無料版のAIの場合はVSCodeのファイル → 新しいテキスト ファイルからファイルを作成してAIの出力をコピペしてファイルを作成しましょう！
プラグインを開いてみる
3つのファイルが作成できたら、Figmaでプラグインを開いてみましょう。
やり方は以下の通りです。
まずFigmaデスクトップアプリで、任意のデザインファイルを開きます。
※ドラフトにテスト用の新規ファイルを作るのがおすすめです
中央下部のツールバーのアクション（⌘K）から、プラグインとウィジェット → すべて → 開発を選択
マニフェストからインポートを選択、manifest.jsonを開く
これで自分の作ったプラグインが読み込まれます。プラグインの名前は manifest.json内の "name": で指定されている名前が表示されます。
起動するとUIが表示され、何らかのアクションを起こすことができると思います。私の場合は指定した個数の長方形（正方形）を作成するというものでした。
ここまでできたら下準備は完了です。本制作を進めていきましょう！
※ここから先はClaude Codeを使用した流れになります。無料版のAIでも流れは一緒ですがコードの貼り付けなどはご自身でやる必要が出てくると思います。
あとは日本語で会話形式でやりとりするだけ
ここから先は、ほぼ会話でのやりとりです。
アホなことを言ったり、無理目なことを言っても絶対に怒らないエンジニアさんがそこには居ます。
- 「こういう機能が欲しい」と伝える
- 伝えた内容を実装してくれます
- Figmaで試します
- 「修正点」や「要望」を伝えます。 2.に戻る
この繰り返しです。
今回は「Figmaで資料を作るときにノンブルを振るんだけど、途中でページを追加したり、削除したりで振り直すのが面倒なので一括で振り直せるようなプラグイン作りたいです」と最初に伝えました。
日本語が少し怪しい、、ですが日本語としての正しさより、できるだけ要件を絞り込める状態にすることのほうが重要かと思います。
その他、例えばこんな要望を出しました。
「表紙にはノンブルを入れないから、本文の1枚目が1ページ目になるようにしたい」
「項目数が少ないならドロップダウンじゃなくてボタンの方が良くない？」等々
コードが書けなくても、「使いにくい」「ここが分からない」は言えます。 デザイナーが一番得意な部分なので、ここは遠慮せず伝えましょう！
最初の実装と、最終的な完成形で結構変わりました。会話してただけですよ。奥さん！
AIに任せきりにできなかったところ
だいぶ煽っていますが一度で完璧にできるわけもなく「完成した」と思ってからが、本番でした。
実際にテストしてみると、想定していなかった状況が次々出てきます。
① フレームを複製したら名前がズレた
ページを複製すると、フレーム名の番号が並び順と合わなくなります。ノンブルは直っても、レイヤー名は古い番号のままです。
これは実際に使ってみるまで気づきませんでした。結果、フレーム名もノンブルと同じ番号に揃える機能を追加しました。
② テンプレートで作った資料だと1枚も反応しなかった
スライドのテンプレートをコンポーネントにして、インスタンスを並べて作る作り方があります。
この場合、プラグインが1ページも認識しませんでした。 フレームとインスタンスは別物として扱われるためです。
これも実際の資料で試して初めて分かりました。
AIはコードを書いてくれますが、何が正しい状態で使いやすいのかは自身で判断する必要があります。ここは任せきりにできない部分だと思います。
申請してみる
作り終えたら、Figma Communityに公開申請をします。
申請画面へは、中央下部のツールバーのアクション（⌘K）から、プラグインとウィジェット → 公開したいプラグインのミートボールメニュー → 公開を選択します。
申請には下記が必要になります。
- プラグイン名
- タグライン（一行の説明）
- 説明文
- カテゴリー・タグ（5個まで）
- サムネイル画像（推奨サイズ: 1920 x 1080px）
- アイコン（推奨サイズ: 128 x 128px）
- プレイグラウンドファイル（任意）
プレイグラウンドファイルは、ダウンロードしてすぐ試せるFigmaファイルです。今回は簡易的に表紙・本文3枚・最終ページを並べたものを付けました。
以下申請画面のスクショです。
タグラインや説明文もAIと相談しながら作成すればすぐに完成。Claude Codeの場合、同セッション内なら仕様を理解しているのでとてもスムーズです。無料版AIでも同じスレッドであれば機能すると思います。
データセキュリティ項目の入力について2026年9月現在は任意なので入力しなくても申請できました。外部通信などをするプラグインの場合は、ユーザーに安心してもらうためにも回答したほうが良さそうです。英語はAIに聞けば翻訳してくれます。
せっかくなので翻訳結果を下記に載せておきます。
1.プラグイン／ウィジェット用のバックエンドサービスを自分でホストしていますか？
- いいえ、バックエンドサービスはホストしていません
- はい、ただしFigmaのプラグインAPIから読み取った／派生したデータをこのバックエンドには送信していません
- はい、Figmaのプラグイン APIから読み取った／派生したデータをこのバックエンドに送信しています
2.自分でホストしていないサービスに対してネットワークリクエストを行いますか？（当てはまるものをすべて選択）
- ネットワークリクエストは一切行いません
- フォントや画像などの静的アセットのためにネットワークリクエストを行います。これらのリクエストにFigmaのプラグインAPIから読み取った／派生したデータは含まれません
- Mixpanel、Sentryなどの分析ツールに対してネットワークリクエストを行います。これらのリクエストにFigmaのプラグインAPIから読み取った／派生したデータは含まれません
- 上記に当てはまらないネットワークリクエストを行います：
3.ユーザー認証を使用していますか？
- いいえ、ユーザー認証は必要とせず、使用もしていません
- はい、Auth0や「Googleでログイン」ボタンなど、サードパーティのIDプロバイダー経由で認証を処理しています
- はい、自分がホストするサイト経由で認証を処理しています
4.FigmaのプラグインAPIから読み取った／派生したデータを保存していますか？（当てはまるものをすべて選択）
- いいえ、そうしたデータは一切保存していません
- はい、ローカルに保存しています（localStorage、figma.clientStorage、node.setPluginDataなど）
- はい、上記に当てはまらない方法で保存しています
5.プラグイン／ウィジェットの更新はどのように管理していますか？
- 個人開発者です。自分ひとりで管理・更新しています
- チームで開発しており、公開前に別の担当者がコード変更をレビューします
- その他
サポート連絡先にメールアドレスを入れたくない場合はGoogleフォームを連絡先として申請しても大丈夫でした。
技術的に引っかかったのは2つです。
① manifest.json の id
最初はAIが作成した仮の値でしたが、これはFigmaが発行する値を入れる必要がありました。申請の過程で正式なIDが発行されるので、それに差し替えます。
② documentAccess の指定
申請時に「これを入れてください」と指示が出ました。入れるとFigmaの内部的な動きが変わるので、コード側も1箇所直す必要がありました。
とはいえ、どちらも「こう出ました」とAIに伝えれば対応してもらえます。
すべての項目を入力し、公開ボタンを押すと審査に入ります。
承認された場合は、Figmaアカウントに登録しているメールアドレス宛に連絡が来ます。
承認期間ですが、私の場合は1つ目と2つ目が3〜4日、3つ目が1日で公開されました。
完成したプラグイン
Renumber Page Numbers
https://www.figma.com/community/plugin/1680142022790029730/renumber-page-numbers
できること
- 資料の全ページにノンブルを一括で振る
- ページを追加・削除しても1クリックで揃え直せる
- 表紙・目次の枚数を自動で判定して、本文の開始番号を決める
- フレーム名もノンブルと同じ番号に揃えられる
- ノンブルが入っていないページを検出して、クリックで移動できる
まとめ
❶ VSCodeで戸惑ったのは「フォルダごと開く」という考え方だった
❷ manifest.json / code.js / ui.html の3ファイルでプラグインは作れる
❸ プラグインを作り込む前に一度Figmaで開いてみると、一気に現実味が出る
❹ コードは書けなくても「使いにくい」は言える。そこがデザイナーの出番
❺ 実際に使って初めて分かる穴がある。正しい状態を決めるのは自分
いかがでしたでしょうか？
VSCodeを触り始めたのが1年前、プラグインを作り始めたのは今年の5月です。それでも3つ公開することができました。
「作ってみたいけどコードが書けないし…」「Figmaプラグインを作ってみたい！」という方の参考になれば嬉しいです。
過去に作ったプラグインもよろしければどうぞ↓
プラグインを作成するにあたって参考にさせていただいた記事↓
以上となります！ お読みいただきありがとうございました。