Figma to Code AI Coding Tools
Tools that automatically convert Figma designs into production-ready code (React, React Native, HTML/CSS, etc.) using AI/AST transformations. Does NOT include general design-to-code engines, design token converters alone, or Figma plugins for non-code outputs.
There are 30 figma to code tools tracked. 1 score above 70 (verified tier). The highest-rated is rgerum/pylustrator at 70/100 with 891 stars and 399 monthly downloads. 1 of the top 10 are actively maintained.
Get all 30 projects as JSON
curl "https://pt-edge.onrender.com/api/v1/datasets/quality?domain=ai-coding&subcategory=figma-to-code&limit=20"
Open to everyone — 100 requests/day, no key needed. Get a free key for 1,000/day.
| # | Tool | Score | Tier |
|---|---|---|---|
| 1 |
rgerum/pylustrator
Visualisations of data are at the core of every publication of scientific... |
|
Verified |
| 2 |
mostafasadeghi97/design2code
Convert any web design screenshot to clean HTML/CSS code |
|
Established |
| 3 |
Benitmulindwa/FigmaFlet
Generate Flet UI from Figma designs |
|
Emerging |
| 4 |
gridaco/code
Design to Code Engine |
|
Emerging |
| 5 |
MrXujiang/H5-Stream
基于自然流布局的H5-dooring可视化拖拽搭建平台设计方案 |
|
Emerging |
| 6 |
Souravdey777/flexbox-guide
⚡ A Guide for the concept of Flexbox and responsive design. Simply set the... |
|
Emerging |
| 7 |
ignacio-nacho-barbano/typescale-garden
Monorepo for all of typescale-garden pieces, a project meant to aid... |
|
Emerging |
| 8 |
MulongXie/UI2CODE
A tidied repo for UI2CODE, a reverse engineering system convert UI design to... |
|
Emerging |
| 9 |
vincegx/Figma-to-Code_MCP
Figma-to-Code converter powered by Model Context Protocol. Features: 11 AST... |
|
Emerging |
| 10 |
Codetoadeath/CodeForAll
Looking for Contribution to Open source, here's your first repo for... |
|
Emerging |
| 11 |
albertzhangz10/figma-design-system-to-design-md
Figma to design.md — Convert Figma design tokens into structured design.md... |
|
Experimental |
| 12 |
Mordekai66/design2apps
This project automates the conversion of Figma designs into code, supporting... |
|
Experimental |
| 13 |
Ananya-0306/Devlover
OpenOpen source web project, especially for beginners who wants to learn Web... |
|
Experimental |
| 14 |
lequangios/SvgToCode
SVGToCode is an OS X software. It will help you generate the readable source... |
|
Experimental |
| 15 |
Live4Code/Sketch2App
Sketch Plugins for Instant App Generation |
|
Experimental |
| 16 |
designready-ai/designready-ai
Score Figma designs for AI-readiness, fix issues, and generate code... |
|
Experimental |
| 17 |
SparkScratch-P/CSS-Animation-Buttons
An Awesome collection of buttons with impressive animations written in CSS;... |
|
Experimental |
| 18 |
rohitkushwaha462/spec
📄 Define Token-Oriented Object Notation (TOON), a compact encoding for JSON... |
|
Experimental |
| 19 |
itsklimov/figma-rn
MCP server that generates production-ready React Native code from Figma... |
|
Experimental |
| 20 |
sumit7577/Figma-Forge
Autonomous AI Agent that converts Figma designs into production-ready React,... |
|
Experimental |
| 21 |
cypsh1/figma-layout-guard
Verifiable Figma-to-code workflow with raw API semantics, CSS translation,... |
|
Experimental |
| 22 |
Tomdieu/FigmaToReact
FigmaToReact : Convert Figma designs to React apps automatically using MDA... |
|
Experimental |
| 23 |
webmaxru/figma-to-webpage-github-copilot-mcp
Demo of using GitHub Copilot Agent Mode in combination with the Figma Model... |
|
Experimental |
| 24 |
vincegx/Figma-to-Code_API
Convert Figma designs to React/Tailwind, HTML/CSS code with responsive breakpoints |
|
Experimental |
| 25 |
VuToV-Mykola/css-classes-from-html
📌Генерація CSS класів з HTML з інтеграцією Figma. Розроблено на курсах GoIT... |
|
Experimental |
| 26 |
nilostolte/MicroVBA-PowerPoint
MicroVBA is a VBA interpreter written in VBA to be used in PowerPoint in... |
|
Experimental |
| 27 |
JoeLumbley/Shape-Editor
Create shapes interactively and generate code automatically. |
|
Experimental |
| 28 |
dirteboi13/x
its my first project so give me a grade |
|
Experimental |
| 29 |
hind-sagar-biswas/glassCSS
A Glassmorphism CSS code generator tool on vanilla JavaScript |
|
Experimental |
| 30 |
imhul/neumorphine.css
Neumorphine.css - Open Source CSS Code Generator for Neumorphism UI Design Concept |
|
Experimental |