デザイナーとエンジニアの間にあった壁

Web制作に関わったことがある人なら、この痛みを知っているはずだ。

デザイナーがFigmaで美しいデザインを作る。エンジニアがそれをコードに変換する。だが変換の過程で、余白が3px違う、色が微妙に違う、レスポンシブの挙動がデザインの意図と違う——細かいズレが生まれ、修正の往復が3回、5回と続く。

LP1枚のデザイン→コーディングに5日。そのうち2日は「デザイン通りに直す」作業。この構造はWeb制作が存在する限り、ずっと変わらなかった。

2026年、Figmaが2つの機能でこの壁を壊しにかかっている。

Figma Make: プロンプトからプロトタイプへ

Figma Makeは、テキストの説明からUIプロトタイプを生成する機能だ。「BtoB分析ツールの料金ページ、3プランのカード並び」と入力すれば、数秒でレイアウトが出てくる。

ここまでなら、v0やLovableとそう変わらない。Figma Makeの本当の強みはMake Kitsにある。

Make Kitsを設定すると、AIが生成するUIは自社のデザインシステムのコンポーネント、変数、トークンを参照して作られる。つまり、ゼロから汎用的なUIを作るのではなく、「うちのボタンスタイル、うちのフォント、うちのカラーパレット」に準拠したUIが出てくる。

デザイナーがブランドガイドラインを毎回AIに教え直す手間がなくなる。

Figma MCPサーバー: AIエージェントが直接編集

さらに大きな変化がFigma MCPサーバーだ。

MCP（Model Context Protocol）はAnthropicが標準化したAI連携規格で、2026年3月時点で9,700万インストールを突破している。FigmaがこのMCPに公式対応したことで、Claude CodeなどのAIエージェントがFigmaファイルに直接アクセスできるようになった。

具体的には、AIエージェントが:

これまでは「AIにスクリーンショットを見せて、似たようなコードを書かせる」だった。今は「AIがFigmaのデザインデータを直接読んで、デザインシステムに準拠したコードを書く」。精度が根本的に違う。

デザイナーの仕事は変わるのか

答えはイエスだが、「なくなる」ではなく「上流にシフトする」。

Figma Make + MCP によって自動化されるのは、「決まったスタイルでパーツを組み合わせる」作業だ。ボタンの配置、カードの並べ方、レスポンシブの調整——こうした実装寄りの作業はAIが高速でこなせるようになる。

残るのは「何を作るか」の判断だ。ユーザーの課題を理解し、それを解決する体験を設計し、ブランドの世界観を定義する。これはAIに任せられない。

皮肉なことに、AIが実装を担えるようになるほど、「良いデザインとは何か」を判断できるデザイナーの価値が上がる。手を動かす時間が減り、考える時間が増える。

実務でどう使うか

現時点で最も現実的なワークフローはこうだ。

ステップ1: Figma Make でラフなプロトタイプを生成（Make Kitsで自社デザインシステムを適用）

ステップ2: デザイナーが手動で調整・ブラッシュアップ

ステップ3: Figma MCP経由でClaude Codeにデザインデータを渡す

ステップ4: Claude Codeがデザインに忠実なコードを生成

従来の「デザイン2日+コーディング3日=5日」が、「AI初稿30分+デザイナー調整2時間+Claude Codeでコード化2時間=半日」になる。10倍の速度差は、月の案件数を根本的に変える。

ただし注意点がある。Figma Make のAI Credits は有料で、管理者が購入する必要がある（Organization / Enterprise向け。Professionalプランは2026年5月対応予定）。個人利用のハードルはまだ残っている。

出典: Figma Make / Figma Release Notes / NoCode MBA (Figma Make Review)