Figma2Frida MCP Server

AI-powered bridge between Figma designs and your organization's design system components

🎯 What Is Figma2Frida?

Figma2Frida MCP Server is a bridge that connects your AI coding assistant (Claude, Cursor, GitHub Copilot) with Figma designs and your organization's design system. It enables you to:

• Generate production-ready code directly from Figma designs
• Automatically use components from your design system library
• Match components intelligently using AI-powered semantic search
• Preserve exact layouts - spacing, alignment, and visual hierarchy from Figma
• Get component documentation - props, types, and usage examples included

Available Tools

Your AI assistant gets four specialized tools:

1. figma_get_design_context - Generate code from Figma with automatic component matching (main tool)
2. figma_suggest_components - Browse and discover design system components
3. figma_get_screenshot - Quick visual reference from Figma
4. figma_improve_layout - Fine-tune generated code to match Figma exactly

🔄 How It Works

1. Select design in Figma
   ↓
2. Ask your AI: "Generate code for this design"
   ↓
3. MCP fetches design → Searches your component library → Uses Frida AI
   ↓
4. Get production-ready code with your design system components

Behind the scenes:

• Connects to Figma Desktop (local MCP server)
• Searches your component library in Pinecone
• Uses Frida AI for intelligent component matching
• Validates your session token via Firebase

📦 Installation

Step 1: Install the Package

npm install -g @fridaplatform-stk/figma2frida-mcp

Step 2: Configure Your AI Assistant

Add to your configuration file:

Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "figma2frida": {
      "command": "npx",
      "args": [
        "@fridaplatform-stk/figma2frida-mcp",
        "--session-token",
        "YOUR_SESSION_TOKEN"
      ]
    }
  }
}

Cursor (similar configuration in settings):

{
  "mcpServers": {
    "figma2frida": {
      "command": "npx",
      "args": [
        "@fridaplatform-stk/figma2frida-mcp",
        "--session-token",
        "YOUR_SESSION_TOKEN"
      ]
    }
  }
}

Step 3: Restart Your AI Assistant

Restart Claude Desktop, Cursor, or your IDE to load the MCP server.

🔑 Getting Session Tokens

To use Figma2Frida, you need:

• Session token - Temporary authentication token used by the MCP server

How to Get a Session Token

Use the Frida Code Copilot extension to create/select a project and connect. The extension creates a session automatically and writes MCP settings for you.

For external agents (Cursor/Claude/Windsurf), copy the generated config from:

~/Library/Application Support/Code/User/globalStorage/fridaplatform.fridagpt/fridagpt_mcp_settings.json

💡 Recommended: Frida Code Copilot Extension

For the best experience, also install the Frida Code Copilot VS Code Extension:

• Automatically manages your projects and components
• Visual component browser in VS Code
• Real-time component library updates
• Works seamlessly with this MCP server

📋 Prerequisites

• Node.js 18+
• Figma Desktop with MCP enabled
• Valid session token (generated by Frida Code Copilot extension)

🚀 Example Usage

Once configured, simply ask your AI assistant:

"Generate React code for this Figma button component"

"What card components are available in my design system?"

"Update this code to match the Figma spacing exactly"

The AI will automatically use the Figma2Frida tools to help you.

🐛 Troubleshooting

"Authentication failed" → Verify your --session-token is valid and not expired

"Not connected to Figma MCP" → Make sure Figma Desktop is running with MCP enabled

"Missing required argument" → Check --session-token is present in your config

"Rate limit exceeded" → Wait a few minutes before trying again

🤝 Support

• Softtek Frida Team: Contact for access tokens and support

📄 License

MIT License

👥 Author

Frida Platform STK - Softtek

Made with ❤️ by the Frida team