How to manage themes and modes in BBUI

Theming enables companies to run multiple products under a single design system in Figma. This makes scaling and building more convenient and organised for the product team.

At Boiling Brains, we already use this approach with one of our clients and would like to share a quick walkthrough of how this setup works in BBUI.

Managing themes in BBUI

In BBUI, themes are managed through a dedicated set of variables found in the Variables panel.

Navigate to Themes, duplicate the existing theme node, and apply changes based on your use case. Keep in mind that Theme is the foundational layer on top of Tailwind, meaning each theme inherits Tailwind primitive variables by default.

This allows you to build on top of a solid base instead of redefining everything from scratch.

Neutral tones

Every mature designer knows how important it is to choose neutrals carefully.

If your primary color is based on a blue shade, your neutral palette should also carry a subtle blue tint. This keeps the UI visually consistent and avoids clashes between primary and supporting colors.

Because BBUI uses Tailwind primitives under the hood, adjusting neutrals becomes straightforward. You can swap or fine-tune neutral tones based on your primary or default color choice.

Neutrals are also the backbone for both light and dark modes, so getting them right early pays off later.

Defining themes and modes in the Figma UI

Once you’ve created a new theme and adjusted it for your project, it’s time to apply it. Figma makes this part simple. Close the Variables panel and apply the theme either at page level or frame level.

Page-level theming

Navigate to the right sidebar and look for the Page section. You’ll see a swatchbook icon. From there, you can select the theme and mode you want to use. Choose the theme you added and see the changes applied instantly.

Frame-level theming

To apply theming to a specific frame, select the frame and look for the Appearance section in the right sidebar. Trigger the same swatchbook icon to choose a theme and mode for that frame only.

This allows you to mix themes and modes within the same file when needed.

Summary

From a design perspective, there is no manual setup required. The system manages themes and modes for you, in the same way development libraries handle them in code.

If you’re designing late at night and prefer working in dark mode, you can simply enable it. You can also apply dark mode selectively to specific frames or modules you want to emphasise from a UX perspective.

We don’t design with black or white colors.
We design within a theme that can be rendered as light or dark depending on the use case.