Figma Plugin Sync

HeroUI Theme Sync for Figma is now available. Sync custom HeroUI themes from the Pro Style Guides directly into your HeroUI Figma files, keeping supported design tokens aligned between code and design.

What's New

• Style Guides → Figma — Create or customize your theme in the Style Guides, 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

1. Create or customize a theme in the Style Guides and copy the CSS
2. Open the HeroUI Theme Sync plugin inside your Figma file
3. Paste the CSS output from the Style Guides
4. 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.

Links

• HeroUI Theme Sync on Figma Community
• Figma setup guide
• Style Guides