Dev.to

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. Open Figma → Settings → Security → Personal Access Tokens Generate a new token 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 Open Cursor and check if the MCP Server is recognized. 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. Open VSCode Go to Extensions Search for Live Preview Install and activate it Now you can view live updates as you implement your email markup!

Mar 21, 2025 - 17:29

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.

Open Figma → Settings → Security → Personal Access Tokens
Generate a new token
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

Open Cursor and check if the MCP Server is recognized.
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.

Open VSCode
Go to Extensions
Search for Live Preview
Install and activate it

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