Global variants

Earlier we describe variants, which are always specific to a component. For instance, the primary variant of a button.

However, if you want to re-theme the entire app, such as adding a “Dark mode,” you probably want to change many components together.

Global variants are similar to normal (component-specific) variants, in that components can appear differently in different global variants. However, global variants themselves are global to the entire project, meaning that any component can have specific style settings defined under a single “Dark mode” variant.

Besides dark mode, there are many other use cases for global variants, where you want many components in the app to change together:

  • platform—web vs. iOS vs. Android
  • screen size—mobile vs. desktop
  • palette—light mode vs. dark mode vs. sepia vs. high-contrast dark
  • locale—LTR vs. RTL languages
  • brand—Facebook vs. Instagram vs. WhatsApp, or Material vs. Cloud Material
  • configurations—Gmail roomy vs. dense

For instance, a global variant for iOS vs. Android might switch over the look of many components:

This is a particularly powerful feature for designing robust design system components that allow designers to view their designs across multiple contexts.

To create and manage global variants, select into any component to bring up the floating variants panel, and in the bottom section you’ll see the global variants listed, with the ability to create more.

You can then set any artboard to render its contents in the context of some global variant(s).

Responsive design using screen variants

There’s a special global variant group called “Screen” variants, built in to all projects. These are treated specially because they can specify min and max viewport widths at which they kick in. For instance, if you’re doing mobile-first design but want to make adjustments for the desktop, you can create a screen variant called “Desktop” that activates on devices over 300px wide. Then, whenever you have an artboard that is over 300px, this Desktop variant will be automatically shown by default.

To learn more, see responsive design using screen variants.

Was this page helpful?

Have feedback on this page? Let us know on our forum.