Tools  

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.
    MCP Server

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.
    Generate token

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.
    Start button

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.
    Copilot's instructions

Step 8. Preview the Web Page.

  • Open the generated index.html file in a browser.
  • Verify that the design matches the Figma project.
    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.

Membership not found