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 HeroUI theme variables (colors, radius, spacing, shadows) 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 design tokens and code variables perfectly in sync. It works with both OSS and Pro themes.

How it works

1. Create or customize a theme in the Theme Builder
2. Open the HeroUI Sync plugin inside Figma
3. Connect your account and select a theme
4. Sync — your Figma variables (colors, radius, spacing, shadows) update instantly

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)