From Figma to code with just one click.
Get the plugin
3k Saves
55k Try outs
A Tool that speaks your language
AutoHTML for Figma converts to common Web Frontend code like plain HTML with CSS as well as Vue, React with Classic CSS, CSS Modules or even Tailwind. Svelte will be available soon.
import "./ExampleTeaser.css";
import { ButtonStateDefault } from "../ButtonStateDefault/ButtonStateDefault.jsx";

export const ExampleTeaser = ({
  showButton = true,
  text = "overline",
  headline = "Headline",
  className,
  ...props
}) => {
  return (
    <div className={"example-teaser " + className}>
      <div className="img"></div>
      <div className="body">
        <div className="headline">{headline}</div>
        <div className="overline">{text}</div>
        {showButton && (
          <>
            <ButtonStateDefault
              text="Button"
              state="default"
              className="button-instance"
            />
          </>
        )}
      </div>
    </div>
  );
};
Write your styles visually with Figma.
The Plugin translates design into high quality CSS with relative positioning. Figma features like Auto layout and constraints will add responsive behavior to your code.
Build with components in mind.
Use component properties in Figma and get component properties in React or Vue. Supported are boolean, text and instance swap properties.
Inspect your files instantly.
Check if the resulting code matches your expectations in a familiar interface. If it does you can download the files or open them directly in CodeSandbox.
Download the plugin and start
Get the plugin