How do I export different MUI component variants to Figma?

Use React DevTools to change the variant prop (e.g., variant='contained', variant='outlined', variant='text' for a Button) while the app is running. Each time you change the prop, the component re-renders in the browser. Copy the outerHTML of each variant and import them separately into html2design to build a complete Figma component variant set.

Can I export MUI theme colors to Figma design tokens?

MUI theme tokens (palette.primary.main, palette.secondary.main, etc.) are applied to components as computed CSS values in the browser. When you copy a rendered MUI component and import it into html2design, the Figma output contains the actual hex color values — not token references. To recreate the token structure in Figma Variables, note the hex values from the imported layers and map them manually to Figma Variable aliases.

Material UI to Figma — Convert MUI Components to Figma

Material UI to Figma —
No Extension Needed

Converting MUI components to Figma means running your React app, opening the component in your browser, and copying the rendered HTML into the html2design plugin. MUI's emotion CSS-in-JS, theme tokens, and variant props are all resolved by the browser before the plugin reads a single character — so Figma gets pixel-accurate fills, spacing, and typography from your real design system.

What is "Material UI to Figma"?

"Material UI to Figma" (also written "MUI to Figma") describes the process of exporting a rendered MUI component — including its emotion-resolved styles, theme palette colors, and variant props — 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.

MUI v5+ uses emotion to generate scoped CSS class names at runtime. These class names are injected into the document's <style> tags and resolved to computed values by the browser. By the time you copy the rendered HTML from DevTools, all emotion rules have been applied — html2design receives a fully resolved snapshot with real colors, spacing, and typography values from your MUI theme.

The MUI to Figma workflow

Four steps. Works with MUI v5, MUI v6, emotion-based themes, and any MUI component.

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 MUI component you want to export. No staging environment or live URL needed.

If the component depends on data from an API or Redux/Zustand store, ensure the app is in the desired state before capturing. Use React DevTools to inspect and modify props or context values if needed.

Step 02

Copy the component's rendered HTML

Open DevTools (F12) and locate the MUI component's root element in the Elements panel. MUI components render as semantic HTML elements (e.g., <button class="MuiButton-root...">) with emotion-generated class names already applied.

Right-click the root element → Copy > Copy outerHTML. For a full card or section, select the outermost container. Emotion's scoped styles are fully resolved at this point — the HTML you copy includes the correct computed class values.

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 calculated — MUI theme colors, elevation shadows, border-radius values, and typography are all resolved before the plugin processes the markup.

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

Step 04

Export each variant and hand off to your designer

For components with multiple states or variants, use React DevTools to change variant, color, or size props and repeat the export for each. Import all variants into the same Figma frame to build a complete variant set.

Share the Figma frame with your designer. Because the frames were generated from the live app — not a wireframe — designers see the same colors, spacing, and content your users see. They can annotate, iterate, and propose changes without needing to run the dev server.

MUI-specific tips for Figma exports

Emotion, MUI theming, and component variants all interact with html2design in predictable ways.

Emotion CSS-in-JS is transparent to html2design

MUI v5+ uses emotion to inject scoped CSS rules at runtime. By the time you copy the rendered HTML from DevTools, emotion has already applied all rules and the browser has computed the final CSS values. html2design reads computed CSS — not emotion class names or CSS-in-JS rules — so all MUI components import with their correct visual properties regardless of the emotion cache or theme provider configuration.

Capture variant props with React DevTools

MUI's variant system (e.g., variant="contained", variant="outlined", variant="text") produces visually distinct renders. Use the React DevTools browser extension to change prop values on a live component without modifying source code. After changing a prop, the component re-renders — copy the new outerHTML and import it as a separate frame in Figma.

MUI theme palette colors resolve to hex values

MUI's theme system exposes palette tokens like palette.primary.main and palette.secondary.main. These are applied to components as CSS custom properties or direct computed values. By the time the component renders, the browser has resolved these to their actual hex values. The Figma import reflects those exact hex fills — your design system colors appear in the right place without manual color-matching.

Dark mode: toggle the MUI theme before copying

If your app uses MUI's ColorModeContext or a dark-mode toggle, switch to dark mode in the running app before copying the component's HTML. The browser re-renders the component with dark-mode-specific palette values resolved. Copy the outerHTML in dark mode to import a dark-mode variant into Figma. Export light and dark separately to build a complete Figma Component Variant set.

What lands in Figma from a MUI component

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

Theme palette colors as real Figma fills

MUI's palette.primary.main, hover states, and disabled tints are resolved by the browser to exact hex values. Those values become Figma fill colors — no manual color-matching required.

MUI elevation shadows in Figma

MUI's elevation system (Paper, Card, Dialog) uses computed box-shadow values. html2design reads these and generates Figma Drop Shadow effects with accurate x/y offsets, blur, and color.

MUI Typography as real text layers

MUI's typography variants (h1–h6, body1, body2, caption) render with specific font sizes, weights, and letter-spacing from the theme. These values become real Figma text layer properties — no guessing, no manual font-size entry.

Grid and spacing system preserved

MUI's spacing scale (8px base unit) produces computed padding and margin values. The Figma import reflects those exact pixel values in frame padding and auto-layout gaps.

Frequently asked questions

How do I convert a Material 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. The plugin generates native Figma layers with MUI theme colors and spacing already resolved.

Does MUI's emotion CSS-in-JS work with html2design?

Yes. Emotion injects scoped CSS rules at runtime and the browser resolves them to computed values. html2design reads those computed values — not emotion class names — so MUI components import with accurate fills, spacing, and typography regardless of the emotion configuration.

How do I export different MUI variants (contained, outlined) to Figma?

Use React DevTools to change the variant prop on the live component. After each prop change, copy the re-rendered outerHTML and import it as a separate frame in html2design. Arrange all variants side by side in Figma to document the complete component variant set.

Can I export MUI theme colors as Figma Variables?

html2design imports the resolved hex values from the browser — not MUI token references. To recreate the token structure, note the hex values from the imported Figma layers and manually create Figma Variables mapped to those colors. For a one-time migration, the imported colors match your theme exactly.

Does this work with MUI v6?

Yes. MUI v6 uses the same emotion-based approach. The html2design workflow is identical: serve the app, copy the rendered HTML, paste into the plugin. Both v5 and v6 produce the same kind of computed CSS that html2design reads.