Figma MCP Proxy Server

Provides secure access to Figma assets through an MCP server, authenticating with your token and routing requests for files, teams, projects, and styles.

typescript

0

GitHub Stars

typescript

Language

5 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

This MCP server provides secure, centralized access to your Figma designs through Cursor IDE. It authenticates with Figma using your personal access token and exposes your designs to your team without requiring individual Figma accounts, while routing all requests through your server for controlled access and auditing.

How to use

You connect Cursor IDE to your hosted MCP server to access your Figma content. Your developers can list files, view file content, export assets, extract design tokens, and search across files using natural language or explicit commands. All requests pass through your MCP server, ensuring that your Figma credentials remain on your side and your team interacts with Figma data via the proxy.

How to install

Prerequisites: Node.js (version 20 or newer) and npm installed on your machine.

Install dependencies for the proxy server locally.
Create a .env file with your Figma access token and the desired port.

Configuration and MCP connections

Configure your MCP connections to the Figma proxy server. You can connect via HTTP for a remote server or use a local stdio configuration to run the server directly on your machine.

Security and access control

Protect your Figma token by keeping it in environment variables only and enabling HTTPS in production. Consider implementing API keys, IP whitelisting, or user authentication for production use.

Local development

To run and test the server locally, follow these steps.

Troubleshooting

If the server won’t start or Cursor can’t connect, verify the token configuration, ensure Node.js is up to date, and check the server logs for errors.

Available tools

export_asset

Export images from designs in various formats such as PNG, JPG, SVG, and PDF.

get_design_tokens

Extract design tokens including colors, typography, and spacing from designs.

search_files

Search across Figma files by name or keywords.

get_components

List components from a specific file to reuse in development.

get_styles

Retrieve published styles like colors and text styles.