Setting Up Figma MCP Server with GitHub Copilot

Step 1. Create a Project Folder.

Open an empty folder in VS Code.
Inside the folder, create a .vscode directory.
Inside .vscode, create a file named mcp.json.

Step 2. Get Your Figma API Key.

Open Figma and log in to your account.
Go to Account Settings.
Scroll down to the Personal Access Tokens section.
Click Generate a new token.
Set API Scopes: In Scopes, under File Content, select Read-Only.
Click Generate Token and copy the generated API Key (e.g., figd_kK5osQweh_32vwJcjasdKiXQChnK4JaGdpGGzxc-).
Store it securely, as you’ll need it in the next step.

Step 3. Configure MCP Server.

Open mcp.json and paste the following configuration.

{
  "servers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "YOUR-FIGMA-API-KEY"
      }
    }
  }
}

Replace "YOUR-FIGMA-API-KEY" with the key you copied in Step 2.
Save the file.

Step 4. Start MCP Server Locally.

Click the Start button in VS Code to launch the MCP server.
Ensure the server is running and listening for requests.

Step 5. Get the Figma Project URL.

Open Figma.
Navigate to the project you want to use.
Copy the Figma project URL.

Step 6. Use GitHub Copilot in Agent Mode.

Open GitHub Copilot in Agent Mode.
Click Select Tools in the command bar.
You should see a list of MCP servers, including Figma MCP Server tools.

Step 7. Generate a Web Page from Figma Design.

Provide the following input to Copilot.

Design an HTML, CSS-based web page based on the design at <Figma project URL>.

Download required images into the images folder.

Follow Copilot's instructions.
Click the Keep button to save the generated files.

Step 8. Preview the Web Page.

Open the generated index.html file in a browser.
Verify that the design matches the Figma project.

Additional Tips

If the MCP server doesn’t start, try running.

npx figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

Ensure your Figma API Key is valid.
If images don’t download, manually check the images folder.

This setup allows GitHub Copilot to fetch design elements from Figma and generate a structured web page automatically.

Note. Other Coding Assistants such as Cline, CursorAI, Windsurf, and Qodo use the same configuration.