What frameworks does html2design support?

html2design works with any technology that renders standard HTML in the browser — which covers every major frontend framework and platform. Supported JavaScript frameworks include React, Vue/Nuxt, Angular, Svelte/SvelteKit, Next.js, Gatsby, Ember/Glimmer, and Storybook. Supported CSS frameworks include Tailwind CSS, Bootstrap, Material UI (emotion), Chakra UI, and plain CSS. Supported platforms include Webflow, WordPress (Elementor, Divi, Astra, custom themes), Adobe XD (via HTML export), and Sketch (via HTML component output).

Does html2design require a Chrome extension?

No. html2design is a Figma plugin — it runs entirely inside Figma. You copy the outerHTML of any rendered web page from your browser's DevTools (no extension needed) and paste it directly into the plugin. This means it works with localhost, staging environments, Storybook, auth-gated pages, and any URL a browser can load.

Can I import a React app into Figma?

Yes. React renders to standard HTML in the browser. Open your React app in Chrome (localhost:3000 or any URL), use DevTools to copy the outerHTML of the component or page section you want, and paste it into html2design in Figma. Works with Create React App, Next.js, Remix, Vite+React, and Storybook.

HTML to Figma Use Cases — Every Framework, Platform & Workflow

Category

Frontend Frameworks

JavaScript frameworks that render to standard HTML — import any component or page as native Figma layers from localhost, Storybook, or production.

Framework

Vue to Figma

Import Vue and Nuxt.js component templates as native Figma design layers.

Framework

Angular to Figma

Convert Angular rendered components and templates into editable Figma frames.

Framework

Svelte to Figma

Capture Svelte and SvelteKit component renders as native Figma designs.

Framework

Next.js to Figma

Import Next.js server-rendered and client-rendered pages into Figma.

Framework

Ember to Figma

Convert Ember.js Glimmer components and Handlebars templates to Figma layers.

Component Explorer

Storybook to Figma

Import Storybook component stories from localhost:6006 as native Figma layers.

Framework

Astro to Figma

Convert Astro sites and island components — zero JS by default means ultra-clean Figma imports.

Framework

Remix to Figma

Import Remix routes with real loader data as native Figma layers — no placeholders.

Lightweight JS

Alpine.js to Figma

Capture Alpine.js components in any interactive state — open, closed, error, loading — as Figma frames.

Category

CSS Libraries & UI Kits

Utility frameworks and component libraries — all resolve to computed CSS values that html2design captures perfectly.

CSS Framework

Tailwind CSS to Figma

Convert Tailwind utility-class pages to native Figma layers — all utilities resolve to computed values.

CSS Framework + React

Tailwind + React to Figma

Import Tailwind+React component apps including design token extraction workflows.

UI Library

Material UI to Figma

Convert MUI components and emotion-based themes to native Figma design layers.

UI Library

Chakra UI to Figma

Import Chakra UI style-prop components and design tokens as editable Figma layers.

CSS Framework

Bootstrap to Figma

Convert Bootstrap components and grid layouts to native Figma layers — includes responsive handling.

Category

Website Platforms

No-code builders and design tools that publish standard HTML — import any page as native Figma layers without any platform-specific export.

Platform

Shopify to Figma

Import Shopify themes — Dawn, custom Liquid, or Headless Commerce — as editable Figma layers.

Platform

WordPress to Figma

Extract WordPress themes and block editor layouts into Figma for redesign or auditing.

Platform

Gatsby to Figma

Capture GraphQL-driven Gatsby pages as editable Figma layers.

Platform

Webflow to Figma

Import Webflow published pages into Figma — preserves layout, typography, and design tokens.

Design Tool Migration

Adobe XD to Figma

Migrate Adobe XD screens to Figma as native editable layers using HTML export.

Design Tool Migration

Sketch to Figma via HTML

Migrate Sketch design systems to Figma using HTML component output — bypasses Sketch file compatibility issues.

Category

Design Workflows

Common use cases that apply across all frameworks — import-driven workflows for legacy migration, developer handoff, and onboarding new design work on existing codebases.

Workflow

Legacy Website Migration

Modernize legacy HTML codebases by importing them as editable Figma designs — the starting point for every legacy redesign.

Workflow

Developer Handoff Audit

Bridge the design-development gap by importing live code into Figma for accurate design documentation and audit.

Why It Works With Everything

html2design reads the browser's computed CSS — the final, resolved style values after all cascades, variables, and preprocessors have run. It doesn't matter whether the styles came from Tailwind utility classes, Bootstrap components, CSS-in-JS like emotion, or plain CSS — the browser resolves them all to color: #1a1a1a and font-size: 16px. html2design reads those computed values and maps them to Figma fills, text properties, and frame dimensions.

The workflow is always the same: open the page in Chrome, copy the outerHTML of the element you want from DevTools, paste it into the html2design plugin in Figma, and click Convert.

Read the complete guide → Step-by-step tutorials → Tool comparisons → Workflow guides →

Get started

Try html2design with your stack

Open any page from your project in Chrome, copy a section's outerHTML from DevTools, and paste it into html2design. Native Figma layers in under 30 seconds — whatever framework you're using.

Install from Figma Community →

$12/mo · $96/yr · Cancel anytime