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

この記事はWebサイトやアプリの見た目を作りたい人・デザイン作業をAIで時短したい人向け（Figmaを触ったことがなくても読めます）。

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

画面を描いて、AIに渡して、コードにする。

この一連の流れが、1つのワークフローで完結します。

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

この記事では、40人のデザイナーを率いるCDOのワークフローをベースに、FigmaとAIの連携でデザインの何が変わるのかをまとめます。

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

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

デザインの仕事は、完成品を1つ作ることではありません。

「こっちの色がいいかな」「やっぱレイアウト変えよう」を何十回も繰り返す作業です。

このCDOの言葉を借りると、「探索と反復」がデザイン作業の8割を占めます。

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

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

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

従来は、デザイナーが画面を描いて、エンジニアに渡して、エンジニアがコードに変換していました。

この受け渡しに数日から数週間かかります。

AIを挟むと、デザイナーがコードまで持っていけます。

同CDOは「デザイナーがコードを書けるべきかという議論は終わった。

今のツールはコーダーである必要がない」と言い切っています。

CDOが提唱する「シフトレフト」ワークフローとは？

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

ソフトウェア開発は通常、アイデア → デザイン → コード → テスト → リリースの順に進みます。

左から右に流れていく。

「シフトレフト」は、右側でやっていたことを左側に持ってくるという意味です。

具体的には、「コードにする」「ユーザーに触ってもらう」を、デザインの段階でやってしまいます。

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

まず、AIチャット（Claude.ai、ChatGPT、Geminiなど）でチームとアイデアを整理する。

次に、ユーザーの声を聞く。

そしてAIコーディングツール（Claude CodeやCursor）で動くプロトタイプを作る。

最後に、Figmaに持っていって、チーム全員でデザインを磨く。

ポイントは「Figmaで完璧なデザインを作ってからコード化する」ではないこと。

先にAIでざっくり動くものを作って、それをFigmaに戻して仕上げる。

順番が逆です。

同CDOはこのワークフローを社内で「Intelligence Studio」というワークショップにして、2ヶ月に1回チームに共有しています。

「AIプレイデート」から進化した形で、「意図を持って、インパクトを出して、良い判断で使おう」というスタンスです。

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

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

「こんなWebサイトにしたい」というイメージはあるけど、コードが書けない。

従来なら、Figmaでデザインして、コーダーに外注するしかなかったケースです。

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

Figma MCPというしくみを使えば、Figmaのデザインデータをそのまま読み込めます。

色、フォント、余白の情報がAIにそのまま伝わるので、「デザインと違う」が起きにくい構造です。

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

「ヘッダーの色は青がいいか、緑がいいか」「ボタンは角丸か、四角か」。

こういう比較を手作業でやると、1パターンあたり何十分もかかります。

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

「探索と反復の8割を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サーバーはCursor、VS Code、OpenAI Codexなど14以上のツールに対応しています。

ただし「コードからFigmaに送る」機能は、現時点ではClaude Code限定です。

Figma→コードは他ツールでもできますが、コード→Figmaの双方向ができるのはClaude Codeだけ。

ここが大きな差です。

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

出せます。

Claude Codeは日本語での指示に対応しています。

「ヘッダーの背景色を紺にして」「ボタンのサイズを大きくして」という指示で動きます。

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

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

まず、Figma MCPのリモートサーバーはベータ版です。

今は無料で使えますが、正式版になると使用量ベースの課金になる予定。

料金体系はまだ発表されていません。

次に、AIが生成するコードは完璧ではありません。

特に複雑な操作の挙動（アニメーション、ドラッグ操作、リアルタイムデータ表示など）は、AIだけでは対応が難しい場合があります。

シンプルなレイアウトやランディングページなら精度は高いですが、凝った動きをつけたい場合はエンジニアの手が必要です。

同CDOは「AIの砂塵が落ち着いた時、クラフト・テイスト・スタイル・魂への需要は変わらない」とも述べています。

AIはバリエーションを爆速で作ってくれますが、「どれがいいか」を選ぶのは人間の仕事です。

AIが出したものをそのまま使うと、みんな同じようなデザインになります。

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

まとめ

刺さったのが、「デザイナーがシップしない言い訳はもうなくなった」という一言。

コードが書けないから作れない、エンジニアの手が空かないから進まない。

その言い訳が、AIで消えました。

デザイナーではない人にとっても同じです。

「こういうWebサイトが欲しい」と思った時に、Figmaで画面を描いて、Claude Codeに渡すだけ。

完璧ではなくても「動くもの」なら、1日で作れます。

まずはFigmaの無料プランでアカウントを作って、フレームを1つ描いてみてください。

そしてClaude Codeに「これをWebサイトにして」と渡す。

「探索と反復の8割」がどれだけ変わるか、1回の体験で実感できます。

参考リンク

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は進化が速い分野のため、最新の仕様は公式サイトでご確認ください。