Codigma MCP Server

by rastmob

128 downloads Not rated yet

About

# Codigma MCP Server Welcome to the **Codigma MCP Server** repository! **Codigma MCP Server** is the backend service behind [Codigma.io](https://codigma.io) — a free tool that helps you easily turn any public Figma link into clean, semantic HTML and CSS. You just paste your Figma link, and Codigma.io does the rest!…

Explore

- Fetch public Figma file JSON data
- Convert Figma nodes into structured Codigma Models
- Generate clean, semantic HTML and CSS code
- Optionally generate TailwindCSS class-based HTML
- Support for responsive design, fonts, borders, shadows, and gradients
- Full pipeline from Figma URL to code bundle in one API call

Clone the repository, install dependencies with npm install, create a .env file with your Figma Personal Access Token, then run in development mode (npm run dev) or production mode (npm run build && npm start). Send POST requests to endpoints like /api/figma-to-bundle with a Figma URL and output type (plain or tailwind).

Welcome to the Codigma MCP Server repository!

Codigma MCP Server is the backend service behind Codigma.io — a free tool that helps you easily turn any public Figma link into clean, semantic HTML and CSS.

You just paste your Figma link, and Codigma.io does the rest!

---

🔄 What You Can Do

- Fetch Figma public file data.
- Convert Figma designs into structured Codigma Models.
- Generate clean, semantic HTML and CSS code.
- Optionally generate TailwindCSS class-based HTML.
- Support for responsive design, fonts, borders, shadows, and gradients.

---

📚 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

---

🌐 Main API Endpoints

| Endpoint | Method | Description |
|:---|:---|:---|
| /api/fetch-figma-data | POST | Fetch public Figma file JSON data. |
| /api/map-figma-node | POST | Convert Figma Node to Codigma Model. |
| /api/generate-html | POST | Create HTML from Codigma Model. |
| /api/generate-css | POST | Create CSS from Codigma Model. |
| /api/generate-bundle | POST | Create full bundle (HTML + CSS). |
| /api/figma-to-bundle | POST | Full process from Figma URL to code output (supports TailwindCSS too). |

---

📅 Example

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:
- Codigma Model (structured)
- HTML + CSS bundle (or TailwindCSS HTML)

---

🔧 Technology

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

---

📊 Roadmap

- ✅ Fetch public Figma files
- ✅ TailwindCSS output option
- ✅ Font, border, shadow support
- ⬆️ Better responsive support
- ⬆️ OAuth login for private files
- ⬆️ Snapshot and versioning features
- ⬆️ Admin Dashboard

---

👤 About the Author

Mehmet Alp
Founder of Rast Mobile

- GitHub: @rastmob
- Email: [email protected]

---

📄 License

Licensed under the ISC License.

---

📈 Contributing

We welcome pull requests!

> Fork the repo → Create a branch → Commit your changes → Open a pull request → Done! 📚

---

🐝 Reporting Bugs

Found a bug? Please open an issue here.

Thanks for using Codigma MCP Server!
And don't forget to try Codigma.io for FREE!

No reviews yet — be the first

Sign in to leave a review

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.