Claude Code to Figma を実際に試してみた

Figma と Anthropic が公式連携機能「Claude Code to Figma」をリリースした。Claude Code で作った UI をそのまま Figma に編集可能なフレームとして取り込めるらしい。

本当にできるのか、実際に手を動かして検証してみた

Claude Code で作った UI を、ブラウザからキャプチャして Figma に送信する機能。送られたデータはスクリーンショットではなく、Figma 上で編集可能なデザインフレームとして取り込まれるって感じ

ボタンのサイズ、色、角丸、フォントなどを Figma 上で個別に変更できる状態で届く

localhost でも本番環境でもステージングでもキャプチャ可能で、複数画面の一括キャプチャにも対応してるんよな

@Emukei_さんに教えてもらったんだけど、Figma Design に取り込んだフレームを右クリックすると「Figma Make に送信する」というメニューが出る

Figma Make はプロンプトでデザインを生成・編集できるツール。つまり Claude Code で作った UI を Figma Make でさらにブラッシュアップできる

逆に Make で作ったデザインも、右上のアイコンからコピーして Design に貼り付けられる

Figma MCP サーバーを Claude Code に接続する。リモート MCP サーバーを使えば Figma デスクトップアプリは不要

ターミナルで以下を実行する。でも今、これ不要かも

普通に接続できるっぽいね

これだけで接続完了。Claude Code 内で /mcp コマンドを実行して認証を済ませる

必要な条件はこの3つ

まず Claude Code で簡単な HTML を作った。カード型の UI でボタンが1つあるシンプルな構成

ポイントは head にキャプチャスクリプトを1行追加すること。このスクリプトがブラウザの画面を読み取って、Figma に送信してくれる

次にローカルサーバーで配信。まぁ、適当に

ブラウザでキャプチャ用のパラメータ付き URL を開くと、画面上部にキャプチャツールバーが表示される。「Figma に送信」「画面全体」「要素を選択」などのオプションが並んでいる

キャプチャが完了すると、Figma にファイルが生成される

Figma でファイルを開いてみると、ちゃんと編集可能なフレームになってた

ボタンを選択すると W 320 × H 48 のサイズ情報が表示され、塗りにはグラデーション（#6366f1 → #8b5cf6）、角丸は 8px と、元の CSS の値がそのまま反映されている

スクリーンショットを貼り付けたのとは全く違う。レイヤー構造も維持されていて、Container の中に Text、Heading、Paragraph、Button がそれぞれ独立したフレームとして入ってるね

Figma に送ったデザインから、逆にコードを生成することもできた

Figma MCP サーバー経由でデザインデータを取得すると、レイヤー構造、色、サイズ、フォント、影などの情報が返ってくる。React + Tailwind CSS のコードとして出力される

つまり、こういう往復ができるんよね

HTML → Figma（Claude Code to Figma）→ React コード（Figma MCP）

デザイナーとエンジニアの間で「Figma のデザインをコードに起こす」「コードの画面をデザインに戻す」が双方向でできるようになった

今回の検証で、キャプチャスクリプトを入れ忘れると送信が pending のまま止まることが分かった

head に以下の1行を追加すれば解決

まぁ、よしなにやってくれってことや

検証した結果、Claude Code to Figma は確かに動く。シンプルな UI であれば、コードからデザインへの変換は問題なくできた

手順をまとめると以下の通り

複雑な UI やマルチページのフローについてはまだ試していない。今後検証してみる予定

フロントエンドや個人開発者にとっては嬉しい機能で、Claude Code でプロトタイプを作ってそのまま Figma で仕上げるワークフローが現実的になった