codigma-mcp-server

codigma-mcp-server

1
developer_toolsfile_systemscloud_platforms

Codigma MCP Server is a backend service to convert Figma links into semantic HTML and CSS, with support for TailwindCSS and responsive designs. It powers Codigma.io, providing developers with an easy way to translate designs into code.

Codigma MCP Server

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

EndpointMethodDescription
/api/fetch-figma-dataPOSTFetch public Figma file JSON data.
/api/map-figma-nodePOSTConvert Figma Node to Codigma Model.
/api/generate-htmlPOSTCreate HTML from Codigma Model.
/api/generate-cssPOSTCreate CSS from Codigma Model.
/api/generate-bundlePOSTCreate full bundle (HTML + CSS).
/api/figma-to-bundlePOSTFull 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

📄 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!