Codigma MCP Server

🚀 Codigma MCP Server

Codigma MCP Server is the core of the backend service of Codigma.io, a free tool that effortlessly converts any public Figma link into clean, semantic HTML and CSS. All you need to do is paste your Figma link, and Codigma.io will handle the rest!

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/rastmob/codigma-mcp-server.git
cd codigma-mcp-server

2. Install Dependencies

npm install

3. Add Figma API Token

Create a .env file:

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token_here

How to get a Figma Token?

4. Run the Server

Development Mode

npm run dev

Production Mode

npm run build
npm start

✨ Features

• Retrieve data from public Figma files.
• Transform Figma designs into a structured Codigma model.
• Generate clean, semantic HTML and CSS code.
• Optionally generate TailwindCSS-based HTML.
• Support responsive design, fonts, borders, shadows, and gradients.

💻 Usage Examples

POST /api/figma-to-bundle

Request Body:

{
  "figmaUrl": "https://www.figma.com/file/abcd1234/Design-System?node-id=123%3A456",
  "outputType": "plain" // or "tailwind"
}

Response:

• A structured Codigma model.
• A code bundle of HTML + CSS (or TailwindCSS HTML).

📚 Documentation

🌐 Main API Endpoints

🔧 Technical Details

• Node.js 18+
• Express 5
• TypeScript
• Axios
• Jest (for testing)
• ESLint (for code quality)

📊 Roadmap

• ✅ Retrieve public Figma files.
• ✅ Support TailwindCSS output option.
• ✅ Support for fonts, borders, and shadows.
• ⬆️ Better support for responsive design.
• ⬆️ Support OAuth login for private files.
• ⬆️ Snapshot and version control features.
• ⬆️ Admin console.

👤 Author Information

Mehmet Alp
Founder of Codigma.io

• GitHub: @rastmob
• Email: mehmet.alp@rastmobile.com

📄 License

Distributed under the ISC License.

📈 Contribution Guidelines

We welcome all contributions!

Fork the repository -> Submit changes -> Create a pull request

Your contributions will help the project grow.