About Codigma MCP Server
Codigma MCP Server is the backend for Codigma.io, converting public Figma files into structured models and HTML/CSS for developers turning designs into code. It can also produce TailwindCSS-based HTML.
Key features
- 01Fetch public Figma file data
- 02Map nodes to Codigma Models
- 03Generate semantic HTML and CSS
- 04Optionally generate TailwindCSS HTML
- 05Support fonts, borders, shadows, and gradients
Use cases
- 01Convert public Figma designs into HTML and CSS
- 02Generate TailwindCSS markup from Figma files
MCP support
The project is an MCP server that provides design mapping and code generation based on public Figma file data.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.
Tools
Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.
Details
From the project READMECodigma 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
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!
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.