Figma Plugin Sync
Sync custom HeroUI themes from the Pro Theme Builder into your Figma files — keeping supported design tokens aligned between code and design.
May 2026
HeroUI Theme Sync for Figma is now available. Sync custom HeroUI themes from the Pro Theme Builder directly into your HeroUI Figma files, keeping supported design tokens aligned between code and design.
What's New
- Theme Builder → Figma — Create or customize your theme in the Theme Builder, then paste the generated CSS into the Figma plugin
- Supported token sync — Sync supported variables like colors, radius, and spacing into your Figma file
- OSS and Pro files — Works with supported OSS and Pro Figma files
How it works
- Create or customize a theme in the Theme Builder and copy the CSS
- Open the HeroUI Theme Sync plugin inside your Figma file
- Paste the CSS output from the Theme Builder
- Sync — supported Figma variables update to match your theme
Before you sync
- Use the right Figma file version — Community files require HeroUI Figma Kit v3.0.3 or newer. Pro files support the plugin from their initial versions, but we recommend using the latest files for minor updates and fixes.
- Duplicate first — Try the plugin in a duplicated file first, check that everything looks good, then sync your main file.
- Manual updates still required — Font family and shadow styles need to be updated manually in Figma.
- Premium themes — Brutalism, Glass, and Mouve Pro themes are not supported yet.
This is the first version of the Figma plugin, so feedback is very welcome.