Figma

The Zazz Figma kit holds every variable, text style, primitive, and component as native Figma resources. Use it as a starting file or connect it as a library across your team.

1. Get the file

Open the Zazz Figma Kit on the Figma community. Use Open in Figma to bring it into your drafts, then move or duplicate it to your team where you want it to live.

2. What's included

• Variables: theme, corporate, grayscale, typography, spacing, radius, and layout, organized by collection with light and dark modes attached at the variable level.
• Text styles: composed display, h1–h6, body xl–xs, and eyebrow styles. Each style pairs the variable-driven family, size, weight, tracking, and paragraph spacing.
• Components: a starter library of buttons, inputs, cards, badges, modals, and content blocks built from the system.

3. Connect as a library

To use Zazz across multiple Figma files:

1. In the Zazz file, open the Libraries panel and publish the file as a library.
2. In any file where you want Zazz available, open Libraries and enable the published Zazz library.
3. Variables, text styles, and components are now in the inserts panel of every connected file.

4. Customize

Override variables at the file level to rebrand. The library file is the source of truth for structure; individual project files can re-target variable values for their specific brand without disturbing other projects on the same library.

Line-height is the one typography token that doesn't live in Variables yet (Figma's Variables don't yet support line-height). It's carried on each text style as a paragraph property until that support lands.

Where to next