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)