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).
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:
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.
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:
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).
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.
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.
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.
Interface density can affect things like padding values and spacing values. Gmail gives users control over the interface density of their inboxes.
Contrast modes can be used to increase or decrease legibility of and distinction between foreground and background elements.
Rebecca Wurster wrote to me with another great use-case: variable modes as levels of visual fidelity. This could be useful for folks who are working with stakeholders who are prone to nitpicking details during conversations that are supposed to be about the bigger picture.
<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.
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. My readers enjoy bonus behind-the-scenes insights on every post!
