HTML to Figma conversion uses a browser-rendered page or component as the source for native Figma frames, text, shapes, and images. Supported nodes remain editable, but browser and Figma rendering do not map one-to-one. Review fonts, complex effects, image crops, runtime states, and responsive behavior after import.
1. Why Convert HTML to Figma
Every engineering team that ships a product eventually faces the same problem: the Figma file and the live codebase have diverged. A design was updated in code but not in Figma, or a new component was built by a developer without a design counterpart. Over time, Figma becomes a stale record of what was once intended, not what actually exists.
HTML to Figma conversion uses rendered output as evidence instead of rebuilding from memory. It can create a useful visual baseline, but the browser and Figma have different rendering models, so fonts, effects, responsive behavior, and unsupported content still need review.
Here are the most common reasons teams convert HTML to Figma:
- Design system bootstrap: Your team coded a full UI before creating a Figma library. Instead of rebuilding every component by hand, import them directly from the browser.
- Legacy application modernisation: An older codebase has no design files at all. Converting key screens to Figma is the first step toward a modern design process. See the legacy migration use case for a detailed workflow.
- Sketch to Figma migration: Teams moving from Sketch to Figma can use their existing HTML components as the source of truth, skipping the need to recreate designs from scratch. See the Sketch to Figma migration use case.
- Developer handoff in reverse: Usually designers hand off to developers. With HTML to Figma, developers hand off back — sharing an accurate visual reference that designers can refine without re-measuring the live app. Read more about developer handoff.
- Design drift audit: Import the current production UI and compare it side-by-side with the original Figma designs. Every discrepancy is visible immediately.
- Client presentations: Import a live staging environment into Figma to create high-fidelity mock-ups for stakeholder reviews without any manual work.
- Component documentation: Populate a Figma component library with accurate visual references for every production component, including all states and variants.
In short: if your code is ahead of your Figma file, HTML to Figma conversion is the fastest way to close the gap.
2. How It Works — Step by Step
html2design has two distinct input paths. Public URL capture loads the page in a remote browser and records resolved visual output. Manual input renders the HTML document you supply inside the plugin, so it can only compute styles that are inline, included in <style> blocks, or available through reachable stylesheet links.
URL capture also lets you choose the output contract. Pixel mode uses lossless raster tiles for a close visual reference. Editable mode maps supported text, images, fills, effects, and measured geometry to native Figma nodes. See the focused tutorial: How to Convert HTML to Figma.
Choose the input path
Use a public URL when the page is remotely reachable and you want browser-resolved capture. Use manual input for private or local sources only when you can supply a complete HTML document with its required CSS and assets.
Verify the source is self-contained
Open the HTML file by itself and confirm that it still has the expected colors, fonts, and layout. Copying an isolated element's outerHTML preserves its markup and inline styles, but it does not embed external CSS or the browser's computed-style values.
Choose Pixel or Editable mode
For URL capture, use Pixel mode when visual matching matters most. Use Editable mode when individual supported elements need to remain selectable and you can accept cleanup for browser-only features.
Import into Figma
Open html2design from Figma Community. Enter the public URL, load the HTML file, or paste the complete document, then start the import.
Review and organise the layers
Compare the result with the browser. Check text wrapping, fonts, image crops, fixed elements, overflow, effects, and responsive state before turning selected results into maintained Figma components.
Important: outerHTML is markup, not a visual snapshot. If it only contains class names, bring the CSS with it or use public URL capture.
3. AI Design Tools (Claude, v0)
Claude Code, Vercel v0, Bolt, Lovable, and ChatGPT can produce real web projects. For deployed previews, public URL capture records the browser-resolved page. For private projects, export a complete HTML document with the CSS and assets it needs. Figma also offers an official Claude Code workflow through its MCP server; the Claude to Figma guide compares the current options.
This closes part of the AI design loop: generated HTML can become a Figma baseline for review, refinement, and design-system alignment instead of being treated as a finished design artifact.
4. Framework Guides
The framework name matters less than the exported browser input. A public React, Vue, Angular, Svelte, or static page can use URL capture. A private project needs a complete document or self-contained export; a DOM fragment that omits its framework CSS will not reproduce the rendered design.
Public framework pages
Use URL capture for a deployed React, Next.js, Vue, Nuxt, Angular, Svelte, Gatsby, Astro, Remix, Shopify, WordPress, or Alpine page. The capture browser loads framework-generated CSS, waits for the rendered DOM, and records the selected viewport. See the dedicated guides above for framework-specific runtime and asset caveats.
Local and private framework pages
Manual input works when you export a complete HTML document with its required styles. For component systems such as Storybook, create a dedicated story or export route, then package the CSS with the markup. CSS Modules, scoped Vue/Svelte selectors, Tailwind classes, Angular encapsulation attributes, and CSS-in-JS class names have no visual meaning without their generated stylesheet.
Stateful and responsive pages
Choose the viewport and state before export or URL capture. Import hover, focus, open, loading, error, and responsive variants separately. Interactive behavior does not transfer to Figma; the import represents one rendered state at a time.
Framework-specific guides
Use the React component guide, Storybook guide, Vue guide, Angular guide, Svelte guide, Tailwind guide, or Bootstrap guide for source-specific setup and review checklists.
5. Design System Migration Workflow
One application of HTML to Figma conversion is migrating an existing code-based design system into Figma. Imported frames can accelerate visual inventory work, but the final library still needs deliberate components, variants, variables, naming, and documentation.
The workflow has three phases:
Phase 1 — Inventory and approve design tokens
Build a token reference page — a single HTML page that renders every CSS custom property (--color-*, --spacing-*, --font-*) as a visible block. Open it in a browser, copy the outerHTML, and import it into Figma. Review the browser-derived values in the resulting frame, then register the approved values as Figma Variables and Styles.
Phase 2 — Import atomic components
Start with the smallest, most reused components: buttons, inputs, badges, checkboxes. Import each state (default, hover, focus, disabled, error) as a separate Figma frame. Convert each frame to a Figma Component and organise them under a published library using the naming convention Category / Component / Variant.
Phase 3 — Work up the component hierarchy
Move from atoms to molecules (form rows, card headers) to organisms (navigation bars, hero sections, data tables). At each level, bind the imported colours and spacing to your Figma Variables from Phase 1 so the entire library is token-connected.
Measure before planning: Pilot one simple component, one stateful component, and one composite section. Use the observed import and cleanup time to estimate the full library instead of applying a generic migration estimate.
For a complete, step-by-step walkthrough of this process, see the Design System Migration guide.
6. Comparison of Methods
There are several ways to get HTML content into Figma. Understanding the trade-offs helps you pick the right tool for the job. See also: detailed feature comparison, Figma import alternatives, and the screenshot vs code import deep-dive.
| Method | Output editable? | Text editable? | Layout preserved? | Tokens readable? | Speed |
|---|---|---|---|---|---|
| html2design (code import) | Yes | Yes | Yes | Yes | Fast |
| Browser screenshot extension | No | No | Partial | No | Very fast |
| Manual recreation in Figma | Yes | Yes | Depends | Yes | Very slow |
| AI screenshot-to-design tools | Partial | Partial | Approximate | No | Moderate |
Code import vs screenshot: the key difference
A screenshot is a raster image placed on the Figma canvas. It looks right but you cannot edit text, change colours, or resize without distortion. A code import produces real Figma objects: text nodes you can re-type, rectangles you can recolour, frames you can re-layout with Auto Layout. For any design work beyond a static reference, code import is the correct choice.
Code import vs manual recreation
Manual recreation gives full control but is extremely slow for anything more than a handful of components. A typical button component with five states might take 30–60 minutes to rebuild manually in Figma. With code import, that same button is imported in a few manual steps. Manual recreation is appropriate only for greenfield design work where no code exists yet.
Code import vs AI screenshot tools
Screenshot-to-layer tools infer structure from pixels. Code import can instead use DOM structure and browser-computed values, but Figma rendering still differs from the browser. Compare the output modes on the actual page you plan to redesign.
7. Frequently Asked Questions
What is HTML to Figma conversion?
HTML to Figma conversion uses browser-rendered HTML and computed styles to create native Figma frames, text nodes, shapes, and images for supported content. These nodes remain editable, while unsupported effects and browser behaviors may need cleanup or raster fallback.
How do I convert HTML to Figma for free?
Install html2design from Figma Community and use the 10 trial conversions on representative sources. Test a public URL or import a complete HTML document with its CSS, then inspect the output before subscribing.
Can I convert a React component to Figma?
Yes. Use URL capture for a public React route. For a local app or Storybook, export a complete HTML document with its generated CSS and assets. See the React Component to Figma guide.
Does html2design work with Tailwind CSS?
Tailwind utilities resolve to browser CSS before import. html2design can recreate supported colors, spacing, typography, and layout, but font metrics and browser-only effects can still differ in Figma. See the Tailwind to Figma guide for the review and manual token-mapping workflow.
What is the difference between screenshot import and code import?
Screenshot tools produce flat, non-editable images in Figma. Code import via html2design produces real Figma layers — editable text, recolourable shapes, re-layoutable frames. For design work, code import is almost always the better choice. Read the full comparison: Screenshot vs Code Import.
Can I import a full website into Figma?
Yes. Work page by page with public URL capture, choosing Pixel or Editable output. Private pages use complete HTML documents rather than a remote URL. See the Import Website into Figma guide.
How do I convert Angular components to Figma?
Use URL capture for a deployed Angular route. For ng serve output, export a complete document with generated styles and assets. See the Angular to Figma use case.
How do I migrate a design system from code to Figma?
Build a token reference page, import it to seed Figma Variables and Styles, then import atomic components one by one and convert them to Figma Components. A detailed workflow is in the Design System Migration guide.
Does html2design support Vue and Nuxt?
Yes. Use public URL capture or include Vue's generated scoped CSS with a manual HTML export. The scoped attributes alone do not carry the CSS rules. See the Vue to Figma use case.
Can I use html2design with Bootstrap components?
Yes, when Bootstrap CSS is included with the document or reachable through its stylesheet link. Class names without Bootstrap CSS render as unstyled markup. See the Bootstrap to Figma guide.
Is there a way to keep Figma designs in sync with code?
The most practical approach is a re-import workflow: when code changes, re-import the affected component and update the Figma Component. Full bidirectional live sync is not yet possible, but unidirectional sync from code to Figma is well-supported with html2design.
What are the alternatives to html2design?
The main alternatives are flat screenshot capture, browser-extension workflows that create editable layers, AI-assisted screenshot reconstruction, and manual recreation. Compare source access, output structure, fidelity, and cleanup needs. See the alternatives comparison and the real output example.
Where can I find definitions of design-development terms?
The html2design glossary defines terms like computed styles, outerHTML, Figma Auto Layout, design tokens, and more — covering the vocabulary used throughout this guide and the plugin itself.
How do I see what's new in html2design?
All feature releases, bug fixes, and improvements are listed in the html2design changelog, updated with each plugin release.
Where can I find more answers to common questions?
The html2design FAQ page covers 23 common questions organized by category: getting started, technical details, workflow tips, and comparisons — including pricing, browser support, and how html2design differs from other import tools.
Key Takeaways
- Choose by output need — use editable import when individual supported nodes matter, or Pixel mode when visual fidelity matters more.
- Framework labels are secondary — the important input is rendered browser output, external assets, fonts, and runtime state.
- Choose the input workflow — paste/export HTML for non-public content or enter a public URL directly.
- Estimate migrations from a pilot — measure import and cleanup on representative component types.
- Token mapping is a review task — use imported values as evidence, then register approved Figma Variables and Styles deliberately.
- Use the trial deliberately — spend the 10 trial conversions on representative simple, complex, and stateful sources.
Ready to convert your first component?
Install html2design from Figma Community — free to try, works with any framework.
Get Plugin Free →More Guides in This Series
This pillar guide is the hub for our entire HTML to Figma content library. Browse all 22 articles or explore by topic: Tutorials, Comparisons, Workflows, Advanced.