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.

Working with Tailwind CSS

Tailwind compiles to standard CSS at build time. When you copy a rendered component's outerHTML, the browser's DevTools shows the component with all computed styles applied — the pixel values behind utilities like text-gray-900, p-6, or rounded-xl are already resolved.

html2design reads these computed values, not the utility class names. So whether your component uses Tailwind, styled-components, CSS Modules, or vanilla CSS, the output in Figma looks the same: resolved color values, exact spacing in pixels, and typography properties mapped to Figma text styles.

Capturing different component states

React components often have multiple visual states: a default state, a loading state, an error state, a selected state. Each needs to be captured separately. The workflow for each is the same — trigger the state in the browser (fill in a form, click a toggle, add a query param), then copy the HTML from DevTools.

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 — render to HTML that you can capture in exactly the same way. The fact that a component is server-rendered doesn't matter; by the time you inspect it in DevTools, the browser has received and painted the final HTML. Copy it and paste it into html2design the same way you would for a client-side React component.

What Gets Converted from React Components

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

• Flexbox layouts → Figma Auto Layout, including direction, gap, padding, and alignment
• 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 Auto Layout (partial support)
• 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. React renders to HTML and CSS in the browser. You copy that rendered output using DevTools and paste it into the html2design Figma plugin. No special React plugin or code annotation is needed.

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. Open the story in Canvas mode, inspect the component in DevTools, copy its outerHTML, and paste it into html2design. Because Storybook runs on localhost:6006, URL-based tools can't reach it — the code-paste method is the only approach that works.

Does html2design preserve Tailwind CSS from React components?

Yes. Tailwind utilities are compiled to standard CSS, and when you copy a rendered component from DevTools, all computed styles are included. html2design reads those resolved values — not the class names — so Tailwind, styled-components, CSS Modules, and plain CSS all work the same way.

What about importing a full React page into Figma?

You can — the workflow is the same. Copy the page's outerHTML (or just the main content area) from DevTools and paste it into html2design. 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.