Turning Figma designs into deployment-ready frontend code
A production system that converts Figma designs into clean, deployment-ready frontend code, using a multimodal LLM over both the file's JSON and its rendered pixels, grounded in the project's own component patterns.
- Stack
- Python · multimodal LLM · RAG · LangChain · Pydantic
- Focus
- Design-to-code generation
- Reliability
- ~15% misaligned frames → caught by pixel-diff validation
A Figma file is not a spec — it's an ambiguous set of hints
Most design-to-code tools ignore the same thing: a Figma file is not a specification, it's a set of visual hints. Buttons carry no semantic names. Spacing tokens live in a separate library. Auto-layout rules mean different things in different contexts, and the design leaves all of that implicit.
Point a generic LLM at that ambiguity and it fills the gaps by guessing. It hallucinates class names, invents props that don't exist, and produces code that renders wrong on the first run. The output looks plausible and fails in review — which is worse than no output at all.
Two signals — JSON and vision — merged before generation
The system parses Figma's JSON output and extracts the component hierarchy, design tokens, and constraint rules. A RAG layer then retrieves relevant component patterns from a codebase-specific knowledge base, so the model generates code that matches the project's existing conventions rather than generic boilerplate.
In parallel, multimodal vision runs on the rendered frame to catch what the JSON misses — overlapping elements, visual rhythm, responsive breakpoints. Both signals are merged before generation, and structured outputs via Pydantic enforce that every component name, prop, and import resolves before any file is written.
Nested components, and the fix that made them tractable
Nested components were the hardest case in production. When a card contains a badge that contains an icon, the context window fills with parent-component noise, and the model starts inventing prop names to bridge what it can no longer see clearly.
The fix was hierarchical chunking: generate leaf components first, cache their schemas, and inject only the relevant interface into the parent's context. The parent no longer reasons over raw children — it reasons over their resolved contracts, and the invented props stop appearing.
Nothing ships until the pixels match
Two gates stand between generation and delivery. Pydantic enforces the first: every component name, prop, and import must resolve before a file is written, so structurally broken code never leaves the pipeline.
The second gate is visual. Auto-layout edge cases caused misaligned output in ~15% of frames, so a validation step re-renders the generated code headlessly and diffs the pixel output against the original frame. Failures are re-queued with the diff as additional context, so the model corrects against the exact discrepancy rather than guessing again. What the client receives is code that has already been proven to render like the design, which works only because a wrong result here is detectable by a machine rather than a matter of taste.
See what this would look like in your operations.
30 minutes · we map your 3 best automation opportunities · no obligation