Figma MCP × GitHub Copilot でデザイン→コードの自動化を試してみた - TECHSCORE BLOG

はじめに デザインとコードのギャップは、フロントエンド開発でよく直面する課題です。 Figmaで意図どおりのデザインを作っても、実装では「パディングが微妙に違う」「フォントサイズが合わない」「色や余白のルールをどうコードに反映するかわからない」といったズレが起きがちです。 そこで注目したいのが、Figma MCP（Model Context Protocol）サーバーと GitHub Copilot の連携です。FigmaのデザインデータをAIが参照し、デザイン→コード変換を支援します。 本記事では、セットアップから簡単な React コンポーネント生成までの流れを紹介します。 はじめに この記事で扱う環境 Figma MCP サーバーとは セットアップ手順 Step1 : Figma デスクトップMCPサーバーを有効化する Step 2：VS Code に MCP サーバーを追加する S