figma-to-ide

Convert Figma design files into Claude-compatible Model Context Protocol (MCP) for use in IDEs, AI code assistants like Copilot, Cursor, or static generators.

🔧 Built by Mehmet ALP, Founder of Codigma.io & Rast Mobile

✨ Features

• Accepts full Figma design URLs (e.g. https://www.figma.com/design/...)
• Automatically normalizes and extracts the correct file ID
• Generates MCP (Model Context Protocol) structure from Figma design data
• CLI support to visualize component structure
• Supports multiple pages, nested frames, and components
• Saves result as JSON or displays in terminal

📦 Installation

npm install -g figma-to-ide

Or install locally in your project:

npm install figma-to-ide

🚀 CLI Usage

figma-to-ide --key YOUR_FIGMA_API_KEY --file "https://www.figma.com/design/FILE_ID/Project-Name" --visualize

Optional Flags

| Flag | Description | |----------------|------------------------------------------------------------| | --key, -k | Your Figma personal access token | | --file, -f | Full Figma file URL or just the file ID | | --visualize, -v | Show component/page hierarchy as a tree in the terminal | | --output, -o | Save the result to a file as output.json |

🔁 Example

figma-to-ide -k figd_ABC123... -f "https://www.figma.com/design/uek5kq.../Project" -v -o mcp.json

🧠 What is MCP?

MCP (Model Context Protocol) is a structured JSON format that allows AI coding assistants to understand the layout and design structure of a frontend project.

Each component has:

{
  "type": "component",
  "name": "Header",
  "description": "Generated from Figma",
  "children": ["Logo", "NavBar"],
  "props": {},
  "source": "Figma",
  "filePath": "/Home/Header.tsx",
  "parent": null
}

📄 Output Sample

{
  "type": "project",
  "source": "Figma",
  "name": "Design System",
  "pages": [
    {
      "name": "Home",
      "components": [
        {
          "name": "Header",
          "type": "FRAME",
          "children": ["Logo", "Nav"]
        }
      ]
    }
  ],
  "meta": {
    "lastModified": "2025-03-29T10:00:00Z"
  }
}

🌍 Project Links

• 🔗 GitHub: github.com/rastmob/figma-to-ide
• 🌐 Website: https://codigma.io
• 🧑‍💻 Author: Mehmet ALP
• 🐦 Twitter: @mhmtakifalp
• 💼 Company: Rast Mobile

📄 License

MIT © Mehmet ALP – [email protected]