How to Import a Component Library into Figma

Why You Need This Workflow

Many engineering teams build component libraries before — or without — a dedicated design system in Figma. The components exist in code, render correctly in the browser, and are used across the product. But there's no Figma file to hand off to designers, no shared library for the design team to extend, and no visual documentation of what the library actually looks like.

The manual path — recreating every button variant, every form state, every card layout from scratch in Figma — is prohibitively slow. A 40-component library with 3–5 variants each means 120–200 individual frames to draw by hand. At 20–40 minutes per frame, that's weeks of work.

html2design cuts that to hours. You render the component in a browser, copy its outerHTML from DevTools, paste it into the plugin, and get a native Figma frame with preserved typography, spacing, colors, and borders. One component in under 60 seconds.

Prerequisites

• The html2design plugin installed in Figma ($12/mo or $96/yr)
• A component render environment: Storybook, a dev server, or static HTML pages
• Browser DevTools (Chrome, Firefox, or Edge)
• A Figma file to use as your component library destination

Phase 1: Audit and Categorize Your Library

Before importing, build a complete inventory of your components. Group them into tiers to prioritize the import order:

• Tier 1 — Atoms: Button (all variants), Input, Textarea, Checkbox, Radio, Toggle, Badge, Icon, Avatar, Tag
• Tier 2 — Molecules: Card, Form group, Alert, Toast, Modal, Dropdown, Tooltip, Accordion, Tab
• Tier 3 — Organisms: Navigation bar, Sidebar, Header, Footer, Data table, Form
• Tier 4 — Templates: Page layouts, dashboard shells, auth screens

Import Tier 1 first. These are the most reused components — getting them into Figma quickly unlocks the most value for designers. Tier 4 can often wait or be assembled from already-imported atoms and molecules.

For each component, list the variants you need: states (default, hover, disabled, error), sizes (sm, md, lg), and themes (light, dark). Each variant will be a separate import pass.

Phase 2: Set Up Your Render Environment

You want each component rendered in isolation — no page chrome, no sidebar, no competing styles. Clean isolation produces cleaner Figma output.

The cleanest option is Storybook's canvas view. If you don't have Storybook, create a simple HTML test page that renders one component at a time:

Using a white or neutral background is important — html2design reads background fills from the rendered output, so a dark or patterned page background can pollute the imported layer.

Phase 3: The Import Workflow

Phase 4: Organize and Clean Up in Figma

Once you've imported a full component group (e.g. all button variants), organize the Figma file:

• One page per component group — Page: Buttons, Page: Inputs, Page: Cards. This makes navigation fast and prevents the canvas from becoming overwhelming.
• Frame → Component — Select each imported frame and press Cmd+Alt+K (Create Component). Set properties and variants as needed.
• Group variants with Combine as Variants — Select all variants of a component, right-click → Combine as Variants. Figma creates a component set automatically.
• Add Auto Layout — Many imported frames use fixed positioning. Review each component and apply Auto Layout where the design should be fluid.

Phase 5: Extract and Apply Design Tokens

html2design preserves the rendered CSS values — your exact colors, spacing, and typography — in the imported layers. This makes it straightforward to extract design tokens and set up Figma Variables:

1. Select a component and inspect the layers to find recurring values. Your primary color, border radius, and spacing scale should appear consistently across multiple layers.
2. In Figma, open Local Variables and create your token groups: Color, Spacing, Radius, Typography.
3. Manually enter the token values from your codebase (or read them from the imported layers — they should match your CSS custom properties).
4. Apply Variables to the imported component layers by selecting fills, strokes, and spacing values and linking them to the corresponding Variable.

This is the most time-intensive step, but it's a one-time setup. Once Figma Variables are applied, your library becomes truly token-driven — changing a color Variable updates every component that uses it.

Phase 6: Publish as a Figma Library

Once your components are imported, cleaned up, and token-linked:

1. Open Assets → Team Library in Figma.
2. Click Publish. Figma publishes all components and styles in this file as a shared library.
3. Other team members can now enable this library in their files and use your components via the Assets panel.

Going forward, when engineers ship changes to a component, re-import the updated HTML to get a fresh Figma version, compare with the existing component, and update the library. This keeps design and code in sync without a full manual rebuild.

Frequently Asked Questions

How do I import a React component library into Figma?

Render each React component in a browser (Storybook is ideal — use the canvas view), copy the rendered outerHTML from DevTools, and paste it into the html2design plugin. React renders to HTML, so the plugin sees computed CSS regardless of whether the component uses Tailwind, CSS Modules, styled-components, or Emotion.

Can I import design tokens along with the components?

html2design preserves the rendered CSS values of each imported component. The colors, spacing, and typography in the Figma layers will match your token values exactly. You then create Figma Variables manually with those same values and apply them to the imported layers. It's two steps, but the imported values make the setup much faster — you're not guessing.

What about component interactions and hover states?

html2design imports a static snapshot — what the component looks like in one state at the time you copy the HTML. For interactive states (hover, focus, active, disabled), you import each state separately by triggering the state in the browser before copying. In Figma, combine these as Variants to create interactive prototypes.