本記事では、FigmaのデザインをAIでコーディングする2つの方法、実践手順、精度を高めるコツ、注意点を、実際にコーディングを担当する制作担当者やエンジニアに向けて解説します。自社の制作フローにAIコーディングを取り入れる際の参考にしてください。
FigmaでAIコーディングするとは
FigmaでAIコーディングするとは、Figma上のデザインデータをもとに、AIがHTMLやCSSなどのコードを生成・修正する仕組みです。ただし、デザインデータを渡すだけで、そのまま公開できる完成品ができあがるとは限りません。
この取り組みを実現する方法は、大きくFigma公式の「Figma Make」と、MCP経由での外部AIエージェント連携の2つに分かれます。次章では、それぞれの特徴を見ていきます。
FigmaでAIコーディングする主な方法
FigmaでAIコーディングする方法は、主に2つあります。
- Figma Makeでデザインからコードを生成する
- MCPでCursorやClaude Codeと連携する
Figma Makeでデザインからコードを生成する
Figma Makeは、Figmaが提供するAI機能で、プロンプトや既存のデザインをもとに、動作するコードをFigma内で直接生成します。生成されたコードはFigma上の組み込みエディタで確認・調整でき、外部のツールに切り替える必要がありません。Figma Sitesなど他のFigma機能とも連携しており、プロトタイプの作成から公開まで一つの画面で完結できる点が特徴です。
ただし、Figma Makeを利用するには、Professional以上の有料プラン（フルシート）への加入が必要です。料金や利用条件は改定される可能性があるため、契約前に公式サイトで最新情報を確認してください。
MCPでCursorやClaude Codeと連携する
MCPで連携する方法は、CursorやClaude CodeといったAIエージェントに、Figmaのデザイン情報を直接読み込ませる仕組みです。MCP（AIと外部ツールをつなぐ標準規格）を使うと、使い慣れた開発環境の中でFigmaのデザイン情報を扱えます。
なお、コードを生成するのはMCPではなく、接続先のAIエージェントです。MCP自体はデザイン情報を受け渡す仕組みにすぎず、コードを書く役割をもたない点は誤解しやすいので注意しましょう。
AIエージェントごとの機能や料金の違いは、コード生成AIとは？主要ツールの比較と失敗しない選び方を解説や、CursorとClaude Codeの違いとは？特徴・料金・使い分けの判断基準をわかりやすく解説でも紹介しています。
Figmaと外部AIを連携してコーディングする手順
Figmaと外部AIエージェントを連携してコーディングする手順は、次の4ステップです。
- レイヤーやレイアウトを整理する
- 外部AIにFigmaのデザインを読み込ませる
- 実装条件を伝えて部分ごとに生成する
- 表示と動作を確認して修正する
レイヤーやレイアウトを整理する
Figmaと外部AIを連携してコーディングするにはまず、レイヤーやレイアウトの整理をしておきましょう。「Frame 1」「Rectangle 2」のような初期値のレイヤー名を、役割がわかる名前に変更し、繰り返し使う要素はコンポーネント化します。AIが生成するコードの質はFigma側のファイル構造に強く左右されるため、この整理を後回しにしないことが重要です。
また、Auto Layout（要素の配置を自動調整する機能）を設定しておくと、画面幅が変わったときの並びや余白の意図をAIに伝えやすくなります。色やサイズはVariablesで管理しておくと、ハードコードされた値ではなく、意味のある単位としてAIに渡せます。
外部AIにFigmaのデザインを読み込ませる
外部AIにFigmaのデザインを読み込ませるには、まずAIエージェント側にFigma用の接続機能を追加します。Claude Codeの場合、ターミナルで「claude plugin install figma@claude-plugins-official」と実行するだけでインストールが完了する仕組みです。
接続が済んだら、Figma側で対象のフレームを選択し、「選択範囲へのリンクをコピー」からURLを取得してAIに渡します。このURLを渡すことで、AIはget_design_contextという機能を通じて、対象ノードの構造やスタイル情報を構造化データとして取得できます。
実装条件を伝えて部分ごとに生成する
実装条件を伝える際は、画面全体を一度に渡すのではなく、部分ごとに区切って指示します。「ヘッダー部分を、Reactとtailwindcssで、既存のButtonコンポーネントを再利用しながら実装してください。画面幅が768px未満のときはハンバーガーメニューに切り替えてください」のように、対象範囲・使用技術・再利用する部品・画面幅ごとの動きを具体的に含めることで生成の精度を高められます。
なお、画面全体を一括で渡すと、AIに渡す情報量が増えすぎて、出力されるコードの一貫性が崩れやすくなります。コンポーネント単位で依頼し、あとから組み合わせるほうが、修正の手間を抑えられるでしょう。
表示と動作を確認して修正する
表示と動作の確認は、コードが生成されるたびにおこないましょう。ブラウザで実際の見た目を確かめ、画面幅を変えたときのレイアウト崩れや、ボタン・メニューの動作に問題がないかをチェックします。
問題が見つかった場合は、該当箇所を具体的に伝えて修正を依頼します。この確認と修正のサイクルを省略すると、見た目は近くても細部が崩れたまま公開してしまうおそれがあるため、最後まで省かないことが重要です。
FigmaでAIコーディングする際の注意点
FigmaでAIコーディングする際は、次の4点に注意が必要です。
- レスポンシブの動きを具体的に指定する
- 既存の部品と実装ルールを共有する
- 見た目以外の品質も確認する
- データの送信先と利用権限を確認する
レスポンシブの動きを具体的に指定する
FigamaでのAIコーディングは、レスポンシブの動きを具体的に指示しましょう。単純に「レスポンシブ対応させて」と伝えるだけでは、意図した仕上がりにはなりません。画面幅ごとにメニューをハンバーガー化する、カードを1列に並べ替えるなど、具体的な変化を書き添えることで、崩れを防ぎやすくなります。
Figma側でブレークポイントごとのフレームを用意しておくと、AIに伝える情報も具体的になり、指示の手間を減らせます。
既存の部品と実装ルールを共有する
既存の部品と実装ルールは、AIに伝えないと反映されません。コーディング規約やコンポーネントの命名規則を共有しないまま生成を進めると、既存の実装と異なる書き方のコードが混在してしまいます。
対策としてはCode Connect（Figmaのコンポーネントとコードベースのコンポーネントを対応付ける仕組み）を整備しておくと、既存コンポーネントの再利用が進みやすくなります。ただしCode ConnectはOrganization・Enterpriseプラン限定の機能のため、対象外のプランでは、ルールファイルなどで規約を明文化して共有する方法が現実的です。
見た目以外の品質も確認する
加えて、見た目以外の品質確認も欠かせません。生成されたコードのクラス名や構造が保守しやすいか、キーボード操作やスクリーンリーダーでの利用に配慮されているかを確認します。とくに、見出しタグやalt属性などのセマンティックな構造は、AIの出力だけに頼らず、人の目で確認しておくべき項目です。
また、ページの表示速度が極端に落ちていないかも見ておきましょう。画像の最適化や不要なコードの整理まで含めて、コーディング担当者が最終チェックを担う工程です。
データの送信先と利用権限を確認する
データの送信先は、外部AIエージェントを利用する前に確認しておきたいポイントです。Figmaのデザインデータや、接続先のAIサービスに渡す情報がどこに送られ、どのように扱われるのかを、利用するツールの規約で確認します。
未公開のデザインや顧客情報を含むプロジェクトでは、とくに慎重な確認が必要です。チームで導入する際は、個人の判断に任せず、利用して良いツールや共有して良い情報の範囲を、社内ルールとして明文化しておきましょう。
まとめ
FigmaのデザインをAIでコーディングする方法には、Figma内で完結するFigma Makeと、MCP経由で外部のAIエージェントと連携する方法の2つがあります。どちらも、デザインデータを渡すだけで完成品ができあがるわけではありません。
精度を左右するのは、レイヤーやコンポーネントの整理、部分ごとに区切った具体的な指示、そして生成後の確認と修正です。とくにレスポンシブの動きや既存部品との整合性は、AI任せにせず具体的に伝える必要があります。
弊社ブライセンのxTECHソリューションでは、FigmaやAIコーディングツールを活用した制作フローの構築を支援しています。自社の体制に合った進め方を相談したい方は、お気軽にお問い合わせください。
\あらゆる業界のDX化をおまかせください！/
お問い合わせ
