FigmaのデザインをReactのコードにしたいとき、最初に知っておくべき事実は、Figmaの標準機能にHTMLやReactをそのまま書き出すボタンは無いということです。Dev Modeのコードパネルが返すのはCSSなどの視覚プロパティで、DOMの構造は含みません。Reactのコードを生成する経路は主に4つです。コーディングエージェントにデザイン文脈を渡すFigma MCPサーバー、プロンプトから作り直すFigma Make、デザインファイルの中で動くFigmaエージェント、Locofyのような変換プラグインで、ここに値の照合に使うDev Modeを加えて比較します。以下、各経路の選び方、MCPとLocofyの手順、生成コードの受け入れ基準の順に整理します。
まとめ
- Dev Modeのコードパネルで選べる言語はCSS、SwiftUIまたはUIKit、ComposeまたはXMLの3系統で、HTMLもReactも無い。しかも有料プランのFullかDevシートでしか開けない。
- 既存のコードベースがあるならFigma MCPサーバーが第一候補。
get_design_contextの既定出力はReact + Tailwindで、プロンプトでVueや素のHTML + CSSに変えられる。 - MCPのツールコール上限は、View・Collabシートが全プランで月20回、Dev・Fullシートが1日200回〜600回。お試しはできても、実務で回すならDevかFullシートが前提になる。
- リポジトリが無い段階ならFigma Make。コードはzipでダウンロードするか、Makeが作ったGitHubリポジトリへ一方向にpushする。既存リポジトリへは直接pushできない。
- デザイナーが叩き台のコードを渡すならFigmaエージェント。全プランで使え、ReactとHTMLを並行して生成させられる。
- 確定したデザインを画面単位で一括変換したいならLocofy。出力先はReact、Next.js、React Nativeなどで、スタイル方式はTailwind CSSやCSS Modulesから選ぶ。
- 色や余白などの値はデザインと照合する。要素の意味づけ、状態、入力処理は人がレビューし、要件に合わない部分の修正工数を見積もる。
FigmaのHTML書き出し制限とReact変換の4経路
Dev Modeコードパネルの対応言語とHTML出力の制限
Figma公式ヘルプの「Use code snippets in Dev Mode」は、コードパネルで選べる言語をCSS（Web）、SwiftUIまたはUIKit（iOS）、ComposeまたはXML（Android）と明示しています。HTMLはこの一覧にありません。パネルに出るのは選択したレイヤーの色、余白、フォント、角丸といった視覚プロパティで、要素の入れ子や見出しレベル、リンク先といったマークアップの情報は持っていません。
理由はFigmaのレイヤーが構造ではなく描画の単位だからです。「ボタンらしき角丸の長方形」はデータ上は単なるフレームで、それがbuttonかaかを決める情報を持ちません。マークアップは、人かAIか変換ツールが意味を補って初めて成立します。
Dev Mode自体も、ヘルプの可用性欄は「Available on all paid plans」「Requires a Full or Dev seat」で、無料のStarterプランではコードパネルを開けません。
4経路とDev Modeの比較
| 経路 | 入力 | React出力 | 利用条件 | 向く場面 |
|---|---|---|---|---|
| Figma MCPサーバー | フレームのリンク | 既定でReact + Tailwind | 全プラン（回数上限あり） | 既存コードベースに組み込む |
| Figma Make | デザイン＋プロンプト | あり（作り直し） | 有料プランのFullシート | 動くプロトタイプを先に出す |
| Figmaエージェント | キャンバスの選択範囲 | 指示すれば生成 | 全プラン（AIクレジット消費） | デザイナーが試作コードを渡す |
| Locofyなど変換プラグイン | 既存のフレーム | あり（レイアウト込み） | 各社の料金体系 | 確定したデザインを一括で起こす |
| Dev Modeコードパネル | 選択レイヤー | なし（CSSのみ） | 有料プランのFull・Dev | 実装中に値を照合する |
選定を分けるのは再現度ではなく、既存のコードベースがあるかどうかです。リポジトリが無い立ち上げ期ならFigma Makeで動くものを出すのが速く、規約が固まったプロジェクトに変換プラグインの出力を混ぜると命名もディレクトリ構成も浮きます。後者ではMCPサーバー経由でエージェントに既存コンポーネントを参照させたほうが、手直しの総量は小さくなります。
色や余白の値をデザイントークンとして機械的に同期したいだけなら、Figma APIの使い方｜レート制限・トークン・Variables APIのEnterprise条件で扱っているREST APIを直接叩く自作の道もあります。
Figma MCPサーバーでReactコードを生成する手順
Claude Code・VS Codeへの接続
Figma MCPサーバーは、Figmaのデザイン情報をModel Context Protocol経由でコーディングエージェントに渡す仕組みです。Figmaはリモートサーバーの設定手順を推奨としており、エンドポイントはhttps://mcp.figma.com/mcpです。Claude Codeでは、MCPの設定とAgent Skillsを同梱した公式プラグインの導入が推奨されています。
claude plugin install figma@claude-plugins-official手動で登録する場合は次の1行です。既定のスコープは現在のプロジェクトだけなので、全プロジェクトで使うなら--scope userを付けます。
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcpVS Codeではmcp.jsonに同じエンドポイントを登録し、サーバー名の上に出るStartを押してアクセスを許可します。
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}接続できるのはFigmaのMCPカタログに載ったクライアントだけで、VS Code、Cursor、Claude Code、Codex、Xcodeなどが該当します。クライアントごとの設定はFigma MCPサーバーとは｜料金・レート制限・対応クライアント17種と使い方【2026年9月時点】にまとめています。
get_design_contextの既定出力はReact + Tailwind
Reactへの変換で使うツールはget_design_contextです。公式のツール一覧は、このツールの出力を「By default, the output is React + Tailwind」と明記しており、プロンプトで出力先を変えられるとしています。リモート版は選択範囲を読めないため、FigmaでフレームやレイヤーのリンクをコピーしてURLごと渡すのが前提です（選択中のレイヤーを読む指示はデスクトップ版だけで動きます）。
このFigmaフレームをReactコンポーネントにして。
https://www.figma.com/design/XXXXXXXX/App?node-id=12-345
スタイルはCSS Modules、ボタンとカードは src/components/ui の既存コンポーネントを使うこと。公式の例文は、フレームワークを変える（Vue、素のHTML + CSS、iOS）、自社のコンポーネントを使わせる、その両方を組み合わせる、の3種類です。既定のTailwindがプロジェクトの方式と違うなら、毎回プロンプトで指定するより、エージェントのルールファイルに「スタイルはCSS Modules」と書いておくほうが漏れません。
自社のReactコンポーネントライブラリがあるなら、Code Connectで対応付けておくと効果が大きく変わります。Figmaのボタンが自社のButtonとして返るため、エージェントが既存部品を再利用しやすくなります。生成後は実際のimportとpropsを確認します。リモート版では、Code Connectで付けたラベル（Reactなど）をclientFrameworksパラメータで指定させると、どの対応付けを送るかを制御できます。Code ConnectはOrganizationかEnterpriseプランのFull・Devシートが条件で、2026年8月18日公開のCLI 2.0.0から書き方も変わっています。設定手順と移行はFigma Code Connectの使い方｜UIとCLIの始め方とDev Mode表示・CLI v2移行で扱っています。
プランとシートで決まるツールコール上限
MCPサーバーの読み取り系ツールには、プランとシート種別ごとに呼び出し回数の上限があります。2026年10月12日時点の公式ドキュメントの値は次のとおりです。
| プラン | View・Collabシート | Dev・Fullシート |
|---|---|---|
| Starter | 月20回まで | 月20回まで |
| Professional | 月20回まで | 1日200回（毎分10回） |
| Organization | 月20回まで | 1日200回（毎分15回） |
| Enterprise | 月20回まで | 1日600回（毎分20回） |
Educationプランは、ProfessionalのDev・Fullシートと同じ1日200回・毎分10回です。上限の対象外はadd_code_connect_map、create_new_file、whoamiの3つと明記されています。注意したいのは、GitHubのfigma/mcp-server-guideのREADMEには「Starterプランと有料プランのView・Collabシートは月6回」という旧い値が残っている点です。月6回と書いた解説は旧い値を引いています。
月20回はget_design_contextとget_variable_defsを数画面分呼べば尽きる量で、実務で回すなら担当者にDevかFullシートを割り当てるところから設計します。なお、Figmaのファイルへ書き込む機能（write to canvas）は、READMEで「いずれ従量課金の有料機能になるが、ベータ期間中は無料」とされています。有料化の対象は書き込み側で、読み取り側ではありません。書き込みの挙動はuse_figmaとは？Figma MCPでAIがキャンバスに書き込む仕組みと使い方・制限で扱っています。
Figma MakeとFigmaエージェントのコード生成・利用条件
Figma Makeのコード生成とzip・GitHubへの出力
Figma Makeは、プロンプトや既存のFigmaデザインから動くアプリを生成するFigmaのAI機能です。公式のAI Reactジェネレーターのページは、デザインとプロンプトをReactコードに変換すると説明しています。利用条件は有料プランのFullシートで、それ以外のシートやプランでは試用の扱いです。
Makeは既存デザインを写すのではなく、プロンプトを解釈して作り直します。デザインカンプを1px単位で再現したい案件には向かず、「この画面にソート機能を足した一覧を動く形で見たい」といった用途で最短です。
コードの持ち出し方は2つです。1つはコードエディタからのダウンロードで、アプリ一式がzipになります。もう1つはGitHubへのpushで、こちらは全プランで使えます。ただし制約がはっきりしています。
- pushできるのはMakeが作成したリポジトリだけで、自分で作った既存のリポジトリには送れない
- Makeファイル1つにつきリポジトリ1つで、pushは常に既定のブランチ（通常は
main）へ入る - 同期は一方向で、GitHub側で直したコードはMakeに戻らず、次のpushで上書きされる
つまりMakeの出力は、既存のReactプロジェクトへの差分ではなく別リポジトリの試作品です。本番へ移すなら必要なコンポーネントを手で移植し、その時点でMake側の編集は止めます。既存リポジトリを直接開いて編集し、ブランチを切ってプルリクエストを出せる「Make in your local codebase」も発表されていますが、2026年10月時点ではMac版のFigma Betaデスクトップアプリ限定のクローズドベータです。料金とAIクレジットの消費、エクスポートの詳細はFigma Makeの料金・AIクレジットとは？プラン別の上限と消費量・使い方・エクスポートまで解説にまとめています。
Figmaエージェントによるファイル内のコード生成
Figma Designには、キャンバス上でAIに作業させるFigmaエージェントが組み込まれています。ヘルプの「Work with the Figma agent in design files」は全プランで利用可としており、レイヤーを選んでCmd（WindowsはCtrl）+Enterで呼び出します。ファイルを編集させられるのはFullシートで編集権限がある場合で、View・Dev・Collabシートや閲覧のみの権限ではチャットだけになります（自分の下書きファイルではどのシートでも編集可）。
コード生成については、Figma公式のFigmaコード変換ツールのページが、フレームを選んで「HTMLとCSS、Reactコンポーネント、特定のフレームワーク」を指示すると出力を生成し、React版とHTML版を並行プロンプトで同時に試せると説明しています。
位置づけは、デザイナーが開発者へ「この画面ならこう組める」という叩き台を渡す道具です。既存のディレクトリ構成や命名規則に合わせたい場合は、プロンプトや添付資料で規約を渡し、生成結果を照合します。実装に入る段階ではMCPサーバー経由でコーディングエージェントに引き継ぐほうが、手直しは少なくなります。
AIクレジットのプラン別付与量
Figma MakeとFigmaエージェントはAIクレジットを消費します。How Figma AI credits work（2026年10月11日更新）の付与量は次のとおりで、月ごとにリセットされ繰り越しはできません。
| シート | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| Full | 月500 | 月3,000 | 月3,500 | 月4,250 |
| Dev・Collab・View | － | 月500 | 月500 | 月500 |
StarterプランとViewシートには、さらに1日150クレジットの上限があります。エージェントの消費量は作業の複雑さで変わるとされ、1回あたりの固定値は公表されていません。見積もるなら、対象の中で最も複雑な画面を1つ変換させ、消費量を実測してから画面数を掛けます。
Locofy LightningでFigmaデザインをReactへ変換する手順
変換前にFigma側で整えるAuto Layout・レイヤー名・コンポーネント化
Locofyの出力品質は、起動前のFigmaファイルの状態で大きく変わります。効くのはAuto Layout、レイヤー名、コンポーネント化です。Auto Layoutを設定すると配置意図を伝えやすくなりますが、未設定でもLocofyのLightningフローはCSSやメディアクエリによるレスポンシブ化を行います。変換後の各画面幅で確認が必要です。レイヤー名もLightningフローが自動で付け直しますが、Frame 427のような名前を意味のある名前にしておけば、生成後の確認が楽になります。コピーしたカードでもLocofyの自動検出で共通化できる場合があります。再利用の意図を明示するには、コンポーネントとインスタンスとして整理し、生成後に共通部品への分割とpropsの対応を確認します。この3点はFigma MCPサーバーの出力にもそのまま効きます。
プラグイン起点の作業手順
Locofyの公式ドキュメントは、コードを取り出す入口をFigmaのプラグイン、CLI、MCP、URLインポートの4つに整理しています。Figmaのデザインを起点にするならプラグインです。プラグインの中ではLocoAIと呼ばれる変換エンジンが「この角丸の長方形はボタン」「この枠は入力欄」といった要素の種類を自動で推定し、Lightningフローとしてコードまで進みます。
- Figmaで対象ファイルを開き、Locofyのプラグインを起動する
- 変換したいフレームを選択してLocofyへ同期する
- LocoAIが付けたタグ（ボタン・入力欄・リストなど）をEditで確認し、外れている箇所を直す
- プロジェクト作成時に選んだフレームワークを確認し、スタイル方式と出力設定を調整する
- コードを書き出す。GitHub同期はEnterpriseプランまたは旧年間セルフサービス契約で利用する
手作業のタグ付けから始める旧来のClassicフローは、公式ドキュメント上でLegacyに区分されています。新規案件で選ぶ理由はありません。
出力先フレームワークとスタイル方式の選び方
Locofyのクイックスタートが挙げる出力先は、WebがReact、Next.js、HTML/CSS、Gatsby、Vue、Angular、モバイルがFlutter、React Native、Swift、Jetpack Composeです。Web向けにはMaterial UI、Chakra UI、Ant Design、BootstrapといったUIライブラリも選べ、スタイルはCSS Modules、Tailwind、インラインなどから指定します。既存プロジェクトへ組み込む場合は、保守するスタイル方式を増やさないため、現在の方式に合わせることを推奨します。Tailwindを使っているリポジトリにCSS Modulesの出力を持ち込むと、以後そのコンポーネントだけ別ルールで保守することになります。
料金はLDMトークンの従量制
Locofyの課金はLDM（Large Design Model）トークンの消費量に紐づきます。2026年10月12日時点の公式料金ページでは、月払いのHobbyが月額40ドルで2,000 LDMtokens、Proが月額80ドルで4,000 LDMtokensです。デザインの作り込み具合で消費量が変わるので、見積もりは最も複雑な画面を1つ変換して実消費を測り、画面数を掛けて作ります。なお、GitHub同期と既存コンポーネントの対応付けは月払いのFree・Hobby・Proでは使えず、Enterpriseプランか旧年間セルフサービス契約が条件です。
Anima・Builder.ioとの違い
AnimaとBuilder.ioもFigmaのプラグインからReactを出力でき、Locofyとの違いは課金の単位にあります。
| ツール | React以外の主な出力 | スタイル方式 | 課金の単位 |
|---|---|---|---|
| Locofy | Next.js、Vue、Flutterなど | CSS Modules、Tailwindなど | LDMtokensの消費量 |
| Anima | Vue、HTML | CSS、Tailwind、CSS Modules、SASSなど | 月のコード生成回数 |
| Builder.io | Vue、Angular、Svelteなど | Tailwind CSS、Emotion、Styled Componentsなど | ユーザー月額＋追加Agent Credits |
Animaはコード設定のドキュメントでReact、Vue、HTMLへの出力に対応し、ReactではJavaScriptかTypeScriptを選べると説明しています。月のコード生成回数はヘルプ記事によればFreeが5回、Starterが50回、Proが200回、Businessが600回です。Animaの予算は画面数だけでなく、修正を含むコード生成回数で見積もります。Figmaプラグインからの出力、Playgroundへの取り込み、プロンプト生成なども回数に含まれます。
Builder.ioは料金ページでFreeが1ユーザー0ドル、Proが24ドル、Teamが40ドル（いずれもユーザーあたり月額）で、ProとTeamには月500 Agent Creditsが付き、超過分は500クレジットごとに25ドルで追加します。Figmaプラグインで選んだフレームをSmart ExportかExport to Codeで書き出します。Figmaのコンポーネントを既存のコードのコンポーネントへ対応付ける機能はドキュメント上でベータかつEnterpriseプラン限定なので、自社のデザインシステムに寄せたい場合はFigma公式のCode Connectと比べてから選びます。
生成コードの受け入れ基準と修正対象
生成コードの値・要素・状態に関する確認基準
どの経路を使っても、出力されたコードを無条件にマージしてはいけません。判断を分ける線は「デザインから機械的に決まるか」です。色、余白、フォントサイズ、角丸、影といった値は、デザインが正であればコードも正なのでそのまま残します。要素の意味づけ、状態、入力の扱いは、デザインに存在しない情報を推測で埋めた結果なので、必ず人が見ます。
典型的なのが、絶対配置で出力されたレイアウトと、意味を持たないdivの入れ子です。次の出力は固定幅と絶対配置のため、狭い画面や文字の拡大時にはみ出すおそれがあります。また、申し込み操作がボタンとして伝わらず、標準のキーボード操作も備えていません。
export default function Card({ handleClick }) {
return (
<div style={{ position: "absolute", left: 24, top: 16, width: 320 }}>
<div style={{ position: "absolute", left: 0, top: 0 }}>料金プラン</div>
<div style={{ position: "absolute", left: 0, top: 40 }}>月額 3,300円</div>
<div onClick={handleClick} style={{ position: "absolute", left: 0, top: 88 }}>
申し込む
</div>
</div>
);
}次は要素の意味づけを修正する例です。固定文言をplan・priceのpropsへ移し、handleClickをonApplyへ変更しています。呼び出し側も変更し、元の見た目を保つ場合はcardクラスのCSSを別途定義します。
export default function Card({ plan, price, onApply }) {
return (
<section className="card">
<h3>{plan}</h3>
<p>月額 {price}円</p>
<button type="button" onClick={onApply}>
申し込む
</button>
</section>
);
}前者はdivにクリックハンドラを付けているため、キーボードでフォーカスも実行もできず、見出しが無いので文書構造も持ちません。後者はbuttonにしただけでフォーカスとEnterキーでの実行が標準で付きます。この置き換えを全画面へ適用する時間は、あらかじめ見積もりに入れておきます。
変換ツールを使うべきでない場面
次の条件では、変換後の修正工数と手実装の工数を比較してください。既存部品の組み合わせだけで済む画面では、手実装を第一候補にします。
1つ目は、既存のデザインシステムが成熟していて、画面の9割が既存コンポーネントの組み合わせで作れる場合です。変換ツールを通すと既存のButtonやModalの代わりに一点物のJSXが生成される場合があります。ただしLocofyにも既存コンポーネントを対応付ける機能があり、Enterpriseプランまたは旧年間セルフサービス契約では比較対象になります。ここはCode Connectを張ってMCP経由でエージェントに既存部品を参照させる領域です。
2つ目は、デザインがまだ確定していない段階です。書き出したコードはFigmaの変更だけでは自動更新されませんが、Locofyには再生成したコードを既存リポジトリへ反映し、競合を解決するSmart Merge（GitHub同期と同じ契約条件）があります。デザインが週に何度も動くうちは、変換のたびに手直しをやり直す分だけ工数が増えます。
3つ目は、フォームや管理画面など、見た目よりロジックが本体の画面です。バリデーション、エラー表示、送信中の状態は結局書くことになり、生成された絶対配置のマークアップを剥がす手間のほうが大きくなります。
デザインから実装までの分担や、変換ツールを入れるかどうかの判断から相談したい場合は、UI/UXデザインの支援でデザインデータの整備と実装の進め方をあわせて扱っています。
よくある質問
Figmaにデザインをそのままhtmlで書き出す機能はありますか？
ボタン1つで書き出す標準機能はありません。Dev Modeのコードパネルで選べるのはCSS、SwiftUIまたはUIKit、ComposeまたはXMLで、HTMLは含まれません。HTMLが欲しい場合は、Figma MCPサーバーに「素のHTML + CSSで」と指示するか、Figmaエージェントに HTML と CSS を指定するか、LocofyでHTML・CSSを出力先に選びます。
Figmaのコード生成は無料で使えますか？
試すだけなら無料のStarterプランでもできます。Figmaエージェントは全プランで使え（Starterは月500クレジット・1日150まで）、Figma MCPサーバーもStarterで月20回まで呼べます。Dev Modeのコードパネルは有料プランのFull・Devシート限定で、Figma Makeも本来は有料プランのFullシート向けです。複数画面を継続して変換するなら、有料プランとDevかFullシートが前提になります。
ReactのコードやWebページからFigmaのデザインを作る逆方向の変換はできますか？
できます。Figma公式ヘルプの「Turn coded screens into editable design layers」は全プランで利用可としており、方法はFigmaのChrome拡張でページを取り込む、Figma Makeのプレビューからレイヤーとしてコピーする、MCPサーバーのgenerate_figma_designで取り込む、の3つです。貼り付け時には、色や数値、文字列の変数がファイル内やライブラリの変数へ自動で結び付けられます。ただし不透明度を持つ色の変数は結び付かないため、手で割り当てます。
React Nativeのコードも出力できますか？
Locofyの変換先にはReact Nativeが含まれ、Figma MCPサーバーもプロンプトで出力先を指定できます。ただしReact NativeのFlexboxは既定の並び方向が縦（column）で、Webと前提が異なります。モバイル用のフレームを別に用意してから変換したほうが手直しは少なく済みます。1つのフレームを共用する場合は、WebとReact Nativeそれぞれで画面幅、文字の折り返し、操作領域を確認してください。
スクリーンショット画像からデザインやコードを起こせますか？
Figmaエージェントはプロンプトに画像を添付でき、静止画をベクターレイヤーに変換する機能も持っています。ただし生成されるのは推定されたレイヤー構造で、元のデザインのコンポーネント定義や変数は復元されません。実装まで持っていくなら、画像から起こすより、元のFigmaファイルをMCPサーバーでエージェントに渡すほうが結果は安定します。元ファイルが無く本番サイトが残っているなら、上の逆変換でページを取り込むほうが速く済みます。
