Figma × AI デザインワークフロー入門｜デザイン作業の80%をAIに任せる方法

デザインツールのFigmaに、
AIコーディングツールを直接つなげられるようになりました。

スケッチを描いて、
AIに渡して、
コードにする。
この一連の流れが、
1つのワークフローで完結します。

「Webサイトやアプリの見た目を作りたいけど、
コードが書けない」という人にとって、
大きな変化です。

この記事では、
40人のデザイナーを率いるCDO（最高デザイン責任者）Cameron Moll氏のワークフローをベースに、
FigmaとAIの連携でデザインの何が変わるのかを解説します。

そもそもFigma × AIの何がすごいの？従来のデザインと何が違う？

まず「何が変わったのか」を整理します。

デザインの仕事は、
完成品を1つ作ることではありません。
「こっちの色がいいかな」「やっぱレイアウト変えよう」を何十回も繰り返す作業です。

Cameron Moll氏の言葉を借りると、
この「探索と反復」がデザイン作業の80%を占めます。

1つのバリエーションを作るのに数時間。3パターン比較したかったら、3倍の時間。

AIが入ると、この構造がひっくり返ります。

一番大きいのは「コード化」の部分です。

従来は、
デザイナーが画面をデザインして、
エンジニアに渡して、
エンジニアがコードに変換していました。
この受け渡しに数日から数週間かかります。

AIを挟むと、
デザイナーがコードまで持っていけます。
Cameron Moll氏は「デザイナーがコードを書けるべきかという議論は終わった。
今のツールはコーダーである必要がない」と言い切っています。

Cameron Moll氏の「シフトレフト」ワークフローとは？

Cameron Moll氏が提唱しているのが「シフトレフト」という考え方です。

ソフトウェア開発は通常、
アイデア → デザイン → コード → テスト → リリースの順に進みます。
左から右に流れていく。

「シフトレフト」は、
右側でやっていたことを左側に持ってくるという意味です。
具体的には、
「コードにする」「ユーザーに触ってもらう」を、
デザインの段階でやってしまいます。

Cameron Moll氏の実際のワークフローはこうです。

まず、
AIチャット（Claude、
ChatGPT、
Geminiなど）でチームとアイデアを整理する。
次に、
ユーザーの声を聞く。
そしてAIコーディングツール（Claude CodeやCursor）で動くプロトタイプを作る。
最後に、
Figmaに持っていって、
チーム全員でデザインを磨く。

ポイントは「Figmaで完璧なデザインを作ってからコード化する」ではないこと。
先にAIでざっくり動くものを作って、
それをFigmaに戻して仕上げる。
順番が逆です。

Moll氏はこのワークフローを社内で「Intelligence Studio」というワークショップにして、
2ヶ月に1回チームに共有しています。
「AIプレイデート」から進化した形で、
「意図を持って、
インパクトを出して、
良い判断で使おう」というスタンスです。

Figma × AIはどんな場面で使える？

Webサイトのデザインを「動くもの」にしたい時

「こんなWebサイトにしたい」というイメージはあるけど、
コードが書けない。
従来なら、
Figmaでデザインして、
コーダーに外注するしかなかったケースです。

今はClaude Codeに「このデザインをHTMLにして」と言えば、
動くWebサイトが出てきます。

Figma MCPというしくみを使えば、
Figmaのデザインデータをそのまま読み込めます。
色、
フォント、
余白の情報がAIにそのまま伝わるので、
「デザインと違う」が起きにくい構造です。

デザインのバリエーションを一気に比較したい時

「ヘッダーの色は青がいいか、
緑がいいか」「ボタンは角丸か、
四角か」。
こういう比較を手作業でやると、
1パターンあたり何十分もかかります。

AIなら「この画面の色違いを3パターン作って」の一言でバリエーションが出てきます。

Cameron Moll氏が「探索と反復の80%をAIが圧縮する」と言ったのは、
まさにこの部分です。
3パターンどころか10パターンを並べて、
「これだ」を選ぶスタイルに変わります。

チーム内でデザインの認識を揃えたい時

デザイナーとエンジニアの間で「ここの余白って何pxですか？」というやりとりは、
地味に時間を食います。

Figma MCPを使うと、
AIがFigmaのデザインデータを「コンポーネント」「変数」「スタイル」「レイアウト構造」のレベルで読み取ります。
スクリーンショットではなく、
デザインの構造そのものを理解する仕組みです。

だから「デザイン通りに作って」が本当にデザイン通りになる精度が高い。

動くプロトタイプをFigmaに戻して比較したい時

Claude Codeで作ったWebページを、
Figmaに送り返せるのが大きな特徴です。

Figma公式ブログによると、
「Send this to Figma」と打つだけで、
ブラウザの表示がFigmaの編集可能なレイヤーに変換されます。

AIで作った → Figmaで比較・修正 → またAIでコード化、
の往復が可能です。
片道切符ではなく、
双方向でやりとりできるのがポイントです。

Figma × AIを使うのに必要なものは？

全部無料でできるわけではないので、正直に書きます。

最安ルートは、
Figma無料プラン＋Claude Pro（月$20）＋リモートMCPサーバー（ベータ中無料）。
月$20で始められます。

ただし、
Figmaの無料プランは3ファイルまでという制限があるので、
本格的に使うならProfessional（月$16）が必要です。

日本語対応について。
Figma自体は日本語UIに対応しています。
Claude Codeも日本語での指示に対応済み。
MCPサーバー経由のやりとりも日本語で問題ありません。

Figma × Claude Codeの使い方は？セットアップ手順

大きく分けて3ステップです。

ステップ1：Figmaアカウントを作る

figma.comにアクセスして、
無料アカウントを作ります。
Googleアカウントでログインできるので、
メールアドレスとパスワードを別に作る必要はありません。

ログインしたら、適当にデザインファイルを1つ作っておいてください。

ステップ2：Claude CodeにFigma MCPを接続する

Claude Codeをすでに使っている前提で書きます。方法は2つあります。

方法A：プラグインインストール（推奨）

Claude Codeを開いて、以下を実行します。

claude plugin install figma@claude-plugins-official

これでFigmaとの接続に必要なものが入ります。
次に /plugin と打ってEnter。
プラグイン一覧の「Installed」タブからfigmaサーバーを選んでEnter。
ブラウザが開いて認証画面が出るので、
「Allow access」をクリックすれば完了です。

方法B：リモートMCPサーバー

プラグインがうまくいかない場合は、以下のコマンドで直接接続できます。

claude mcp add --transport http figma https://mcp.figma.com/mcp

Figmaのヘルプセンター（help.figma.com）に「Figma MCP collection」という記事があるので、
詳細はそちらを参照してください。

ステップ3：実際にデザイン→コードをやってみる

接続ができたら、
Figmaでデザインしたフレーム（画面のかたまり）を右クリック → 「Copy link to selection」でリンクをコピー。

Claude Codeに戻って、こう伝えます。

「このFigmaのデザインをHTMLとCSSで再現して。
リンクはこれ：[コピーしたリンクを貼る]」

Claude CodeがFigma MCP経由でデザインデータを読み取って、
色・フォント・レイアウトを忠実に再現したコードを生成します。

逆方向もできます。
Claude Codeで作ったWebページをブラウザで開いた状態で、
「Send this to Figma」と打つ。
ブラウザの表示がFigmaの編集可能なフレームに変換されるので、
Figma上で微調整が可能です。

よくある疑問

Q. デザイン経験ゼロでも使えますか？

正直、
Figmaの基本操作は必要です。
フレームの作り方、
テキストの配置、
色の変え方くらいは知っておいたほうがいい。
ただ、
Figma自体が無料で使えるし、
YouTubeに初心者向けチュートリアルが豊富にあります。
操作を覚えるのに1〜2日あれば十分です。
覚えたらあとはAIに「こういう画面を作りたい」と伝えるだけなので、
プログラミングよりハードルは低いです。

Q. Canvaじゃダメなの？

Canvaは「完成品を作る」ツールです。
ポスター、
SNS画像、
プレゼン資料を仕上げるのが得意。
一方でFigmaは「設計図を作る」ツール。
WebサイトやアプリのUI（ボタンの配置、
画面遷移、
インタラクション）を設計するためのもの。
AIとつないで「動くWebサイト」にするなら、
Figmaのほうが向いています。
デザインデータの構造（コンポーネント、
変数、
スタイル）をAIがそのまま読めるからです。
Canvaのデータはそういう構造になっていないので、
AIに渡しても「見た目は似てるけど構造が違う」になりやすいです。

Q. Claude Code以外のツールでもFigma MCPは使えますか？

使えます。
Figma MCP serverはCursor、
VS Code、
OpenAI Codexなど14以上のツールに対応しています。
ただし「コードからFigmaに送る」機能は、
現時点ではClaude Code限定です。
Figma→コードは他ツールでもできますが、
コード→Figmaの双方向ができるのはClaude Codeだけ。
ここが大きな差です。

Q. 日本語でデザインの指示を出せますか？

出せます。
Claude Codeは日本語での指示に対応しています。
「ヘッダーの背景色を紺にして」「ボタンのサイズを大きくして」という指示で動きます。

Figma × AIの注意点と限界は？

いいことばかり書いてきたので、正直に限界も書きます。

まず、
Figma MCPのリモートサーバーはベータ版です。
今は無料で使えますが、
正式版になると使用量ベースの課金になる予定。
料金体系はまだ発表されていません。

次に、
AIが生成するコードは完璧ではありません。
特に複雑なインタラクション（アニメーション、
ドラッグ操作、
リアルタイムデータ表示など）は、
AIだけでは対応が難しい場合があります。
シンプルなレイアウトやランディングページなら精度は高いですが、
凝った動きをつけたい場合はエンジニアの手が必要です。

Cameron Moll氏も「AIの砂塵が落ち着いた時、
クラフト・テイスト・スタイル・魂への需要は変わらない」と述べています。
AIはバリエーションを爆速で作ってくれますが、
「どれがいいか」を選ぶのは人間の仕事です。
AIが出したものをそのまま使うと、
みんな同じようなデザインになります。

「80%の探索をAIに任せて、
残り20%の判断に人間が集中する」が、
現時点での最適解です。

まとめ

Cameron Moll氏の言葉で刺さったのが、
「デザイナーがシップしない言い訳はもうなくなった」という一言。
コードが書けないから作れない、
エンジニアの手が空かないから進まない。
その言い訳が、
AIで消えました。

デザイナーではない人にとっても同じです。
「こういうWebサイトが欲しい」と思った時に、
Figmaで画面を描いて、
Claude Codeに渡すだけ。
完璧ではなくても「動くもの」なら、
1日で作れます。

まずはFigmaの無料プランでアカウントを作って、
フレームを1つ描いてみてください。
そしてClaude Codeに「これをWebサイトにして」と渡す。
「探索と反復の80%」がどれだけ変わるか、
1回の体験で実感できます。

参考リンク

Cameron Moll氏のプロフィール: https://cameronmoll.com

Figma公式 — Claude Code to Figma: https://www.figma.com/blog/introducing-claude-code-to-figma/

Figma公式 — The Future of Design Is Code and Canvas: https://www.figma.com/blog/the-future-of-design-is-code-and-canvas/

Figma MCP Serverガイド: https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server

Figma料金プラン: https://www.figma.com/pricing/

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。