How do I export Chakra UI design tokens to Figma?

When you import a Chakra component with html2design, the Figma output contains the resolved hex values from your Chakra theme — for example, 'blue.500' becomes its actual hex color. To recreate the token structure in Figma Variables, note the hex values from the imported layers and manually map them to Figma Variable aliases. For a complete token export, consider building a Chakra theme reference page (all color swatches rendered) and importing that page into html2design to capture the full palette.

Can I capture Chakra UI dark mode variants in Figma?

Yes. If your app uses Chakra's useColorMode hook or a color mode toggle, switch to dark mode in the running app before copying the component's outerHTML. The browser re-renders the component with dark-mode tokens resolved. Copy the outerHTML in dark mode and import it as a separate frame in html2design to create a dark-mode variant alongside your light-mode import.

Chakra UI to Figma — Convert Components to Figma Designs

Chakra UI to Figma —
No Extension Needed

Converting Chakra UI components to Figma means running your React app, opening the component in your browser, and copying the rendered HTML into the html2design plugin. Chakra's style props, design token system, and color mode are all resolved by the browser before the plugin reads a single character — so Figma receives accurate fills, spacing, and semantic token colors from your real theme.

What is "Chakra UI to Figma"?

"Chakra UI to Figma" describes the process of exporting a rendered Chakra UI component — including its resolved style props, semantic token colors, and color-mode-specific values — into a native Figma design that can be edited, annotated, and used as a designer handoff artifact. The html2design Figma plugin enables this by accepting raw HTML from your browser's DevTools and generating editable Figma frames from the computed output.

Chakra UI's style prop system ( p, bg, rounded, shadow) maps shorthand props to standard CSS at runtime. ChakraProvider resolves semantic token names like blue.500 to their actual color values. By the time you copy rendered HTML from DevTools, all of this is already computed — html2design receives a fully resolved snapshot with real hex values, pixel measurements, and typography.

The Chakra UI to Figma workflow

Four steps. Works with Chakra UI v2, Chakra UI v3, Ark UI, and any Chakra component or custom theme.

Step 01

Serve the React app locally

Run npm start, vite, or your project's dev command and navigate to the route or page containing the Chakra UI component you want to export. No staging environment or live URL needed.

If the component depends on API data or context state, ensure the app is in the desired visual state before capturing. Use React DevTools to inspect and modify component props or Chakra context values if needed.

Step 02

Copy the component's rendered HTML

Open DevTools (F12) and locate the Chakra component's root element in the Elements panel. Chakra components render as standard HTML elements (e.g., <button class="chakra-button...">) with all style props already applied as computed CSS.

Right-click the root element → Copy > Copy outerHTML. Chakra's semantic token colors (like blue.500) are resolved to their hex values by ChakraProvider at this point. The HTML you copy contains only computed CSS — no Chakra prop names or token aliases.

Step 03

Paste into html2design and generate Figma layers

Open Figma, run the HTML to Figma plugin, paste the copied HTML, and click Generate. The plugin reads computed styles the browser already resolved — Chakra token colors, spacing scale values, border-radius, and shadow definitions all land correctly in Figma.

The output is a native Figma frame with real text layers, accurate fills from your Chakra theme, and a layer hierarchy that matches your component structure. Not a screenshot — an editable design.

Step 04

Capture color modes and hand off to your designer

If your app supports dark mode via Chakra's useColorMode, toggle to dark mode in the running app and repeat the export. Import both light and dark variants into html2design to build a complete Figma Component Variant set.

Share the Figma frames with your designer. Because they were generated from the live Chakra app, designers see the same token colors and spacing your users see — not approximations. They can annotate, iterate, and propose changes without running the dev server.

Chakra UI-specific tips for Figma exports

Chakra's style props, token system, and color mode all behave predictably with html2design.

Style props resolve to standard CSS

Chakra style props like p={4}, bg="blue.500", rounded="lg", and shadow="md" are processed by ChakraProvider into standard CSS rules. The browser computes those rules to final values — pixel measurements, hex colors, specific box-shadow values. html2design reads only computed CSS, so all Chakra style props import correctly without any special handling.

Semantic token colors land as exact hex fills

Chakra's token system maps names like blue.500, gray.100, and teal.400 to their actual hex values via ChakraProvider. By the time you copy the rendered HTML, every color token has been resolved. The Figma import contains the correct hex fills — the same colors your users see. No manual color-matching or color picker work required.

Dark mode: toggle in the app before copying

Chakra's useColorMode hook and ColorModeButton switch the entire app between light and dark token sets. Toggle to dark mode in your running app, then copy the component's outerHTML. The browser will have re-resolved all _dark style overrides. Import the dark HTML as a separate frame in html2design alongside the light import.

Chakra v3 / Ark UI uses CSS variables — same workflow

Chakra UI v3 (built on Ark UI) shifted from emotion CSS-in-JS to a CSS custom property token system. CSS variables are set on the :root element and resolved by the browser to their computed values. html2design reads those computed values, so the workflow is identical for v2 and v3 — the implementation difference is invisible from the DevTools HTML perspective.

What lands in Figma from a Chakra UI component

Native Figma objects — not screenshots, not plugin wrappers, not embedded iframes.

Token colors as accurate Figma fills

Chakra token colors (blue.500, gray.700) resolve to their exact hex values in the browser and appear as correct Figma fill colors in the import.

Chakra shadow values in Figma

Chakra's shadow tokens (shadow="sm", shadow="xl") render as computed box-shadow values. html2design generates Figma Drop Shadow effects with accurate parameters.

Spacing scale as real Figma dimensions

Chakra's spacing scale (4px base unit for Chakra v2; 4px for v3) produces computed padding, margin, and gap values that map to Figma frame dimensions and auto-layout spacing.

Typography tokens as real text layer properties

Chakra's typography system (font sizes, font weights, letter spacing) is applied via style props and rendered to computed font property values. These values become real Figma text layer properties — font size, weight, and line height — in the output.

Frequently asked questions

How do I convert a Chakra UI component to Figma?

Serve your React app locally, navigate to the component in your browser, open DevTools (F12), copy the component's outerHTML from the Elements panel, and paste into html2design in Figma. Chakra's style props and token colors are already resolved to computed CSS values before you copy — the Figma output reflects your real theme.

Do Chakra UI style props work with html2design?

Yes. Chakra maps style props to standard CSS rules at runtime. The browser resolves those rules to computed values — pixel measurements and hex colors — before html2design reads the markup. Style prop shorthand like p={4} becomes padding: 16px in the import.

How do I export Chakra design tokens to Figma?

html2design imports resolved hex values — not token names. To recreate the token structure as Figma Variables, import a Chakra theme reference page (all swatches rendered) and note the hex values from the Figma output. Then create Figma Variables with those hex values and the corresponding Chakra token names.

Can I capture Chakra dark mode variants?

Yes. Toggle dark mode in your running Chakra app using its color mode button or useColorMode. The browser re-renders with dark token values resolved. Copy the outerHTML in dark mode and import it into html2design as a separate frame alongside your light-mode import.

Does this work with Chakra UI v3 and Ark UI?

Yes. Chakra v3 uses CSS variables instead of emotion CSS-in-JS. Both approaches produce computed CSS values the browser resolves before html2design reads the markup. The workflow is identical for v2 and v3.