Category
AI Design Tools
AI tools generate UI as HTML & CSS. Bring Claude, v0, and other AI-designed output into Figma as native, editable layers.
AI Tool
Claude to Figma
Turn Claude Artifacts and Claude Code output into native, editable Figma layers.
AI Tool
v0 to Figma
Convert Vercel v0's rendered React + Tailwind output into best-effort editable Figma layers.
AI Tool
Bolt to Figma
Convert Bolt.new's in-browser AI apps into editable Figma layers.
AI Tool
Lovable to Figma
Convert Lovable's React + Tailwind apps into editable Figma layers.
AI Tool
Cursor to Figma
Convert UI built with the Cursor AI editor into editable Figma layers.
AI Tool
ChatGPT to Figma
Convert ChatGPT (Canvas or code) output into editable Figma layers.
AI Tool
MagicPath to Figma
Turn MagicPath's AI-designed UI into native, editable Figma layers.
AI Tool
GitHub Copilot to Figma
Turn UI written by GitHub Copilot or Copilot Workspace into editable Figma layers.
AI Tool
Windsurf to Figma
Turn UI Windsurf (Codeium's Cascade agent) builds into editable Figma layers.
AI Tool
Magic Patterns to Figma
Import Magic Patterns' rendered UI into Figma with Pixel or best-effort Editable output.
AI Tool
Google Stitch to Figma
Import a browser-rendered Google Stitch interface into Figma from HTML or a public preview.
AI Tool
Visily to Figma
Import a rendered Visily interface with Pixel or best-effort Editable output.
AI Tool
Replit Agent to Figma
Turn apps built by Replit Agent into editable Figma layers for design refinement.
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
URL to Figma
Import a public website in lossless Pixel mode or as best-effort editable Figma layers.
Evidence
HTML to Figma Output Quality
Compare a real browser fixture with its editable Figma import and review the visible limitations.
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.
For a public page, paste its URL into the plugin and choose Pixel or Editable mode. For localhost, authenticated pages, or a focused component, copy the rendered outerHTML from DevTools and use manual import.
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 a few manual steps — whatever framework you're using.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime