Figma MCP Server Guide

This guide walks you through a complete Figma → MCP Server workflow so you can streamline your design-to-code pipeline.

Step 1: Get Your API Token

Figma won’t let MCP fetch designs unless you provide an API key.

1. Open Figma → Settings → Security → Personal Access Tokens
2. Generate a new token
3. Copy it somewhere safe—you’ll need it shortly

Step 2: Run MCP Server

Once you have your token, start the server by running:

npx figma-developer-mcp --figma-api-key=YOUR_FIGMA_API_KEY

Step 3: Connect MCP Server with Cursor

If you're using Cursor for AI-assisted development, add this to your settings:

{
  "mcpServers": {
    "figma-developer-mcp": {
      "type": "sse",
      "url": "http://localhost:3333/sse",
      "env": {
        "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
      }
    }
  }
}

Step 4: Verify the Connection

1. Open Cursor and check if the MCP Server is recognized.
2. If everything is set up correctly, you should see successful API calls when you request a design.

---

Step 5: Install Live Preview Plugin

To see real-time HTML previews, install the Live Preview plugin in VSCode.

1. Open VSCode
2. Go to Extensions
3. Search for Live Preview
4. Install and activate it

Now you can view live updates as you implement your email markup!