Material UI Support
Material UI components render correctly in Figma — sx props, styled() components, and theme variants included — with MUI-named Figma Variables and theme.ts write-back.
How it works
Inkbridge reads MUI styling the same way it reads Tailwind: statically, from your source. The scanner resolves sx props (responsive objects and theme callbacks included), styled() components, and the variant matrices you declare on the theme (components.MuiButton.variants), and renders each story as a native Figma frame. Tokens come from your MUI theme — palette, typography, spacing, shape — and become Figma Variables with MUI-native names like color/primary/main, so designers see the vocabulary MUI developers use. The round-trip works too: edit a palette color or radius in Figma's Variables panel and Push to Code patches the literals in theme.ts as a reviewable PR. Multi-theme setups are supported.
What the scanner reads
No annotations, no parallel styling source — the scanner resolves the MUI idioms you already write. Everything is read statically from your source files; Storybook does not need to be running.
sx props
Plain objects, responsive values ({ xs, sm, md }), and theme callbacks ((theme) => …) are resolved statically against your theme — spacing units, palette keys, and shape values all land at their real pixel and colour values.
styled() components
Components created with styled() are resolved to their declared styles, including theme access inside the style function. The wrapped component keeps its structure — a styled Button is still a Button.
Theme variant matrices
Variants declared on the theme (components.MuiButton.variants, styleOverrides, and your own variant props) are enumerated the way CVA variants are for Tailwind projects — each combination becomes a frame in the state matrix.
MUI-named Figma Variables
Tokens extracted from your theme keep MUI's own vocabulary in Figma. Designers see the names MUI developers use — not an internal translation — so a conversation about `primary/main` means the same thing on both sides of the loop. Multi-theme projects get the same treatment per theme.
- color/primary/main
- color/secondary/main
- color/text/secondary
- color/background/default
- radius/shape
Push to Code: theme.ts write-back
The round-trip targets your theme file, not a generated artifact. With the token source mode on `auto` (or set to `mui` explicitly), editing a palette colour or radius in Figma's Variables panel and clicking Push to Code patches the literals in your theme.ts — palette colours and `shape.borderRadius` today — and opens a pull request, exactly like the CSS round-trip for Tailwind projects. Multi-theme setups are patched per theme, and values the patcher can't safely rewrite (computed expressions, imported constants) are skipped and reported instead of guessed.
Usage
- 1
Write MUI components and stories as you normally would — sx props, styled() components, and theme variants all work; no annotations needed.
- 2
Run 'Generate Design System Page' — each story renders as a Figma frame with your theme's palette, typography, spacing, and shape applied.
- 3
Design tokens become Figma Variables with MUI-native names (color/primary/main, color/text/secondary) — per theme, when you define more than one.
- 4
Leave the token source mode on `auto` (it detects the MUI theme) or set it to `mui` explicitly in plugin Settings.
- 5
Edit a palette color or radius in Figma and click 'Push Tokens to Code' — the plugin patches the theme.ts literals and opens a PR.
The verified surface lives in the inkbridge MUI starter — Next.js 16, Material UI v9, and Storybook, with a committed `.mcp.json` and the Inkbridge routes pre-wired. It is a 1:1 port of the Tailwind starter, so the two stacks can be compared side by side.