Figma to Code
Figma-to-Replit plugin
Replit Labs is a space for creative hacker projects and experiments. As a Hack Week project, Devin and I built the Figma-to-Replit plugin and released it to the community.
After selecting a frame in Figma, the plugin generates a React project and opens a new repl. The project can be built and deployed in seconds. The goal: streamline the process from designing in Figma to prototyping with code, generating visually accurate, responsive code from designs.
Unlike tools that provide simple HTML approximation with inline styles, the export is high-quality and well-organized. Figma components become React components; styles are built and compiled using Lightning CSS. For most web projects, this is a valuable starting point that saves significant frontend work.
Generate a Repl directly from your Figma design and instantly share a static React site. Use Replit AI to add functionality and tweak your design before deploying to production.
Debut
We showcased the plugin in a live demo at a prototyping workshop at the a16z SF office. It hit top 10 among Figma’s trending plugins.
Figma-to-Replit was one of the first plugins to support Dev Mode and was featured in Figma’s blog post on Dev Mode plugins that generate code. We leverage Dev Mode to inspect frames, preview project structure, debug responsivity, and include or exclude files and assets.
Press & Links
- Replit — Replit to Figma: Experiment with Replit’s Figma Plugin
- Codegen Plugins (And Other Tips) for Automating Design to Code | Figma Blog
- Replit launches new product in race for AI coding assistants
- Replit — Raising $97.4M at $1.16B Valuation
- Startup Replit launches a ChatGPT-like bot for coders
- Vibe Coding Tool Replit Doubles In Valuation To $3 Billion
- Replit — Introducing Replit Teams
- Replit — Introducing Replit Projects
- Replit — Introducing Multiplayer AI Chat