Token Export (CSS & MUI theme)
Design tokens sync from your CSS custom properties or your MUI theme.
How it works
After editing tokens in Figma, Push to Code creates a PR using the configured source mode. In `css` (default), the CSS token file is targeted — the plugin surgically patches the custom properties. In `mui`, the plugin patches your theme.ts literals directly — palette colors and shape.borderRadius today, multi-theme setups included. The plugin also shows the active token source (file + mode) so teams can verify exactly which source was used.
Usage
- 1
Edit or create variables in Figma's Variables panel.
- 2
Open plugin Settings and choose token source mode: `css` (default) or `mui`.
- 3
Set the token path for the source mode you want to target (the MUI theme path defaults to `src/theme.ts`; CSS auto-discovers `globals.css`/`tokens.css`).
- 4
Click 'Push Tokens to Code' to auto-detect token changes for this run (use 'Detect & Sync Changes' only when you want a manual preflight).
- 5
If no token diff exists, the plugin reports that everything is already in sync instead of creating an empty PR.