Claude CodeとFigma MCPの連携により、AIによるフロントエンド開発の大きな空白が埋められた。コードで構築したUIをそのままFigmaキャンバスへ送信し、編集可能なフレームとして活用できるこの双方向ワークフローは、開発とデザインの境界を大幅に解消する。本動画では、セットアップ手順から実際の活用例までを解説し、Pencilなど関連ツールとの組み合わせについても紹介している。
Claude CodeとFigmaの連携が変えるフロントエンド開発
Anthropicが、AIを活用したフロントエンド開発における最大の課題のひとつをついに解消しました。Claude CodeとFigmaを繋ぐ新しいブリッジの登場です。これにより、Claude Codeで構築したものを直接Figmaへ送り込めるようになりました。
Figma MCPサーバーの最新アップデートにより、コードで完全に動作するプロトタイプを構築し、それを瞬時にFigmaのキャンバスへ送って複数のバージョンをビジュアルで比較・検討できるようになったんです。
Figmaでは、Claude Code上で構築したライブUIをキャプチャし、完全に編集可能なFigmaフレームへ変換できるようになりました。つまり、本番環境・ステージング環境・ローカルホストで動いているインターフェースを取り込み、個別の画面・状態・ユーザーフロー全体をそのままFigmaファイルに貼り付けられるということです。編集、複製、アノテーション追加、チームとのコラボレーションも自由自在です。
コードとデザインの双方向ワークフロー
コードは、一度に一つの状態に収束しながら構築・テストするのに優れています。一方Figmaは、キャンバス上でバージョンを並べて比較したり、複数の代替案を検討したり、ビジュアルで方向性を洗練させるという「発散」の作業に力を発揮します。スクリーンショットを共有したり、チームメンバーにローカルビルドを走らせてもらう必要はもうありません。実際のUIを共有デザイン空間に持ち込めばいいんです。
そして、これは双方向に機能します。Figma MCPサーバーを使えば、FigmaからClaude Codeへ戻ることも可能で、編集済みのフレームからデザインに沿ったコードを生成できます。つまり、Claude Code → Figma → コードという完全なループが実現したわけです。フロントエンド開発は、これまでの一方通行から、はるかに流動的なものへと変わりました。
FigmaがClaude Code内で行ったUI作業を編集可能なデザインフレームとして直接Figmaへ取り込む機能を導入したことで、この機能を活用してFigma上で新しいアイデアを探索できます。キャンバスでマルチページのフローを確認したり、ユーザー体験を再構築したりといったことが可能です。さらに、FigmaのMCPを使えば更新したデザインを持ってすぐClaude Codeへ戻ることもできます。
セットアップ手順
このループは本当に素晴らしいと思います。AIを活用してより速く構築したい方には、私が実際に使っているツール・ワークフロー・プロンプトを無料のニュースレターでお伝えしていますので、概要欄のリンクからぜひ登録してみてください。
では、始めるにあたって事前に必要なものをいくつか確認しておきましょう。まず当然ながらClaude Codeのセットアップと、Figmaアカウントの準備が必要です。次に、概要欄にリンクを貼っておくClaude CodeのMCPドキュメントへアクセスして、Figma MCPコマンドをコピーしてください。これをClaude Codeのインスタンス内で直接有効化することで、Claude CodeとFigmaのリモートMCPサーバーが接続されます。
続いて、TwitterにあるこちらのブログへアクセスしてFigmaプラグインをインストールします。操作はとてもシンプルで、Code内で /plugin コマンドを使うだけです。Enterを押せば、プラグインがインスタンスに直接インストールされます。次に /plugin と入力します。
ここでFigmaの認証が必要になります。有効化されていることは確認できますが、OAuthの入力が必要です。Figmaデスクトップが失敗しているのはそのためです。必ずFigmaデスクトップでアカウントのOAuth認証を完了させてください。これで、FigmaとClaude Code間のブリッジにアクセスできるようになります。
実際にダッシュボードを作ってみる
今やっていることをお見せしましょう。Claude Codeでダッシュボードを作成しています。モダンなダッシュボードUIのすべてのコンポーネントをコーディングさせて、完全に機能するインタラクティブなダッシュボードを構築しています。完成したら、Claude Code内で実際に何ができるか、つまりFigmaへのブリッジとして画面やフローをキャプチャする方法をご紹介します。
コマンドを実行するだけでUIやフロー全体をキャプチャし、編集可能なフレームとしてFigmaに送ることができます。ダッシュボードを生成したら、そのデザインを実装してFigmaキャンバスへ転送できるようにします。なお、デスクトップ版ではなくクラウド版を使っているため、実際のデザインリンクを共有する必要がありました。
「共有」をクリックしてdevモードリンクをコピーすると、Figmaプラグインがそのリンクを使って今回のリクエスト、つまりデザインの実装に基づいて編集を行います。あとはClaude Codeに戻って、次へ進むよう指示するだけです。ダッシュボードが開かれましたね。
プロンプトをしっかり書いていないのでクオリティはそれほど高くはないですが、ダッシュボードがFigmaファイルへ送られ、Figmaキャンバス上で確認できていることはわかると思います。そのキャンバスへ移動すると、Claude Codeが作成したデザインをFigma上で直接表示できます。
これが追加されたフレームです。実際に調整できる管理しやすいレイヤーが存在しています。左パネルのサイドバーも確認でき、ログイン画面も中央あたりに表示されています。ナビゲーションはもう少し調整が必要ですが、これが今できることの基本的なイメージです。
コーヒーアプリの実例とFigmaライブラリの活用
2つのツールを繋ぐシンプルな方法をお見せしました。次は実際に、Figmaのライブラリをいくつか活用してコーヒーアプリを生成した事例をご紹介します。Claude Codeがコンポーネントのコードを実際に書き出しており、動いているのが確認できます。
FigmaがすべてのライブラリをAIに提供して、Claude Codeがすべての機能をコーディングする、これは本当に素晴らしいと思います。これこそがこの組み合わせの価値であり、2つのツールを使って素晴らしいデザインを完全に生成できるようになります。
さらに、コードコンポーネントをFigmaに接続することもできます。「Code Connect」プラグインを使って、Figmaのデザインコンポーネントをコードコンポーネントにリンクさせる形です。これにより、これらの2つのツール間でレイヤーとコードのギャップを簡単に埋められます。ユーザーのコードベース向けにカスタムデザインルールを生成するデザインシステムルールを作成することもでき、作業が大幅に楽になります。
Figmaの制限とモードベースのワークフロー
唯一の制約として、FigmaにはPROティアが存在します。このブリッジを最大限に活用するにはPROティアが必要で、無料ティアではキャンバス上での直接コーディングやMCPのAPIリクエスト数という点でかなり制限があります。
Claude CodeとFigmaのブリッジは、常に秒単位で切り替え続けるためのものではありません。むしろ、モードベースのワークフローとして活用するものです。Claude Codeのコードモードで素早くイテレーションし、データを試し、フロントエンドのインタラクションをテストする。そしてFigmaのデザインモードで、レイアウトを探索し、ビジュアルを微調整し、アノテーションを加え、さらにAIを使って生成物をブラッシュアップする、という使い方です。
価値が生まれるのは、このモードの切り替えを意図的に行うことです。次のモードへ移る前に、数分から数時間、一つのモードに集中して作業することが大切です。ワークフローとしては非常に理にかなっています。Claude Codeでまずリソースを生成してFigmaへ送り、探索やフィードバックを行う。準備ができたら更新内容をコードへ戻す、という流れです。
これはモードの切り替えであり、同期が必要なマイクロマネジメントではありません。だからこそ、長いデザイン・コードのスプリントでも自然に感じられるんです。Figmaのビジュアルデザインからそのままパレード・コードへ飛び込んで、Figma上でビジュアル化した要素の本番用コードを生成できる、まさにここに真価があります。
MCPとプラグインを通じてこの接続を橋渡しするのが格段に楽になり、手動でのスライシングやスタイルの推測は不要になります。キャンバスを視覚化するか、キャンバスからコードへ移行するか、どちらにしてもワークフローが大幅に洗練され、多くの時間を節約できます。
Pencilとの組み合わせでさらに便利に
これはPencilのスポンサーではありませんし、すでに別動画でも取り上げていますが、Pencilは一つの場所でキャンバスをビジュアル化するうえで優れたツールです。現在完全無料で使えるので、ぜひ最大限に活用してほしいと思っています。Claude Codeとの相性もとても良いです。
FigmaをPencilに接続することで、コーディング中にキャンバスのライブ生成をリアルタイムで確認できます。それだけで非常に優れたツールですし、一つの環境の中で作業できるというメリットがあります。たとえばPencilでは、Figmaファイルを準備した上で、Claude Codeを搭載した並列デザインエージェントをPencilの無限キャンバス上で走らせ、デザインをコードに変換できます。AIが生成した中でも個人的に最高レベルのデザインが生まれます。
ローカルで動作し、VS CodeやCursorとも連携でき、100%無料です。この動画が気に入って、チャンネルをサポートしたいと思ってくださった方は、下のSuper Thanksからの投げ銭や、プライベートDiscordへの参加もご検討ください。Discordでは毎月さまざまなAIツールへの複数サブスクリプションを無料で利用できるほか、毎日のAIニュースや限定コンテンツなど盛りだくさんです。
まとめ
Claude CodeとFigmaのこの組み合わせで、デザインからコード、コードからデザインへの行き来がこれほど簡単になりました。フロントエンド開発者にとっても、これらのツールを組み合わせて活用しようとしている方にとっても、間違いなくゲームチェンジャーになると確信しています。気に入っていただけたなら、概要欄のリンクをぜひご覧ください。
開発時間を大幅に節約できますし、開発コストをほぼ半分にカットすることもできます。本日も動画をご視聴いただきありがとうございました。楽しんでいただけたなら嬉しいです。サブチャンネルの登録、ニュースレターへの参加、Discord、Twitterのフォローもよろしくお願いします。
最後に、チャンネル登録、通知ベルのオン、いいね、そして過去の動画もぜひチェックして最新のAIニュースをキャッチしてください。それでは皆さん、素晴らしい一日を。ポジティブさを広めて、またすぐにお会いしましょう。
コメント