What is Figma To Ide

figma-to-ide is a tool that converts Figma design files into Claude-compatible Model Context Protocol (MCP) format, enabling integration with IDEs and AI code assistants like Copilot and Cursor.

Use cases

Use cases include converting design files for web applications, generating component structures for React or Vue projects, and facilitating collaboration between designers and developers by streamlining the design-to-code process.

How to use

To use figma-to-ide, install it via npm with ‘npm install -g figma-to-ide’ for global access or ‘npm install figma-to-ide’ for local installation. Then, run the command ‘figma-to-ide --key YOUR_FIGMA_API_KEY --file “https://www.figma.com/design/FILE_ID/Project-Name” --visualize’ to convert your Figma design.

Key features

Key features include accepting full Figma design URLs, normalizing and extracting file IDs, generating MCP structures, CLI support for visualizing component hierarchies, and saving results as JSON.

Where to use

figma-to-ide is primarily used in software development environments where Figma designs need to be converted into code structures for frontend projects, especially when using AI coding assistants.

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

🔁 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]