HeroUI Theme Sync

HeroUI Theme Sync keeps your Figma files perfectly in sync with your HeroUI design tokens — no manual updates, no drift between design and code.

Customize your theme, copy the CSS output, paste it into the plugin, and hit Sync. The plugin reads every token in the CSS and writes it straight into the current Figma file as variables and styles, creating anything that doesn't exist yet.

How to use it1. Build your theme at heroui.pro2. Copy the generated CSS3. Open this plugin inside your HeroUI Figma library or any file (it creates HeroUI variables and styles automatically)4. Paste the CSS and click "Sync Figma"The plugin will sync:• Color variables• Radius variables• Light and dark modes• Spacing scale• Font sizes, line heights, and letter spacing• Chart colors• Disabled opacity• Field border widthIf you're serious about keeping design and engineering aligned across an entire system, not just colors then HeroUI Pro is what you want. Learn more at heroui.proNote: font family and shadows needs to be updated manually in Figma.

Built by the HeroUI team.