Figma、Claude連携でデザインとコードを融合
2026年2月20日 (金)
- •Figmaがモデル・コンテキスト・プロトコル(MCP)を採用し、Claude Codeとの双方向連携を開始。
- •ブラウザ上のレンダリングコードを、編集可能なFigmaのデザインレイヤーへ直接変換可能に。
- •コードとキャンバス間の同期により、デザイナーと開発者のシームレスな協調を実現。
Figmaは、Claude Codeとの新たな統合により、開発とデザインの境界を再定義しようとしている。AIエージェントと外部ソフトウェアの対話を標準化するモデル・コンテキスト・プロトコル(MCP)を活用することで、開発者はコードとキャンバスの間を自由に行き来できるようになった。AIが瞬時にコードを生成できる時代だからこそ、多様なアイデアを並べて比較検討するには視覚的なキャンバスが依然として最適な環境であるという、重要な事実に基づいたアプローチだ。
このワークフローは驚くほど直感的である。Anthropicのコーディングアシスタントを利用する開発者は、コマンド一つでブラウザの表示状態を、編集可能なFigmaレイヤーへと変換できる。これにより、プロトタイプからデザインファイルへ戻る際の手作業による再現という、退屈な工程が不要になった。さらに、この統合は双方向であり、キャンバス上で行われたデザインの微調整をコードベースに即座に反映させ、常に同期を保つことが可能だ。
FigmaのCEOを務めるディラン・フィールド(Dylan Field)は、AIによって制作の技術的ハードルが下がるほど、人間の感性や職人技が最大の差別化要因になると指摘する。「デザイン主導のコード生成」を促進することで、開発者が最初に提示されたAIの生成案に固執してしまう「トンネル視界」を打破するのが狙いだ。この進化は、ターミナルへのプロンプトから始まり、洗練されたインターフェースとして完成する、流動的な製品づくりのエコシステムへの転換を意味している。