How to Configure VS Code with the Figma MCP Server: A Complete Setup Guide

To configure VS Code with the Figma MCP server, open the command palette, run MCP:Add Server, select HTTP transport, enter the endpoint https://mcp.figma.com/mcp, and set the server ID to figma.

The Figma MCP (Model Context Protocol) server enables VS Code agents to retrieve design data directly from Figma files, bridging the gap between design and development workflows. According to the figma/mcp-server-guide repository, this integration allows GitHub Copilot to access variables, components, and layout information from your Figma projects using standard HTTP-based MCP endpoints. This guide walks you through the exact configuration steps required to connect VS Code to the Figma MCP server.

Prerequisites

Before configuring the integration, ensure you have an active GitHub Copilot subscription. As noted in the repository's README.md (lines 66-69), the VS Code MCP integration requires Copilot access to function. Without an active subscription, the Agent mode and MCP server features will not be available in your editor.

Configuration Steps

1. Register the HTTP endpoint. Open the VS Code command palette using ⌘ Shift P (macOS) or Ctrl Shift P (Windows/Linux) and execute MCP:Add Server. Select HTTP as the transport type and enter the URL https://mcp.figma.com/mcp. When prompted for the server ID, type figma. This process writes the configuration to your workspace or global mcp.json file using the schema defined in the repository's .mcp.json example and detailed in README.md (lines 44-63):

   {
     "servers": {
       "figma": {
         "type": "http",
         "url": "https://mcp.figma.com/mcp"
       }
     }
   }

2. Enable Agent mode in Copilot Chat. Open the chat toolbar with ⌥⌘B (macOS) or ⌃⌘I (Windows/Linux) and switch the mode to Agent. This allows the AI to invoke MCP server tools during your coding sessions.

3. Test the integration. Enter #get_design_context in the chat input. If the server is correctly configured, the response will list available Figma tools such as get_design_context and list_components, indicating that VS Code is successfully communicating with the Figma MCP server. If no tools appear, restart VS Code to reload the configuration.

Key Configuration Files

The figma/mcp-server-guide repository provides reference files that document the setup:

• .mcp.json: Located in the repository root, this file contains the exact JSON schema used for the HTTP server configuration, showing the type and url parameters required by VS Code.
• README.md (lines 44-63): Contains the step-by-step instructions for adding the server and the expected configuration output.
• server.json: Documents the server's available tools and rate-limit information, though this file is not required for the VS Code setup to function.

Summary

• GitHub Copilot subscription required: The integration depends on VS Code's Agent mode, which requires an active Copilot plan as stated in README.md (lines 66-69).
• HTTP endpoint configuration: Use https://mcp.figma.com/mcp with server ID figma when adding the server via the command palette.
• Configuration storage: VS Code writes settings to mcp.json following the schema shown in the repository's .mcp.json file.
• Verification method: Test the connection by typing #get_design_context in Copilot Chat to confirm Figma tools are available.

Frequently Asked Questions

What transport type should I select when adding the Figma MCP server?

Select HTTP as the transport type. The Figma MCP server operates over standard HTTP connections rather than stdio, connecting to the specific endpoint at https://mcp.figma.com/mcp as implemented in the figma/mcp-server-guide repository.

Where does VS Code store the MCP server configuration?

VS Code creates or updates an mcp.json file, either in your workspace directory or in your global VS Code settings. The figma/mcp-server-guide repository includes an example configuration in .mcp.json demonstrating the required JSON structure with the type set to http and the url pointing to the Figma endpoint.

Is a GitHub Copilot subscription mandatory for this integration?

Yes. According to the README.md (lines 66-69) in the figma/mcp-server-guide repository, the VS Code MCP integration specifically requires an active GitHub Copilot subscription. The Agent mode functionality that enables MCP server communication is a Copilot-exclusive feature.

How can I verify that the Figma MCP server is working correctly?

Open the Copilot chat in Agent mode and type #get_design_context. If the server is properly configured, the chat will display available Figma tools like get_design_context and list_components. If these tools do not appear, check your mcp.json configuration for typos in the URL or server ID, then restart VS Code.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}