はじめに
Figma MCPサーバーを使ってAIのClaude CodeがFigmaファイルのデータを詳細に読み取れるようになれば、どれだけの再現度で、webサービスのデザインを作ることができるのか検証してみたくなったので試してみました。
今回の作業環境
・MacOS
・Claude Codeインストール済み
・Figma（プロフェッショナル）
・UI Library: shadcn/ui
・VSCode（Extension：Claude Code for VS Code）
事前に自分で用意したもの
以下は、自分で自作したFigmaデザインです。shadcn/ui を使っています。
フィンテック系のサービス群を複数契約したときの、料金をシミュレーションすることができる料金シミュレーターをFigmaファイルで作ってみました。Figmaのコミュニティにある@shadcn/uiのライブラリを使えば、実装時に同じライブラリで実装できると考え選んだのですが、結果的にはこの選択が間違っていたかも・・・・・・。
また、右カラムの円は、本来であれば、円グラフにしたかったのですが、しんどかったので、伝わるかなぁという思いで、ただの円の図形を置いてみました。shadcn/uiには、円グラフのコンポーネントはないので、そこだけRechartsでお願いするつもりで描きました。
やったこと
- Figmaファイルでデザインを作成
- Figmaの設定 > セキュリティから個人アクセストークンを作成
- VS CodeのターミナルでClaudeを起動
$ claude > /login - プロンプトにFigma MCPサーバーの接続と実装を依頼AIの応答（抜粋）：
> AWS Amplifyにデプロイすることを前提に、Next.jsとTailwind CSSのプロジェクトをこのフォルダに作成してください。 Figma MCP を使いたいので、設定ファイルを正しく作成して、Figma連携ができるようにセットアップを完了させてください。私の Figma トークンは<ここに個人アクセストークン>です。 プロジェクトができたら、このFigmaのURL <FigmaファイルのURL> を読み取ってください。 デザインを再現するために shadcn/ui と Recharts を導入し、料金シミュレーターの実装を開始してください。⏺ Next.jsプロジェクトの作成とFigma MCP設定を進めます。 ⏺ Figma MCP設定ファイルを作成し、shadcn/uiとRechartsをセットアップします。 ⏺ 次にshadcn/uiの初期化とRechartsのインストール、AWS Amplify設定を行います。 ⏺ AWS Amplify用の設定ファイルを作成し、必要なshadcn/uiコンポーネントを追加します。 ⏺ Figma APIを使ってデザインを取得します。 ⏺ デザインの全体像がわかりました。料金シミュレーターを実装します。まず料金ロジックを別ファイルに作成し、その後UIを実装します。 ⏺ プロジェクトのセットアップが完了しました。 料金ロジック (src/lib/pricing.ts): - PricingConfig - 料金設定の型定義 - SimulatorState - シミュレーター状態の型定義 - calculatePricing() - 料金計算関数 - formatCurrency() / formatNumber() - フォーマット関数 料金ロジックはUIから完全に分離されており、後から簡単に調整できます。 開発サーバーの起動 npm run dev でローカルサーバーを起動し、http://localhost:3000 で確認できます。
Figmaと実際のブラウザでの比較
左側：Figmaデザイン
右側：ブラウザのスクリーンショット
わくわく、期待しすぎてしまって期待度が高すぎたのか、結果的には思っていたほど再現できないのだなぁという感想でした。事前にGeminiと相談して、 shadcn/ui をUIライブラリとして使うことや、Figmaファイルを作成するときの注意点などでは、オートレイアウトを使うようにアドバイスしてもらっていたので、サービス一覧部分のグリッドレイアウトも全てオートレイアウトでやったのですが、結果的には、ただの1カラムの縦のリストになっちゃいました。
CardコンポーネントをFigmaでも使ったのですが、同じ shadcn/ui だから同じ見た目になると思ったのですが、角丸のサイズが全然違ったりと、スタイルが結構違うなぁと思いました。
左カラムと右カラムの幅も、Figmaとは全然同じじゃないですね。
この時点ではまだ課題が満載なので、ここからどうFigmaデザインに限りなく近づけていくのかトライアンドエラーが必要そうなのですが、今回は一旦ここまでの検証となります。
今後試してみたいこと
shadcn/uiというライブラリはカスタマイズ性やスタイルの自由度が高いライブラリらしく、Tailwind CSSで自由に設定するのに相性がいいそうなんですね。自由度が高いが故に、スタイルがずれてしまったのかも。
Microsoftが開発したFluent 2というUXフレームワークが、Figmaと実装時の再現性が高いらしいのですよね。
Fluent 2 の特徴と「再現性」のロジック:
・Microsoftは、デザイナーがFigmaで作成したものをエンジニアが実装する際の乖離をなくすためにFluent 2を設計。
・公式のFigmaライブラリとReactコンポーネントが密接に紐付いており、プロパティ名まで共通化されている。
・Fluent 2は「デザイントークン（色や余白を共通の変数名で呼ぶ仕組み）」の活用が徹底されている。
・AIにとっても、Figma上の「Brand Color」という情報をコード上の brand プロパティへ変換するロジックが非常に明快。
次はFluent 2でFigmaデザインを作ってみたいです。Figmaでデザイン作成が完了=実装も完了という世界になったら嬉しいです。
AWS Amplify Studio
Figmaのデザインを完璧に再現しながらコード化する方法には、もう一つAWS Amplify Studioという方法がありますよね。Amplify UIを使えば、ピクセルパーフェクトなUIを構築できるそうです。
しかし、これはこれで課題もあるのですよね。
Amplify Studio が生成するコードは、人間（や AI）が修正することを前提としていない「スパゲッティ状態」に近いもので、Claude に「このコードにロジックを追加して」と頼んでも、Claude がどこを触ればいいか迷い、結果として見た目を壊してしまうそうなんです。
Claude Code + Figma MCPであれば、人間が理解しやすい綺麗なコードで実装してくれるので、その後の改修や追加の依頼も続けることができるので、商用利用の可能性を感じるのですよね。でも商用利用で導入するためには、やはりFigmaと完全一致させることができないと、ただのモックやPoCの域を出られないと思っています。
比較するとこんな感じ
| 項目 | Amplify Studio 経由 | Claude Code ＋ Figma MCP |
|---|---|---|
| UI の自由度 | Amplify 独自の部品に縛られる | shadcn/ui など好きなものを使える |
| コードの保守性 | 極めて低い（触ると壊れる） | 高い（人間が書く綺麗なコード） |
| AI との相性 | 悪い（AI が解析しにくい） | 最高（AI が自分で書いたから修正も得意） |
| 結論 | 「見た目だけ」のプロトタイプ向き | 「実際に運用するアプリ」向き |
おわりに
AIを使った実装を得意とする開発エンジニアにとって、一つの障壁として挙げられるのが、デザインを言語化してAIに伝えなければならない点がありますよね。その言語化のハードルを解消するのがFigma駆動なのかなぁと思ったのです。
まだ、ほとんど何も試していないような段階で、中途半端な検証になってしまいましたが、引き続き完全一致の再現度を目指して、検証をしていきたいと思っています。
Discussion