How do I hand off code to a designer in Figma?

Prepare the exact browser state you want reviewed. For a deployed page, import its public URL and choose Pixel for visual reference or Editable for supported native layers. For local or private work, export a complete HTML document with the CSS and assets it needs, then use manual input. Compare the Figma result with the browser before using it as a handoff baseline.

Can I convert React components to Figma for a designer handoff?

Yes. Publish the React or Storybook state at a review URL, or export a complete HTML document with the generated CSS and assets. html2design works from browser output rather than React source abstractions, so Components, Variables, Auto Layout, and interactions are not created automatically.

What is the best way to share code changes with a designer?

Share a versioned preview URL plus the viewport, route, data state, and commit being reviewed. Import that state into Figma as Pixel reference or best-effort Editable layers, annotate implementation differences, and keep the source URL linked so reviewers can verify the handoff.

Does the component need to be deployed to convert it for a handoff?

A public deployment is not required for manual input, but localhost cannot be entered in URL mode. For private or local work, provide a complete HTML document with its required CSS and reachable assets. An isolated outerHTML fragment with class names does not include external or computed CSS.

Figma Design Handoff from HTML: Code-to-Canvas Guide

Figma Design Handoff
from HTML

Turn a shipped page or complete HTML document into a verifiable Figma review baseline. Choose Pixel mode for browser-faithful reference or Editable mode for supported native layers, then document the differences.

What is a Figma design handoff from HTML?

A Figma design handoff from HTML uses a browser-rendered implementation as a review baseline on the Figma canvas. Import a deployed state by public URL, or use a complete local HTML document that includes its required CSS and assets. URL Pixel mode preserves the browser appearance as raster tiles; Editable mode and manual input create best-effort native layers for supported content.

The result is a static snapshot, not a live connection to source code. It does not automatically recreate Figma Components, Variables, Auto Layout, interactions, or every browser effect. Keep the source URL, viewport, state, and commit with the handoff, and verify the import against the browser before approving changes.

Why developer-to-designer handoffs break down

📸

Screenshots aren't designs

Developers send Loom recordings or PNG screenshots. Designers can't edit them — they have to rebuild the component from scratch in Figma just to make a spacing change.

🔀

Figma and code drift apart

Developers ship fast and forget to update the Figma file. After a few sprints, the Figma designs no longer reflect the real product — making handoff specs unreliable.

🌐

Private states need a complete source

Localhost and authenticated states are not reachable through public URL capture. Manual input works when the exported HTML includes the CSS and assets required to render the state independently.

The Figma design handoff from HTML workflow

Preserve the exact implementation state and its provenance. The imported frame is evidence for review, not a replacement for the source application or its design system.

Step 01

Prepare the exact review state

Open the route, component state, viewport, theme, locale, and data set the designer must review. Record the source URL or commit so the Figma frame can be traced back to a specific implementation.

Wait for fonts, images, application data, and lazy content to load. Capture separate states for hover, menus, breakpoints, or themes rather than assuming one static frame represents the full interaction.

Step 02

Choose a public URL or complete HTML

Use the deployed preview URL when it is publicly reachable. URL mode lets a remote browser load the page with its styles and assets. For localhost, private staging, or static artifacts, export a complete HTML document with the generated CSS and reachable assets, then use manual input.

Do not treat isolated outerHTML as a visual export unless all necessary styling is inline. Class names alone do not contain external stylesheets, runtime CSS, fonts, or values shown in DevTools' Computed panel.

Step 03

Choose Pixel or Editable output

In URL mode, use Pixel when the browser appearance is the review artifact. Use Editable when supported text, fills, images, and frames need to be selected or changed. Manual file input produces best-effort editable layers and requires a complete document.

Browser-only media, complex SVG, canvas, video, filters, and unavailable fonts may be rasterized or need cleanup. Choose the mode based on the review goal rather than assuming every element maps one-to-one.

Step 04

Compare, annotate, and share the handoff

Compare typography, wrapping, image crops, fixed elements, overflow, effects, and responsive geometry against the source. Mark conversion differences separately from intentional design changes.

Share the Figma link together with the source URL or commit and the captured viewport. The designer can then rebuild approved patterns as Components, Variables, Styles, and Auto Layout where the system needs them. See the measured output example for current editable limits.

What designers receive in the Figma handoff

Pixel output is a raster reference. Editable output maps supported content to native Figma objects and may require cleanup.

Editable text layers

Supported text becomes editable Figma text. Missing fonts and differences between browser and Figma text metrics can change wrapping, line height, or spacing and should be reviewed.

Accurate spacing and layout

Editable mode uses measured browser geometry to position supported frames. CSS and Figma use different layout models, so responsive behavior and some alignment rules become a static state rather than native constraints.

Named, structured layer tree

HTML class names and element types become layer names. A .card__header in the HTML becomes a named frame in the Figma layer panel — easy to navigate and modify.

Real fill values, not guesses

Supported CSS colors, borders, opacity, gradients, and shadows can map to Figma properties. Advanced filters, blend behavior, and browser-only effects may need manual correction or raster fallback.

Works with every dev stack

React & Next.js

Publish the intended component state at a review URL, or export a complete document with its generated CSS and assets. JSX, TypeScript, CSS Modules, CSS-in-JS, and Tailwind source abstractions do not become Figma components automatically. See also: React Component to Figma guide and Storybook to Figma.

Tailwind CSS

Use a public built page or a complete HTML document that includes the compiled Tailwind stylesheet. Supported rendered values can inform Figma fills, text, and measured geometry, but Variables and design tokens must be rebuilt or applied afterward. See also: Tailwind to Figma guide.

Vue, Angular, Svelte, and others

HTML to Figma works from browser output rather than framework source code. Use a reachable public preview or package a complete HTML/CSS artifact; framework class names without the styles they reference are insufficient.

Email templates (HTML + inline CSS)

Email HTML with inline styles and table layouts imports cleanly. Designers can review and iterate on email designs in Figma rather than exporting flat PNGs from an email builder — and the handoff back to dev stays accurate.

Frequently asked questions

Does the component need to be deployed for the handoff?

Not for manual input. URL mode cannot fetch localhost or a private network. Export a complete HTML document with the CSS and assets it needs, verify that file in a browser, and load it into the plugin.

Will the designer be able to edit the output in Figma?

Editable mode creates native Figma layers for supported content; Pixel mode creates raster tiles. Designers can edit native nodes normally, but complex media, unsupported effects, and raster fallbacks are not individually editable.

How do I keep Figma in sync with the code as it changes?

Re-import the component each time a significant change is made. Because conversion and cleanup vary by component, developers can update the Figma frame at key milestones — after a PR is merged, before a design review, or whenever the designer needs to reference the current state of the product.

What about complex components with hover states or animations?

HTML to Figma captures a static rendered state. Prepare and import each important hover, open, loading, error, theme, or breakpoint state separately. Interactions and animations are not recreated automatically; build Figma variants and prototype links afterward when the handoff requires them.