How to Convert React Components to Figma Designs

The React-to-Figma Problem

React teams face a workflow gap that gets more expensive the longer it's ignored. Your component library lives in code — a hundred components built up over years, styled with Tailwind or CSS Modules, tested in Storybook. But your design system in Figma is months behind. Designers work from stale mockups. New hires reverse-engineer the app to understand the actual UI.

The obvious fix is to pull the real components into Figma. But React components aren't static files you can drag and drop — they're JavaScript functions that need a browser to render. And most "React to Figma" tools require you to annotate your JSX or add a build plugin, which means touching every component in your codebase.

There's a simpler approach. React already renders to HTML and CSS. You can capture that output from any running React app — no code changes, no plugins, no build step — and convert it to editable Figma layers using html2design. The workflow takes about 30 seconds per component.

Why This Works

When a React component renders, the browser produces a standard HTML DOM with computed CSS styles. At that point, it's just HTML — the same HTML that any other website generates. The html2design Figma plugin processes raw HTML and CSS, mapping the structure and styles to native Figma layers.

This means the approach is framework-agnostic. It doesn't matter whether your app uses Create React App, Vite, Next.js, Remix, or a custom webpack setup. It doesn't care whether you use Tailwind, CSS Modules, styled-components, or plain CSS. What matters is the rendered output — and every React app produces that the same way.

Prerequisites

• A Figma account (free or paid)
• The html2design plugin installed from Figma Community
• An active html2design subscription ($12/mo or $96/yr)
• A running React dev server (localhost:3000, localhost:6006, or similar)

Step-by-Step: Convert a React Component to Figma

React-Specific Workflows

Converting Storybook stories

Storybook is the ideal source for component-level conversion. Each story renders a component in isolation with specific props — exactly what you want to capture. Open the story in Canvas mode, use the element picker to select the component root, and follow the steps above.

A practical workflow for teams building a design system: work through your Storybook component catalog systematically, converting one story per component variant (default, error, disabled, etc.), then build out the Figma variants from those captures.

For a full walkthrough of the Storybook-specific workflow — including handling the Docs tab, capturing multiple story variants, and building a Figma component library — see the Storybook to Figma use case.

Working with Tailwind CSS

Tailwind compiles to standard CSS at build time. html2design needs access to that generated stylesheet: use a public preview URL, or export a complete HTML document that includes the CSS. Copying only a rendered component's outerHTML keeps utilities such as text-gray-900, p-6, and rounded-xl as class names without embedding their rules.

html2design uses computed visual values rather than utility class names. Tailwind, styled-components, CSS Modules, and vanilla CSS all produce browser CSS, but Figma output still varies with fonts, unsupported effects, assets, and layout complexity.

Capturing different component states

React components often have multiple visual states: a default state, a loading state, an error state, a selected state. Prepare and import each state separately from a public preview or complete document.

In Figma, create each state as a separate captured frame, then combine them as Variants under a single Component. This gives you a Figma component library that mirrors your React component API.

Next.js and server-rendered components

Next.js components — both App Router and Pages Router — can be imported from a public route or a complete exported document. Server and Client Components are source abstractions; html2design still needs the rendered HTML, generated CSS, and required assets.

What Gets Converted from React Components

html2design accurately converts the vast majority of what React components produce. Here's what to expect:

• Flexbox layouts → Accurately positioned Figma frames (spacing, padding, and alignment preserved visually; Auto Layout not applied automatically)
• Typography → Font family, size, weight, line-height, letter-spacing, color, text alignment
• Colors → Fills, gradients, box shadows, borders — all preserved as Figma styles
• Border radius → Mapped from CSS or Tailwind values to Figma corner radius
• SVG icons → Native Figma vector paths, fully editable
• Background images → Captured as image fills where accessible
• CSS Grid → Approximated with nested frames (partial support; positions preserved, no Auto Layout)
• CSS animations → Static snapshot only; animation state not captured
• React state → You capture one state at a time; use multiple captures for variants

Compared to Dedicated React-to-Figma Tools

There are tools specifically marketed as "React to Figma" converters. Most work by parsing your JSX at the source level — reading component files, interpreting props, and generating Figma frames from the code structure rather than the rendered output.

This approach can automatically generate all component variants from a single pass, which is a real advantage at scale. The downside: these tools require you to add annotations or decorators to your components, they often lag behind the latest React patterns, and they struggle with complex CSS-in-JS setups.

The html2design approach is lower friction: no code changes, no annotations, no build pipeline integration. You work from the rendered browser output, which is always accurate regardless of how the component is built. The trade-off is that you capture states manually rather than automatically.

For most teams, the rendered-output approach is practical and fast enough. For teams that need to auto-generate hundreds of variants, a dedicated React introspection tool may be worth the setup cost. See our full comparison of HTML-to-Figma tools for more context.

Building a React Design System in Figma

Once you have a workflow for converting individual components, you can systematically build out a Figma design system that mirrors your React component library. A practical sequencing:

• Primitives first — buttons, inputs, badges, avatars. These are small, composable, and easy to convert and clean up.
• Compound components next — cards, modals, forms. These use the primitives you've already captured.
• Page sections last — hero, pricing, navigation. These are bigger and dirtier, but they're also used less often for component-level design work.

For each component, aim to capture the three or four most important states. Default, hover (captured by triggering the hover state via DevTools' Force element state feature), disabled, and error states cover 90% of what designers need.

Frequently Asked Questions

Can I convert a React component to Figma?

Yes. Use a public preview URL, or export a complete HTML document with its generated CSS and assets. No React-specific annotation is required.

Does React to Figma work with localhost?

Yes. html2design works from HTML you paste directly into the plugin — it doesn't need to reach a URL. Your React dev server on localhost:3000 (or any port) works exactly the same as a live URL. See our guide on converting HTML to Figma for the general workflow.

Can I convert Storybook stories to Figma?

Yes. Use a public isolated-story URL, or export a complete document with Storybook's global, decorator, component, and runtime CSS for manual input.

Does html2design preserve Tailwind CSS from React components?

Yes, when html2design can access the generated CSS. Import a public preview URL, or provide a complete HTML document with its compiled CSS. Copying an element's outerHTML alone preserves class names but does not embed Tailwind, styled-components, CSS Modules, or other external stylesheets.

What about importing a full React page into Figma?

You can. Use the public page URL, or export a complete page document with its CSS and assets. Full pages produce larger, denser layer trees. For design-system work, component-level imports are usually more useful. See our guide on importing a website into Figma for full-page strategies.