FigmaのデザインをClaude Codeでコーディング｜MCPでどこまで再現できる？

FigmaのデザインをWebサイトへコーディングするときは、余白や文字サイズ、色、角丸などを1つずつ確認します。デザインが長くなるほど、同じ確認を何度も繰り返すことになります。

Figma MCPを使うと、Figmaに設定された色・余白・フォント・画像などの情報を、Claude Codeへ直接渡せます。スクリーンショットだけを渡す方法と違い、画像から数値を推測させる必要がありません。

今回は、Figmaで作ったWebサイトのデザインのうち、ヘッダー・ファーストビュー・紹介の3セクションをClaude CodeでHTMLとCSSにしました。色や文字サイズ、写真の形、SVGのあしらいなどは、Figmaの設定に近い形で再現できました。一方で、見出しタグの使い分け、スマートフォン表示、画像の保存などは追加の調整が必要でした。

この記事では、接続の方法、使った依頼文、比較画像、直した部分を紹介します。

※FigmaやClaude Codeの仕様は変更されることがあります。本記事は2026年10月時点の内容です。

FigmaのデザインをClaude Codeでコーディングした結果

先に結果を見てください。左がFigmaのデザイン、右がClaude CodeでHTMLとCSSにしてブラウザで表示した画面です。

団体名と地域名は、架空のものに置き換えています。コーディングしたのは、トップページの上から次の3つのセクションです。

• ヘッダー（ロゴ・メニュー・相談ボタン）
• ファーストビュー（写真と見出し）
• 紹介（写真と紹介文）

見た目はFigmaのデザインに近い形になりましたが、完成したサイトがそのまま出てきたわけではありません。返ってきたコードをHTMLとCSSに変換し、タグの使い分けやスマートフォン表示を足す作業がありました。何をどう直したかは、後半の「調整した部分」で紹介します。

Figma MCPで何が渡せるか

Figma MCPは、FigmaのデザインデータをClaude CodeのようなAIコーディングツールに渡すためのサーバーです。渡ってくるのは画像ではなく、レイヤー名・座標・色・フォント・コンポーネントの構造といった、Figmaが内部で持っている数値そのものです。

今回のデザインのヘッダーに get_design_context を実行すると、次のようなコードが返ってきました（抜粋。「…」は省略した部分で、団体名は架空の名前に置き換えています）。

<div className="bg-white content-stretch flex gap-[12px] items-center overflow-clip relative shrink-0" data-node-id="4:3" data-name="ロゴ">
  ...
  <p className="font-['Noto_Sans_JP:Bold'] font-bold leading-[1.3] relative shrink-0 text-[34px] text-[color:var(--pink-deep,#a9536e)]" data-node-id="4:24">
    こもれび
  </p>
  ...
</div>
<div className="bg-[var(--pink-deep,#a9536e)] content-stretch flex items-start overflow-clip px-[32px] py-[14px] relative rounded-[999px] shrink-0" data-node-id="4:31" data-name="ボタン_相談する">
  <p className="[word-break:break-word] font-['Noto_Sans_JP:Bold'] font-bold leading-[1.5] relative shrink-0 text-[16px] text-[color:var(--white,white)] whitespace-nowrap" data-node-id="4:32">
    相談する
  </p>
</div>

この短いコードだけでも、分かることがいくつもあります。

色や余白を、Figma画面を目で見ながらメモしていく作業と比べると、この部分は数値がそのまま渡ってくる分、確認の手間を減らせます。

今回、get_design_context を実行したときは、React＋Tailwind CSS形式のコードが返ってきました。返り値の末尾には、次の一文も付いていました。

The generated React+Tailwind code MUST be converted to match the target project’s technology stack and styling system.

そのままでは今回の制作環境に合わないため、Claude Codeへ追加で依頼し、通常のHTMLとCSSに変換しています。変換自体もClaude Codeに任せられますが、HTMLタグの使い分けやスマートフォン表示まで正しく仕上がっているかは、人が確認する必要があります。

もう1点、画像やアイコンを書き出す場合に注意したいことがあります。公式には「Image assets are stored on a remote server for 7 days.」とあり、書き出した画像・SVGのURLは7日間しか有効ではありません。 取得したら早めに自分のプロジェクトに保存しておく必要があります。

画像を渡す方法との違い

2つの方法は、渡すものも得意なことも違います。並べると次のようになります。

見た目をざっくり再現したいだけなら画像で渡す方法でも十分なことが多いです。一方で、余白や色を正確にそろえたい場面や、複数のカードで数値を統一したい場面では、Figma MCPで数値を直接受け取るほうが確認の手間を減らせます。画像で渡す具体的なコツはClaude Codeにデザイン画像を渡してコーディングさせるコツにまとめてあるので、あわせて読んでみてください。

Claude CodeにFigma MCPを接続する

出典＝Figma公式ヘルプ「Claude Code and Figma: Set up the MCP server」（https://help.figma.com/hc/en-us/articles/39888612464151・確認日2026-10-12）

接続の方法は2つあり、公式ページでは次のように案内されています。

見出しに (preferred) ＝「推奨」と付いているのはリモート版だけです。特別な理由がなければ、リモート版を選ぶほうが公式の案内に沿った形になります。

ここからは、リモート版（推奨されているほう）をClaude Codeにつなぐ手順です。事前にClaude Codeがターミナルにインストールされている必要があります（公式ページにも「Make sure to install Claude code in your terminal before the setup」と明記されています）。

claude plugin install figma@claude-plugins-official

FigmaのデザインをHTMLとCSSにした手順

Claude Codeに渡した依頼文

使ったのは、相談窓口のトップページとしてFigmaで作られたデザインです。

「Figma MCPで何が渡せるか」で見たとおり、返ってきたコードはReactとTailwind CSSの形でした。そこで、ふつうのHTMLとCSSに変換するよう、Claude Codeに次の条件で頼みました。

Figma MCPから取得したデザインデータをもとに、
トップページのヘッダー・ファーストビュー・紹介のセクションを
HTMLとCSSで実装してください。

・ReactとTailwind CSSは使わない
・クラス名はBEMで付ける
・Figmaから取得した色、余白、文字サイズを反映する
・写真とSVGは書き出してプロジェクト内に保存する
・スマートフォンでは縦に積む
・生成後にブラウザで表示を確認する

Figmaとコーディング後の比較

できたコードを、パソコンの幅のブラウザで表示すると次のようになりました。冒頭の比較画像の右側と同じ画面です。

Figmaにはパソコンの幅のデザインしかなかったので、スマートフォンの幅の表示は、依頼の中で縦に積むように指定しました。

そのまま再現できた部分

Figma MCPから数値や画像で受け取れた次の部分は、画像を見ながら合わせなくても、そのまま反映できました。

• ピンク系の色（#a9536e・#8a3a53）と、紹介セクションの背景色（#fdf6f8）
• 見出しの文字サイズと行間（ファーストビューの見出しは44px・行間1.5）
• 四隅で大きさが違う写真の角丸（ファーストビューの写真は左上160px・左下280px）
• 見出しの後ろにあるピンクの丸い形、花や葉のあしらい（SVGで受け取れた）
• 手書き風の一言のフォント（Yomogi）と、8〜12度の傾き
• 強調の帯に付いたグラデーション

調整した部分

一方で、受け取った値をそのまま使うだけでは仕上がらない部分もありました。

• 見出しやメニューをタグで書き分けた：返ってきたコードは、見出しもメニューもボタンも、すべて段落（p）でした。見出し（h1・h2）、メニュー（nav）、リンク（a）に書き分けています
• 写真をプロジェクト内に保存し、拡張子を直した：画像のURLは7日間で切れるので、写真とSVGはすべて手元のフォルダに保存しました。写真はURLの末尾が.pngでしたが、中身はJPEGだったので、.jpgとして保存しています
• 写真に代替テキストを足した：返ってきたコードでは、写真の alt が空でした。写真には内容が分かる説明を書き、飾りのSVGだけ空のままにしています
• 写真を右端にそろえる指定にした：ファーストビューは、写真も見出しも「左から何px」という絶対位置で返ってきました。写真は右端にそろえる指定に変え、幅の変化に合わせて伸び縮みするようにしています
• スマートフォンでの見せ方を足した：Figmaのデザインはパソコンの幅だけでした。狭い画面では、メニューを「相談する」ボタンだけにし、写真の下に見出しを置き、手書き風の一言とあしらいは隠すようにしています
• フォントを読み込む指定を足した：コードにはフォント名（Noto Sans JPとYomogi）しか書かれていないので、Google Fontsから読み込む指定を追加しました

実際の制作で分かった注意点

私は実際の制作でも、Figmaで作ったLPのデザインをClaude Codeでコーディングしています。ベースのコードは数十分で書き上がり、そのあとデザインと見比べながらの修正と確認を含めても、3〜4時間ほどで終わります。1から自分でコーディングするより早く進められています。

実際にLP制作の作業でFigma MCPを使ってみて分かったことを、案件の内容が特定されない形でまとめます。

大きなセクションは一度に取れないことがあった。 node数が多い節を一括で取得しようとすると、サイズが大きすぎて取得できないことがありました。見出し・カード・フッターのように、節ごとに分けて渡す必要があります。

画像やアイコンの書き出しは、まとめて取得できた。 1つのプロジェクトで、png・svgを合わせて170点ほどを書き出せました。1つずつ手で保存する手間は減らせます。

実測値のおかげで、指示書とデザインのズレに気づけた。 get_screenshot で取得した実際の寸法が、手元にあった指示書の数値と食い違っていて、そこで初めて版がずれていることに気づけました。人が目で見比べるだけでは気づきにくいズレを、数値の比較で見つけられたのは収穫でした。

余白は丸め値でなく、端数で返ってくる。 実際に返ってきた値には、97.959pxや58.776pxのような端数が含まれていました。そのまま実装するとCSSが端数だらけになるので、8pxや16pxのようなキリのいい値にそろえるかどうかは、人が判断する部分として残ります。

利用前に確認したい料金プランと回数制限

Figma MCPで呼び出せる回数は、Figmaのプランとシートによって異なります。

無料のStarterプランは月20回までなので、大きなページを見出し・カード・フッターのように細かく分けて取得すると、早く上限に達します。使う前に、Figma公式のRate limits & accessのページで、最新の回数を確認してください。

よくある質問

まとめ

Figma MCPを使うと、Figmaに設定された色・余白・フォント・画像などの情報を、画像ではなくデータとしてClaude Codeへ渡せます。

今回の作例では、ヘッダー・ファーストビュー・紹介の3つのセクションで、色や文字サイズ、写真の角丸、SVGのあしらいを、Figmaの設定に近い形で再現できました。

一方で、Figma MCPだけでページが完成するわけではありません。返ってきたコードを制作環境に合わせて変換し、見出しタグの使い分け、スマートフォン表示、画像の保存は、依頼と確認を重ねて仕上げました。実際のLP制作では、ベースの作成が数十分、修正と確認を含めて3〜4時間ほどでした。

Figma MCPが得意なのは、Figmaに設定された数値や構造を、そのままClaude Codeへ渡すところです。見た目をざっくり再現したいだけなら、画像で渡す方法のほうが手軽なこともあります。

試すときは、まずヘッダーやカード1枚のような小さな範囲から取得し、返ってくるコードと回数の減り方を確かめてから、範囲を広げてみてください。