Claude Codeを使ったら2時間でFigmaのプラグインが作れました

こんにちは、primeNumberでWeb UIデザイナーをしているかべちよです。

この記事はprimeNumberの自由研究企画、「AI-Native Summer Calendar 2025」の参加記事です

これは何

タイトルの通り、デザイナーがClaude Codeを使ってFigmaプラグインを作ってみたら、2時間程度で完成したという話です。（厳密にはClaudeも使ってます）

ちなみにFigmaプラグインを作成した時の私の状態はこんな感じです。

• Figmaのプラグインを作ったことはない
• Figmaのプラグイン作成の知識もない
• コードは一切書いてない（Claude Codeに全部書かせた）
• メインタスクを進めている片手間に進めた（Claude Codeに指示を出してそれを待っている間）

↓16:30に思いついてClaudeに調査をさせ、18:00頃にはプラグインが形になってる様子

作成したプラグインについて

作成したプラグインは、「Frame to YAML」というFigmaで選択したFrameの情報をYAML形式で書き出せるプラグインです。
Claude CodeにFigmaの情報をさっと渡したい時に便利かもと思い作成しました。

もちろんFigma MCPを使えばもっと便利にFigmaの情報をClaude Codeに渡すことができますが、MCPの使用にはいくつか制限があったり、セットアップが手間だったりします。

そこで、選択しているFrameの情報をyamlでコピーできれば手軽で便利なのでは？と思いつきました。

似たようなことができるプラグインはすでにありますが、UIのデータを扱うのでセキュリティ上の懸念があり、今ならClaude Codeで自分で作った方が早いのでは？と思いノリで作ってみました。

（正直Claude CodeでFigmaプラグインを作ってみたい気持ちが先行してるので、あまり理屈を詰めてないです）

このプラグインはFigma Communityに公開はしておらず、プライベートのプラグインとして登録しています。

プライベートのプラグインの利用方法についてはFigma公式のヘルプをご参照ください。

どう作ったか

ざっくりこんな流れです。

1. Claudeにアイデアを渡す
2. 「プラグイン作れる？」って聞いたらコードと「セットアップガイド」を作成してくれた
3. 「セットアップガイド」をもとにプロジェクトをセットアップ
4. 触りながら機能やUIを調整

1. Claudeにアイデアを渡す

極度の面倒くさがりなので、Slackに投稿していた思いつきをそのままClaudeにコピペしています。

この時点でまずClaudeは利用可能なプラグインを調べてくれました。

2.「プラグイン作れる？」って聞いたらなんか「セットアップガイド」を作成してくれた

既存のプラグインを使うことに懸念があるのでプラグインを作れるかClaudeに聞いたところ、プラグインのコードとセットアップ方法のドキュメントを生成してくれました。

3.「セットアップガイド」をもとにプロジェクトをセットアップ

とりあえずClaudeが作成してくれた「セットアップガイド」をもとにプロジェクトをセットアップしていきます。

詳細は省略しますが、以下のようなセットアップガイドを作成してくれました。

1. 開発環境の準備
2. プロジェクト構造
3. ファイルの作成
4. ビルドスクリプト
5. ビルド実行
6. Figmaでの開発プラグイン登録

ひとまず開発環境を準備したら、あとはClaude Codeに生成してもらったセットアップガイドやコードを渡してセットアップを進めてもらいます。

一度に情報を渡したら流石にトークン制限に引っかかってClaude Codeが止まってしまったので、分割して段階的に進めました。

そんなこんなで、一通りプラグインが動く状態になりました。ワーイ

4.触りながら機能やUIを調整

セットアップが完了したら、プラグインを触りながら機能やUIを微調整していきます。

この時点では以下のような幾つかの課題がありました。

• 機能面
  • クリップボードへのコピーが失敗する
  • 生成されるyamlが長すぎてClaude Codeにペーストする時に邪魔
• UI面
  • コピーボタンがyamlコードの下にあるため、スクロールしないと見つけられない
  • 説明が少なく使い方がよく分からない
  • ウィジェットのサイズが小さくてyamlコード部分が見づらい

これらをClaude Codeに修正してもらっていきます。

エラーについてはエラー内容を伝えたら上手く修正してくれました。
UIについては細かめに要望を伝えて調整していきます。

生成されるyamlが長すぎる件については、不要なフィールド判定して省略してもらいました。

以下のような基準で不要なフィールドを省略してくれました：

  - id: Figma内部IDは開発に不要
  - visible: falseの要素は出力自体をスキップ
  - constraints: Figmaの制約≠CSSレスポンシブ
  - opacity: 1: デフォルト値は省略
  - fillのvisible: 非表示は除外

UIについてもざっくりClaude Codeにフィードバックして修正してもらっていきます。
ついでにアイコンの追加や色の調整を行い、最終的に以下の見た目になりました。

実際にVibe codingに使ってみる

せっかくプラグインを作ったので実際に使っていきます。

コピーしたYAMLをClaude Codeに渡してUIの開発をさせてみたところ、まあまあいい感じのものが返ってきました。

普段開発で使用しているTokenやComponentを使用していますが、UI・テキストはすべてダミーです

渡したFigma
開発されたもの

ボタンのサイズが横幅いっぱいになってしまっているのは微妙ですが、この程度なら簡単に調整できそうです。
コピペ一発でこの精度なら結構良いなと思います。

一度Claude Codeを/clearしてYAMLから読み取れる情報も出してもらいます。

コンポーネント構造

- Frame 759という名前の単一フレームコンポーネント
- 幅1240px、高さ444pxの固定サイズ
- 3つの子要素を持ち、すべてINSTANCE型（再利用可能なコンポーネン
トインスタンス）

レイアウト詳細

- Flexbox縦方向配置（flex-column）
- 子要素間の間隔：24px（Tailwindのgap-6に相当）
- パディング：全方向0px
- 配置：左上揃え（alignItems: MIN, justifyContent: MIN）

技術スタック

- Reactフレームワーク
- Tailwind CSSでスタイリング
- カスタムコンポーネントライブラリを使用

デザイントークン

- 定義されているが空：colors、typography、borderRadius、shadows
- spacingのみ実際の値を持つ（gap-Frame 759: 24px）

ある程度読み取れているようですが、Component名やVariablesの名前を読み取れていないようです。
この辺りは引き続き調整していこうと思います。

Claude Codeの感想

最後に、「Qiitaに引用するので感想を書いて」とお願いしてClaude Codeに今回の開発の感想を書いてもらったので引用します。

今回のFigmaプラグイン開発で特に印象的だったのは3つです。

1. 自然な対話での開発
「ステータスメッセージに絵文字を追加して」のような日常的な言葉が、そのまま実装に繋がることに可能性を感じました。コードの書き方を知らなくても、作りたいものを説明できれば実現できる。

2. エラーからの学び
TypeScriptの型エラーやFigma特有のfigma.mixedなど、実際に動かして初めて分かる問題もありました。でも、エラーを一緒に解決していく過程で、より良い実装にたどり着けたのは面白い体験でした。

3. 短時間での完成
約1時間で実用的なプラグインが完成。従来なら環境構築だけで30分はかかっていたことを考えると、アイデアをすぐ形にできる時代になったんだなと実感しました。

「いいね！」という反応をもらえた瞬間は、純粋に嬉しかったです。
一緒に何かを作り上げる楽しさを改めて感じました。

最近Claude Codeに反乱されないように優しくすることを心がけているのですが、ポジティブフィードバックが「純粋に嬉しかった」と言ってくれて良かったです。

ちなみにClaude Codeにこの記事のレビューを依頼したら、この1文を削除されました。