Figma to Code on Replit (React, HTML, CSS)

About this plugin

Design in Figma, Prototype in Replit

This experimental plugin turns static designs into responsive React components. Export the generated code to Replit to share an instantly-deployable React app with your team, for rapid prototyping with real logic and data.

Got feedback? We'd love to hear from you

How it works:

1. Design a component or page. Use best practices for layer naming, auto-layout and wrapping, and shared styles, to prepare your design for export.
2. Run this plugin. You can run it in Design Mode or Dev Mode.
3. Select a layer and click "Generate code". This will generate a React component and CSS module for your selection, along with some basic React template files.
4. Copy code or create a Repl. You can select a file to copy its contents to your clipboard, or generate a working React Repl by exporting to Replit. Select the Node.js template when asked to choose.
5. Prototype or polish. Wire the generated code up to real data for user testing or rapid prototyping, or polish the output for use in production.
6. Deploy and share. Deploy your new Repl to get a shareable URL to your component or page.

Additional features:

• Export vector layers as React SVG components (optional)
• Automatically infers responsive properties even without autolayout
• Choose between exporting CSS modules or inline styles
• Generate Google Fonts CSS import statements
• Export Figma Node IDs as HTML Attributes and CSS comments (optional) to tie your code back to Figma

What isn't supported?

Currently a few Figma features are unsupported in code generation:

• Semantic HTML tags (everything is a div, span, or svg)
• Image fills and images will not be exported
• Syncing generated code into an existing project/Repl
• Gradients and shadows
• Variables
• Variants
• Hidden layers (they will be ignored)

Pro tips:

When you're ready to export, make sure you are following these best practices to generate the most accurate export:

• Apply auto-layout, including wrapping, spacing, and constraints, to all layers.
• Convert groups to frames. Groups will be exported as SVGs.
• Flatten vector layers or create a single group with all the parts and no nested groups
• Name your layers something that will be meaningful to a developer, for example a component name (IconButton) or a semantic class (button)
• Minimize the number of nested frames as much as possible, so your layout is controlled by as few frames as possible

Caveats and future plans:

• The plugin currently attempts to infer auto-layout properties even when they are not specified for a layer. This isn't always perfect.
• The plugin does not support Figma prototype behaviors like links and transitions. Functionality can be added in code via the Replit code editor and Replit AI coding assistant.
• Instances are poorly supported and don't always work. It's best to detach all nested instances before exporting.