Figma MCP Proxy Server

A Model Context Protocol (MCP) server that provides secure access to your Figma designs through Cursor IDE. This server authenticates with Figma using your personal access token and exposes your designs to your development team without requiring individual Figma accounts.

Architecture

Developer Cursor IDEs → Your MCP Server (Cloud) → Figma API (Your Account)

Your developers connect their Cursor IDE to your hosted MCP server
Your MCP server authenticates with Figma using your credentials
All Figma requests go through your server (developers never touch Figma directly)

Features

Resources

figma://files - List all your Figma files
figma://file/{file_id} - Get specific file content (frames, layers, components)
figma://team/{team_id} - List files and projects for a team
figma://project/{project_id} - Project information

Tools

export_asset - Export images from designs (PNG, JPG, SVG, PDF)
get_design_tokens - Extract design tokens (colors, typography, spacing)
search_files - Search across your Figma files by name
get_components - List components from a specific file
get_styles - Get published styles (colors, text styles)

Setup Instructions

1. Get Your Figma Personal Access Token

Log in to your Figma account
Click your profile picture → Settings
Go to Account tab → Personal Access Tokens
Click Generate new token
Give it a name (e.g., "MCP Proxy Server")
Copy the token (you won't see it again!)

2. Deploy the Server

Option A: Deploy to Render with Docker (Recommended)

Fork or push this repository to GitHub
Sign up at render.com
Create a new Web Service
Connect your GitHub repository
Configure:
- Runtime: Docker
- Dockerfile Path: Dockerfile (auto-detected)
- Environment Variables:
  - FIGMA_ACCESS_TOKEN = (your token from step 1)
  - NODE_ENV = production
  - PORT = 10000 (Render sets this automatically)
Deploy!

📖 Detailed steps: See DEPLOYMENT.md for complete walkthrough.

Your server URL will be: https://your-service-name.onrender.com

Option B: Deploy to Railway

Push to GitHub
Sign up at railway.app
Create new project from GitHub repo
Add environment variable: FIGMA_ACCESS_TOKEN
Deploy!

Option C: Deploy to Other Platforms

Any Node.js hosting platform works:

Fly.io: Use fly.toml configuration
AWS ECS/Lambda: Containerize and deploy
DigitalOcean App Platform: Similar to Render
Heroku: Standard Node.js buildpack

3. Configure Cursor IDE (For Each Developer)

Each developer needs to add the MCP server to their Cursor configuration:

Mac

Edit: ~/Library/Application Support/Cursor/mcp.json

Windows

Edit: %APPDATA%\Cursor\mcp.json

Linux

Edit: ~/.config/Cursor/mcp.json

Configuration:

{
  "mcpServers": {
    "figma-proxy": {
      "transport": "sse",
      "url": "https://your-service-name.onrender.com/sse"
    }
  }
}

Replace your-service-name.onrender.com with your actual server URL.

Note: If your server requires authentication, you may need to add headers or use a different transport method.

4. Restart Cursor

After adding the configuration, restart Cursor IDE completely. The MCP server should now be available.

Usage Examples

Once configured, developers can use natural language in Cursor to interact with Figma:

List Files

"Show me all my Figma files"
"List the files in my Figma account"

View File Content

"Show me the design for file [file-id]"
"Get the components from file [file-id]"

Export Assets

"Export the logo from file [file-id] as PNG"
"Get a 2x scale export of node [node-id]"

Get Design Tokens

"Extract design tokens from file [file-id]"
"Show me the colors and typography from [file-id]"

Search Files

"Search for files named 'dashboard'"
"Find all files with 'mobile' in the name"

Local Development

To run the server locally for testing:

# Install dependencies
npm install

# Create .env file
echo "FIGMA_ACCESS_TOKEN=your_token_here" > .env
echo "PORT=3000" >> .env

# Build
npm run build

# Run
npm start

The server will be available at http://localhost:3000/sse

API Endpoints

GET /health - Health check endpoint
GET /sse - SSE endpoint for MCP protocol (used by Cursor)
POST /message - Message endpoint for client-to-server communication

Security Considerations

Token Security: Your Figma token is stored in environment variables only - never commit it to git
HTTPS: Always use HTTPS in production (Render provides this automatically)
Access Control: Currently, anyone with the server URL can access it. For production, consider:
- Adding API key authentication
- IP whitelisting
- User authentication

Rate Limits

Figma API has rate limits:

120 requests per minute
24,000 requests per day

The server implements caching for file lists (5-minute cache) to reduce API calls.

Troubleshooting

Server won't start

Check that FIGMA_ACCESS_TOKEN is set correctly
Verify Node.js version (requires Node 20+)
Check server logs for errors

Cursor can't connect

Verify the server URL is correct
Check that the server is running (/health endpoint)
Ensure Cursor config file syntax is valid JSON
Restart Cursor completely after config changes

No files showing

Verify your Figma token has access to files
Check server logs for API errors
Test the Figma API directly with your token

Project Structure

proxy_mcp_fogma/
├── src/
│   ├── index.ts              # Main server with HTTP/SSE transport
│   ├── figma-client.ts       # Figma API wrapper
│   ├── types.ts              # TypeScript types
│   ├── handlers/
│   │   ├── resources.ts      # Resource handlers
│   │   └── tools.ts          # Tool handlers
│   └── transport/
│       └── sse-transport.ts  # SSE transport implementation
├── package.json
├── tsconfig.json
├── render.yaml              # Render deployment config
└── README.md

License

MIT

Support

For issues or questions:

Check the troubleshooting section
Review server logs
Test Figma API access directly
Verify Cursor MCP configuration