Figma

HeroUI Pro includes exclusive Figma resources to keep your designs in perfect sync with code.

What's Included

• Pro component Figma file — Design files for all HeroUI Pro components, matching the exact anatomy, variants, and slots available in code
• Figma theme variables plugin — Sync your supported HeroUI theme variables directly into Figma, so design tokens stay consistent between your codebase and design files

Download

Figma Sync Plugin

The Figma Sync Plugin lets you push your custom themes from the HeroUI Theme Builder directly into the HeroUI Figma design system — keeping supported design tokens and code variables perfectly in sync. It works with supported OSS and Pro themes.

How it works

1. Create or customize a theme in the Theme Builder and copy the CSS
2. Open the HeroUI Sync plugin inside a Figma file
3. Paste the CSS output from the Theme Builder in the plugin
4. Sync — your supported Figma variables, including colors, radius, and spacing, update instantly

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.
• Treat code as the source of truth — create and maintain your themes in the HeroUI Theme Builder, then sync those variables into Figma with the plugin.
• Duplicate first — run the plugin in a duplicated Figma file first, check that everything looks right, then sync your main file.

Notes and limitations

• Font family changes are manual. In Figma, open the Variables panel, go to the Typography collection, and update the font variable.
• Shadow styles also require a manual update in Figma.
• Brutalism, Glass, and Mouve Pro themes are not supported yet.

HeroUI OSS Figma

Looking for the free HeroUI OSS Figma kit? It's available on the Figma Community:

• HeroUI Figma Kit V3 (free, OSS components)