AutoHTML | Components to Code

开发 · 755 likes

React, Vue, Svelte, Angular, Tailwind, HTML & CSS Converter

New: Angular! 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.

Open in Figma

Related plugins