Figma-Context

This MCP server provides a Framelink implementation that fetches and translates Figma design data into a concise, model-friendly context for your coding agent (e.g., Cursor). It exposes Figma metadata such as frames, components, and styling information in a streamlined format, making it easier for your AI agent to interpret layouts and styles when generating code. To use it, configure the server in your MCP client configuration with your Figma API token and optional port, then run the server. Connect your editor or agent (like Cursor) to the MCP server, paste a Figma file/frame/link, and ask the agent to implement the design. The server will return a compact, structured context that emphasizes layout, typography, colors, and component relationships rather than raw API data.

The workflow typically involves: adding a Figma file link to your chat or agent command, triggering an implementation request, and receiving code scaffolds or components that mirror the design. This server is tailored for Cursor but can be used with any MCP-compatible client that consumes the provided context. Ensure you provide your Figma API key so the MCP can fetch necessary metadata from Figma and then translate it for the model to use effectively.

Prerequisites:

• Node.js and npm installed on your system
• Internet access to fetch the MCP server
• A Figma personal access token (for API access)

Step-by-step installation:

1. Verify Node.js and npm are installed:

   • node -v
   • npm -v

2. Install or run the Framelink Figma MCP via npx (no global install required):

   • npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

3. If you want to use a local configuration file, create a config.json with the example below and adjust the API key and port as needed: { "mcpServers": { "Framelink MCP for Figma": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } }

4. Alternative: set environment variables instead of passing the API key on the command line:

   • FIGMA_API_KEY=YOUR-KEY
   • PORT=3000 Then run the MCP as per your client configuration.

Notes:

• Replace YOUR-KEY with your actual Figma API token.
• If you run behind a proxy or firewall, ensure the necessary ports are open for the MCP server to communicate.

Tips and common issues:

• Ensure you provide a valid FIGMA_API_KEY; without it, the server cannot fetch Figma data.
• If you encounter port conflicts, specify PORT in env or configuration to an unused value.
• The mcp_config example uses npx for on-demand execution; you can adapt to cmd (Windows) if needed, or run via your MCP client.
• For best results, restrict the Figma file links to the necessary frames or groups to reduce context size.
• If the server returns empty context, verify the Figma file permissions and token scopes.
• The npm package name to reference is figma-developer-mcp; you can also check for updates or documentation at the Framelink site.