【FigmaMCP×VSコード】デザインをAIで構築できる！MCPの導入（追加）手順をご紹介

先日FigmaMCPがリリースされ、システム開発におけるゲームチェンジが起きました。FigmaMCPを利用することによって、Figmaのデザインデータの共有リンクをVSコードなどのCopilot（コパイロット）へ貼り付け、簡単なプロンプトを打つだけで開発が完了します。

今までもAPIトークンを利用してターミナルから開発することもできましたが、精度がまだ不十分でした。しかし、今回のアップデートでその精度は格段に上がったためMCPを使っての開発はマストになりそうです。

今後FE（フロントエンドエンジニア）のあり方は変わり、デザイナーと開発者の融合が期待されています。まだ登場したてで知らない方も多い情報なので、いち早く取り入れ、競合との差を広げていきましょう。

当記事ではこのFigmaMCPをVSコードで利用するための、基本的な手順をご紹介します。

Figma側の設定

一時期FigmaMCPの登場で開発モードが不要になるのでは？という意見もありましたが、実際のアップデートでは開発モードで利用するMCPという立ち位置となったため、逆に開発モードの利用がマストとなりました。

設定は簡単で、まずはFImgaファイルを開き開発モード（DevMode）に切り替えます。

モードを切り替えると、右側にある操作パネルのインスペクトセクションに「MCPサーバー」という項目が追加されています。※MCPサーバーは有料版（月3300円〜）の登録者のみ利用できます

このプルダウン項目を「有効」に切り替えてください。

これでFigma側の設定は完了です。

VSコード側の設定

Copilotの有効化

VSコードでFigmaMCPを利用するには、Copilot（コパイロット）が有効化されている必要があります。

コパイロットは今となってはVSコードのインストール時に導入を問われるので、何も意識していなければインストールされているはずです。

導入できていない方は、「拡張機能」から「Copilot」と検索し、インストールしてください。

この状態でFigmaMCPサーバーとの接続設定を行っていきます。

FigmaMCPとの連携

VSコードの設定画面で「MCP」と検索します。

▼設定画面の開き方

▼設定画面

続いて「settings.jsonで編集」をクリックしjsonファイルを開き、以下のコードを入力してFigmaMCPサーバーと接続します。

  "mcp": {
  "servers": {
    "Figma Dev Mode MCP": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }

Ctrl+alt（command+option）+BでCopilotを開き、「Agent（エージェント）」モードに切り替えます。

Copilotのツール画面を開き、検索画面で「MCP」と入力すると「Figma Dev Mode MCP」という項目が追加されているので、チェックをいれます。

これでVSコード側の設定は完了です。

構築方法

あとはCopilotチャットでFIgmaファイルのURLを添付し、「FigmaのデザインファイルからHTML/CSS/JS」で構築してください。」と伝えるだけで、VSコード内にファイルが作成され数分で構築が完了します。

筆者もいろいろ試してみましたが、アニメーションも追加できたりReactでの構築も可能で、従来のクオリティではありませんでした。

今後マストスキルになることは間違いないので、プロンプトやレイヤー構造を極めて生産性を高めていきましょう。

まとめ

今回はMCPの使い方を紹介しましたが、Figmaファイルから直接本番公開できるなど、FIgmaの進化は止まりません。この機能の他にも「FIgmaサイト」「Figma Buzz」等、今までの業務フローを爆速化する昨日がどんどん追加されています。

これからの時代は情報感度の差で企業間の格差は開いていくと予想しています。

取り残されないように新しい技術には積極的に触れていくようにしていきましょう。