Figma Context MCP Server

Overview

Figma Context MCP allows AI coding assistants to access and understand your Figma designs, enabling them to generate accurate code implementations directly from your design files. This tool bridges the gap between design and development workflows, making it possible to implement UI components with greater speed and accuracy.

Installation

Prerequisites

• Node.js (v18 or higher recommended)
• A Figma account with access to the design files you want to implement
• A Figma Personal Access Token

Setup Instructions

1. Install the package globally:

npm install -g figma-developer-mcp
# or
pnpm add -g figma-developer-mcp
# or
yarn global add figma-developer-mcp

2. Create a Figma Personal Access Token:

   • Go to your Figma account settings
   • Navigate to the "Personal Access Tokens" section
   • Create a new token and copy it

3. Set up your environment:

   • Create a .env file in your project directory
   • Add your Figma token: FIGMA_TOKEN=your_personal_access_token

Configuration

To connect your AI coding tool with the Figma Context MCP, add the following configuration to your AI tool's settings:

For Cursor:

1. Open Settings
2. Navigate to the "Model Context Protocol" section
3. Add a new MCP server with the following configuration:

{
  "mcpServers": {
    "figma-context": {
      "command": "figma-mcp",
      "args": []
    }
  }
}

For other AI coding tools that support MCP, add similar configuration according to their documentation.

Usage

1. Start a new coding session in your AI tool (e.g., Cursor)

2. To fetch Figma design information, use the following command format in your prompt:

/figma fetch [Figma file URL or file key]

For example:

/figma fetch https://www.figma.com/file/abcdef123456/MyDesign

3. You can also specify a particular node within the Figma file:

/figma fetch [Figma file URL or file key] [node ID]

4. Once the design information is loaded, you can ask your AI assistant to implement the design in your preferred framework:

Please implement this Figma design as a React component using Tailwind CSS.

Advanced Features

• Dev Mode: Enable detailed logging by setting DEV_MODE=true in your .env file
• Custom Output Format: The MCP server uses YAML for token efficiency by default
• Node Selection: You can target specific components or frames by their node IDs

Troubleshooting

• If you encounter authentication errors, verify your Figma token is correct and has access to the requested file
• For "File not found" errors, ensure the file URL or key is correct and the file is accessible to your account
• Check the logs for detailed error information when running in dev mode

Additional Resources

• Visit framelink.ai for more information and updates
• For detailed documentation, refer to the docs directory