🎛️ Headless Button System

Designing a lean, future-proof component that scales without the bloat

Background & Challenge

Memory errors

When a product design system/library crossed a few hundred components, every additional button variant starts to hurt, a lot. Figma’s memory ceiling of 2GB (and sluggish variant-picker UI) turned routine updates into five-second waits. And if you don't have a plan to move out of it, your entire design system will break Figma, something I've experienced.

Headless UI

There is a concept called Headless UI within code, where you abstract the visual styling of a component and its properties. That is in some cases called theming. To create that within Figma, with consistency is a very, very time to consuming exercise.

Maintaining variants

Maintaining a matrix of style × state × size × color × brand is daunting when your library starts to grow. So the goal for this exercise was clear:

• Keep every visual possibility designers need.
• Slash the variant count so files stay lightning-fast.
• Hand developers a component they can wire-up without digging for specs.

Solution Overview

I rebuilt the buttons as a headless system: a single base component whose appearance is controlled entirely by Variables & Modes, not by duplicating frames.

Palette (Transparency)

• Full
• Primary
• Secondary
• Disabled

Branding

• 1
• 2
• 3
• 4

Brand

• Brand
• Neutral

Semantic

• Success
• Warning
• Error
• Info

Color Mode

• Light
• Dark

Type

• Filled
• Outlined
• Link

Style

• Flat
• Gradient

Size

• Small
• Medium
• Large
• XLarge

Comparison & impact

If I would create the button above with variants, that would've taken me:

4 x 2 x 3 x 2 x 4 x 2 x 4 x 4 = 6,144 variants to maintain

With the variable system I've created, I only have 6 variants.

Here I'm using the Figma plugin Variable visualiser to visualise the relationships between all variables & modes.

Automatic Stickersheet creation

Using this wonderful plugin, I can automatically create sticker sheets if the team/organisation I'm working doesn't want to pay for Dev Mode for the developers.

Dev mode

During all my years, something I've noticed is that most designers have no idea what a developer actually needs from us. Also, if not done correctly, you will have to extend onboarding for both designers and developers.

So in this project I applied good handover techniques:

• 📝 Added a comprehensive description with examples. If you don't know what to write, seek help from LLM, here is an example I made for you.
• 🔖 Annotations (add more context around the component). Inline call-outs explain which variables map to token names in code.
• 📐 Rulers & redlines (around each state). Auto Layout rulers appear on hover, so devs can grab spacing without opening Inspect.
• 💾 Dev resources section (top right corner). Links to Storybook stories, Chakra UI tokens, and a ready-to-drop React snippet live inside the component description for one-click access.

Variables → Design tokens

For this project I exported all my Figma Variables into Design Tokens, using this plugin, which outputs an json file; something I would then provide to the developers in my team.

States & Animations

There are some minor micro animations when going from different interaction state: default → hover → focus, and back again.

Prototype & changing modes on click

You can as user of this prototype change and modify the stylistic appearance of the components as easy as just clicking.

Bugs in Figma

There seems to be bugs in Figma when pressing these buttons. They work well in Design mode of Figma. But in Prototype mode, the seem to not behave as intended. Which can be seen in the image below:

Lessons & Next Steps

1. Variables ✨ magic: They need naming discipline; a rogue “Primary 2” color can wreck themes. So, the maintenance of variants are moving towards the variable system in such a case that I've presented.
2. Document the headlessness: New team-mates may look for variants that aren’t there. An onboarding loom video saved hours.
3. Extend the pattern: The same headless approach should then be applied and rolled out to inputs, badges, and tabs.