Figma to HTML,Tailwind,React,Vue and Svelte

About this plugin

Turn any Figma frame into clean code you can ship: HTML, CSS, Tailwind, React, Vue or Svelte.SNN Design to HTML/CSS reads your Auto Layout, styles and variables and writes readable markup and CSS, so you don't have to rebuild the design by hand. It's free, with no account and no sign-up.How layout worksAuto Layout → responsive code. Frames built with Auto Layout export as real flexbox and CSS grid. Hug, Fill, gaps, padding and wrap become CSS that adapts to the screen.Free-form layers → exact positions. Layers placed by hand on the canvas (no Auto Layout) keep their exact size and position, just as you drew them.Breakpoints: name your frames "Home / Desktop" and "Home / Mobile" and they merge into one page with media queries.Multi-page sites: select several top-level frames to export a site with linked pages.Output formatsHTML + CSSHTML + TailwindReact + CSS / React + TailwindVue + CSS / Vue + TailwindSvelte + CSSEmail HTMLFeaturesLive preview: see the result right inside Figma at Fit, 1440, 768 and 375 widths.Variables to CSS: your variables become CSS custom properties, so design tokens come through as real CSS variables.Dark mode: a variable mode named "Dark" is exported as a prefers-color-scheme theme.Shared classes: components and text styles reuse one class, so the CSS stays short and readable.Components: in React, Vue and Svelte, Figma components become component files with props. TypeScript is optional.Downloads: get a .zip with pages, stylesheet and assets, a ready-to-run Vite project, or a Next.js project.Design tokens: export all local variables and styles as .css and .json.Google Fonts: font links are added for you.Images and vectors: inline icons as SVG, export masks and complex layers as PNG at 1x–3x, or embed images when copying.Units and decimals: choose px or rem and how many decimal places to keep.Design check: the Notes panel shows your Auto Layout score and points to layers that need fixing.Dev Mode support: generate code straight from the Inspect panel.PrivacyEverything runs locally inside Figma. Your designs are never uploaded or stored anywhere. The plugin only connects to Google Fonts and the Tailwind CDN so the live preview matches the exported page.Best resultsUse Auto Layout, name your layers clearly ("Hero" or "Pricing", not "Frame 427"), and use text styles and variables. Well-structured files give clean, responsive code.Bug reportshttps://github.com/sinanisler/snn-figma-to-html-css-export/issuesFeature requestshttps://github.com/sinanisler/snn-figma-to-html-css-export/discussions