Figma2Frida MCP Enterprise Server

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

🎯 What Is Figma2Frida?

Figma2Frida MCP Enterprise 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. analyze_design - Get design context and generated code from Figma (main tool)
2. analyze_frame - Screenshot of current Figma selection for visual reference and UI analysis
3. analyze_frame_extraction - Screenshot + metadata + design context; then call get_components_from_library
4. get_components_from_library - Search your design system (Pinecone + Frida AI) by query

🔄 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-enterprise

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-enterprise",
        "--session-token",
        "YOUR_SESSION_TOKEN"
      ]
    }
  }
}

Cursor (similar configuration in settings):

{
  "mcpServers": {
    "figma2frida": {
      "command": "npx",
      "args": [
        "@fridaplatform-stk/figma2frida-mcp-enterprise",
        "--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

analyze_frame_extraction times out (no output) → Set MCP server timeout to 120 or 180 seconds in your IDE MCP config (FRIDA default is 60s). → Or call get_components_from_library with a short UI description before generating code.

Optional tuning (environment variables on the MCP process)

| Variable | Default | Purpose | |----------|---------|---------| | FIGMA2FRIDA_MAX_OUTPUT_COMPONENTS | 15 | Final cap on components shown to the agent (after search + lexical); does not change Hub queries | | FIGMA2FRIDA_MAX_MERGED_RESULTS | 15 | Internal merge cap across multi-query batches | | FIGMA2FRIDA_MAX_NARROW_QUERIES | 4 | Cap per-component Hub searches on frame flow | | FIGMA2FRIDA_USE_FRIDA_FILTER_ON_FRAME | off | Set true to run Frida LLM filter after frame search (slower) | | FIGMA2FRIDA_SKIP_FRIDA_FILTER | true on frame | Set false to run Frida filter when not using frame defaults | | FIGMA2FRIDA_FRAME_TOP_K | 18 | Broad frame search topK |

🤝 Support

• Softtek Frida Team: Contact for access tokens and support

📄 License

Proprietary — Copyright © Frida Platform, Softtek. All rights reserved. See LICENSE.

👥 Author

Frida Platform, Softtek

Made with ❤️ by the Frida team