Figma to Code in 2026: Figma MCP, Dev Mode, and the Open-Source Options
The short version: Figma-to-code has three real paths in 2026: Figma Dev Mode (built-in, gives React components + CSS for paid plans), the Figma MCP server (AI agents read your design files directly — the production path teams report success with), and open-source converters (free, but they're pipelines, not magic). The scandal that shaped all of this: Figma disabled its own AI design tool after it copied Apple's weather app (113-pt HN thread) — which is why Figma now positions AI as reading designs, not generating them. If your design lives in Figma and you have a design system, MCP + review is the workflow that works.
The three paths, honestly ranked
| Path | What it does | Production-ready? |
|---|---|---|
| Figma Dev Mode | Built-in: inspect → React/CS components per frame | ✅ But manual, per-component |
| Figma MCP server | AI agents (Claude Code, Cursor) read .fig files and generate against your codebase | ✅ With 1-day setup + review |
| Open-source converters | .fig → HTML/React pipelines (no AI or light AI) | ⚠️ Good scaffolds, still pipelines |
The open-source option: what it actually is
The January 2026 "Open-source Figma design to code" Show HN (50 points) is the honest baseline for the free tier — and its top comment deflates the AI hype precisely:
"Interesting. It appears this doesn't use AI itself… Figma in dev mode already gives React components and CSS styles, and this seems like a more automated way to pull them."
Translation: the open-source tools are automation of Dev Mode's exports, not intelligence. Useful, free, and dramatically less magical than the landing pages suggest.
The copycat scandal (and why it matters)
July 2024: Figma shipped "Make Designs" AI, the community immediately noticed its outputs looked suspiciously like Apple's iOS weather app, and Figma pulled the feature (113-point thread). Two lasting effects:
- Figma repositioned — from generating designs to helping developers consume designs (Dev Mode, MCP).
- Training-data skepticism went mainstream — every design-AI tool now gets the "what did you train on?" question first.
The separate "Figma AI" launch thread (240 points, June 2024) shows how much attention this space gets — and how fast goodwill evaporates when provenance is unclear.
The honest verdict
Use Figma MCP if:
Your team designs in Figma, maintains a component library, and can spend a day mapping components. Teams report "smooth sailing" after setup — but the setup is the product. (See our screenshot-to-code analysis for the full workflow.)
Use Dev Mode if:
You're a frontend dev who wants exact values per component, no AI involved. It's manual but deterministic — and included in plans you may already pay for.
Use open-source converters if:
You want a free scaffold from a simple design and you'll rebuild the rest anyway. Don't expect design-system awareness.
Skip if:
Your "design" is a screenshot, not a Figma file. Go back to the screenshot-to-code world — or better, get the design into Figma first.
Screenshot to code → Claude Code tips →
Method: HN threads on Figma-to-code (Jan 2026, 50p), Figma AI (Jun 2024, 240p), the Make Designs takedown (Jul 2024, 113p), categorized 2026-09-08. Quotes verbatim with links. We don't take payments from vendors.