Global Variants & Autocomplete Behavior for Variant Components

As I’ve been using Variants across my Design System, I noticed that I often repeat the same properties & variants across multiple components. For example, State is repeated across most with Default, Focus, Hover, Pressed is repeated across most regarding interaction states. Other common global variants include: “Active/Inactive or Disabled: Yes/No”, Size: “Small, Medium, Jumbo”, etc.

I am excited and see the value in aligning prototype triggers & effects with these interaction states, but I can also see other triggers that we could automate across some of these global variants. For example, I’ve used a Breakpoint property, that we could attach a default variant to parent frame-width or frame-height.

I can see Global Variants working by adding a variant being able to choose between existing global variants, and when editing an existing variant, being able to change the scope of the property from local to global.

Having more global variants used like this could also help with easily being able to switch multiple components across breakpoints or active/inactive states. Global variants can also help new interaction designers understand how breakpoints, dark vs light mode, and interaction states relate, and how some of these are dictated by platforms (like smartphones or web standards, etc)

1 Like

So, on a simple level, if I had two distinct components with common properties/variants (Theme: Dark/Light, for example), I could multi-select those components and alter the common properties?

That’d be nifty for switching an artboard and all its contents from Light to Dark theme, for example.

I also wonder about nested variants: like an icon within a button… if I swap the icon, the replaced symbol ‘remembers’ the variant setting of its predecessor. If I then change the variant of the button itself, the icon’s variant changes accordingly. (In other words, if the button becomes Theme: Dark, its child icon variant also becomes ‘Theme: Dark’)

Apologies in advance if I’ve misinterpreted the proposal.

2 Likes

Some version of this would be great.
At the most basic level, show all properties for child variants in the parent frame, like suggested here.
Then if possible, set-up conditionnal properties. For example if I switch the “Theme” property of the parent frame to “Dark”, all child variants switch as well.

3 Likes