はじめに 業務でWebサイトリニューアルをやっています。 テキスト量の多い静的ページを、Figmaデザインからモック(HTML/CSS)→ Laravel組み込み(3言語対応)まで実装する作業がありました。 最初は手作業で1ページ8時間かかっていました。 Figma MCP + Claude Codeを導入したら、1ページ20分になりました。 この記事はその経験の所感です。 前提:必要なもの この方法を実現するには以下が必要です: Figma 有料プラン(Dev Modeが使えるプラン) Figma MCP は Dev Mode 経由でデザインデータにアクセスするため、開発者モードが有効なプランが必須 Figma側でAuto Layoutがきちんと活用されていること Figma MCPが返すレイアウト情報(gap, padding, flex direction等)はAuto Layout

