10 uses for variables beyond light and dark mode

Validation styling

I have a whole other blog post detailing out how this works. And if you're wondering "how do you make this happen with dark mode? I only have 4 modes!", wonder no more! I have a workaround (read the other post).

Asset availability

Credit to Nathan Curtis for this one. The idea is that you can provide your library consumers with a visual aid of which assets are stable, and which are about to be deprecated. The best way for them to do this is to set this mode at the Page level:

GIF showing how to set modes at the Page level

Once that mode is set, any components that have a visible <span class="figma-component">asset availability</span> layer (I would make this into a non-published component, and absolute position instances of it within UI components) will reveal their "to be deprecated" styling:

On the design system side, component librarians just show the <span class="figma-component">asset availability</span> layer, and publish that change.

Breakpoints

If you're only supporting web browser experiences, it's safe enough to name your modes after devices (they shouldn't be conflated as 1:1). If you're taking a mobile-first approach, make sure the first mode in your collection is named accordingly:

But if you need to support other devices (smart TVs, car dashboards, digital kiosks, on-hardware displays, etc), you ought to explicitly define pixel values:

Modes:

  • <=740px (default)
  • 741px - 1200px
  • 1201px - 1440px
  • >=1441px

Brand

Promotions

Does your product offer seasonal discounts? Don't limit your thinking to the big winter holidays either. There's Presidents' Day in February, Ford Truck Month at the end of Q1, St. Patrick's in March, etc. Notice in my example image that this mode could be applied to a specific section within a screen (rather than the entire screen).

Subscription level

Certain subscription levels might unlock gated content and UI elements. In this example mockup, you can see "enterprise" mode applies a discount, waives the shipping fee, and reveals a "you saved..." message.

Modes: None, Professional, Organization, Enterprise

Loyalty status

Some elements within a products' UI may alter based on the user's loyalty status. A "Gold" tier user's saved payment information may be styled in a more luxe fashion than a user who isn't part of the loyalty program at all. You could also use these to swap out graphics and loyalty-program brand elements in the interface.

Modes: None, Silver, Gold, Platinum

Logged in / logged out

Products that offer a logged in experience also need to reflect the logged out state too. Some navigational items or other gated content may not be available until the user creates an account, or logs in.

Modes: None, Logged in, Logged out

Density

Interface density can affect things like padding values and spacing values. Gmail gives users control over the interface density of their inboxes.

Contrast

Contrast modes can be used to increase or decrease legibility of and distinction between foreground and background elements.

Modes: Default, Low, High

<div class="horizontal-rule"></div>

Did I miss anything? Write me to let me know! I'd love to keep this list-style post up to date with ideas for how to make the most out of Figma's variables feature.