# How to Configure VS Code with the Figma MCP Server: A Complete Setup Guide > Easily configure VS Code with the Figma MCP server. Follow this guide to connect and boost your workflow. Learn how to set up HTTP transport and server details. - Repository: [Figma/mcp-server-guide](https://github.com/figma/mcp-server-guide) - Tags: how-to-guide - Published: 2026-03-30 --- **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`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/mcp.json) file using the schema defined in the repository's [`.mcp.json`](https://github.com/figma/mcp-server-guide/blob/main/.mcp.json) example and detailed in [`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md) (lines 44-63): ```json { "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`](https://github.com/figma/mcp-server-guide/blob/main/.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`](https://github.com/figma/mcp-server-guide/blob/main/README.md)** (lines 44-63): Contains the step-by-step instructions for adding the server and the expected configuration output. - **[`server.json`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/mcp.json) following the schema shown in the repository's [`.mcp.json`](https://github.com/figma/mcp-server-guide/blob/main/.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`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/.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`](https://github.com/figma/mcp-server-guide/blob/main/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`](https://github.com/figma/mcp-server-guide/blob/main/mcp.json) configuration for typos in the URL or server ID, then restart VS Code.