AutoHTML | Components to Code

New: Styled Components!

Export React, Vue, Svelte, Angular or HTML with Tailwind or CSS Styling.

Works in Dev Mode & Design Mode. No registration required - simply run the plugin and select a frame!

Check out the Demo File.

Have any questions?

Join Slack for support, questions or feedback.

Report Issues and Bugs here.

Tipps:

Use Auto layout and constraints.

Color styles, text styles, and effect styles will be transferred as CSS variables or Tailwind config.

The CSS classes are named after the layers in Figma.

To maximize the plugin's potential, avoid using groups and keep the layers as simple as possible.

Advanced Tipps for React/Vue/Svelte/Angular:

Boolean, text and instance swap component properties will be exported if you select a component.

Enable the "Nested Components" option in the settings to create components from all instances within your current selection.

Variants can be exported as well.

Receive a Zip folder containing all component files and a package.json.

Install the dependencies (Node.js required) using npm i and start coding.

Please note: The generated code is not production-ready but serves as a starting point for developers.