普段Claude Codeを使って開発しているものです。
「Claude CodeとFigma MCPを連携すると便利らしい」という話は以前から耳にしつつ、なかなか触る機会がなかったのですが、先日「AIエージェントを使用してFigmaキャンバス上で直接デザインできるようになりました！」というニュースを見たことをきっかけに、いい加減どんなものか軽く触ってみようと思いました。
今回は「すでに動いているWebアプリがある」かつ「Figmaには一切デザインを作成していない」という状態からスタートして、空のFigmaプロジェクトを立ち上げ、デザイン生成 → 修正 → コード反映までを試すことで、なんとなく開発フローをイメージできるようになることをゴールとします。
この記事でやること
- Figmaプロジェクトを作成（空の状態から開始）
- MCP連携を設定
- Figmaにページ・コンポーネントを作成
- Figmaのデザインを編集
- Figmaのデザインをコードに反映
補足：対象のWebアプリについて
読書中のメモを記録するWebアプリを開発しています。
（技術スタック：Next.js + Vercel + Supabase）
このアプリでは、「本を読んで得た学びを行動につなげる」というコンセプトのもと、本やメモ、そこから生まれるアクションを管理できます。
1. Figmaプロジェクトを作成
Figmaで新規プロジェクトを作成します。
この時点では完全に空の状態で問題ありません。
2. MCP連携を設定
以下の手順を参考に、Figma MCPと連携します。
Figma MCP サーバーには Remote Server と Desktop Server がありますが、今回は Remote Serverを使いました。
3. Figma にページ・コンポーネントを作成
連携が完了したら、Figmaと連携して作業していきます。
ただし、この時点ではFigmaプロジェクトの中身は空です。
各ページのデザインやコンポーネントを手で起こすのは、かなり手間がかかりそうです。
サードパーティーのプラグインを使って既存画面からデザインを作る方法もあるようですが、画面ごとに作業する必要があり、やはり大変そうでした。
そこで、Claudeに対して次のように指示してみました。
このシステムの各ページのデザインおよびコンポーネントをFigmaに作成して。
https://www.figma.com/design/xxxxx
※URLはFigmaプロジェクトのURLです。
出来上がったものがこちら。
ざっくりした指示で「各ページの画面」「モーダル」「コンポーネント」を一気に作ってくれました。
ところどころレイアウトの崩れや抜け漏れはあり、細かい調整は必要ですが、ゼロの状態から最初のたたき台を作る用途としてはかなり便利だと感じました。
今回のような、「既存システムの開発フローにFigmaを後から入れたい」ケースでは特に助かりそうです。
ちなみに、先月Figma公式が投稿したFigmaキャンバス編集機能の紹介ポストでも、localhostで動いているシステムのUIをFigmaデザインに起こしていて、その中では「このUIを私のFigmaコンポーネントを使ってFigmaキャンバス上に再現してください。」という指示を使っていました。
なので「事前にFigmaでコンポーネントを定義しないといけないのかな？」と思っていたのですが、なくても大丈夫なようです。
4. Figmaのデザイン編集
Figmaデザインの生成が完了したので、Claude Codeから指示を送ってデザインを編集していきます。
試しに、以下の指示を投げてみました。
Figmaで、本の詳細ページのメモを2列のグリッド表示に変更して。
結果はこちらです。
←変更前 変更後→
指示どおり、メモが2列表示に変更されました。
5. Figmaのデザインをコードに反映
続いて、Figma上のデザインをコードに反映します。
先ほどの 2 列表示への変更に加えて、Figma 側でメモの色も変更してみました。
これがコード側にも反映されるか試します。
4. とは別のセッションに切り替えたうえで、以下の指示を出しました。
デザインをコードに反映して
https://www.figma.com/design/xxxxx/my-app?node-id=xx-x
※ URLはFigmaプロジェクト内の、本詳細画面デザインのノードURL です。
結果はこちらです。
レイアウト変更と色変更の両方が、問題なくコード側に反映されていました。
どこまで複雑な修正ができるのかは要検証ですが、軽微な修正であれば問題ないですね。
まとめ
Figma + MCP 連携を使うことで、デザイン生成 → 修正 → コード反映のサイクルを、ほぼエージェントへの指示のみで実行できました。
すでに開発中のアプリに後からFigmaを組み込む際の流れも、ある程度つかめました。
また、「実装したい機能はあるが、まずは見える形のプロトタイプを素早く作りたい」という場面でも活躍しそうです。
今後は、他の人の活用例も参考にしながら、もう少し実践的な使い方も試してみようと思います。