Hi @Adam_UX, Thank you so much for sharing your thoughts and use cases with us! It’s really helpful to understand how this could be beneficial for you.

We’re excited to see how the rest of the community will respond. We use voting to gauge interest and prioritize ideas, so please remember to vote for your idea.

And for other community members who are excited about this idea, don’t hesitate to show your support by voting.

Thanks again for your contribution!

This is exactly what my team is missing aswell. It indeed would be great to quickly turn a XS (mobile) screen into a XL (desktop) screen by simply changing the parent frames mode without switching all its components from XS to XL breakpoint (via variant property) individually by hand.

Therefore we would need to be able to assign a “breakpoint defining” variable to our existing “breakpoint” variant property.

Something like this:

Other variant properties like different themes could also benefit from that if you have different themes on component level.

I have a the same request but for a different use case. I have modes for “Spacious”, “Comfortable” and “Compact” that control padding on components. When it comes to buttons however, these have fixed heights for “Small”, “Medium”, and “Large”. The tokens for these live in seperate collections.

Example: Changing the mode of a frame that contains an input component and a button component. If the frames mode is set to “Compact”, the input components padding would would adjust and the button property would change to “small”. Setting the frame mode to “Comfortable”, the input components padding would would adjust and the button property would change to “medium”… and so on.

You can do it like this. BUT I still have issues with it. If I have 4 breakpoints, and my component is only different on one of them, I would still have to make 4 variants even if 3 of them are identical. It’s gonna cause huge bloat.

That’s a great hint and I found that out on accident just a couple of days ago although it would be way better to be able to define that on main component respectively variant level instead of instance level to allow design system admins taking care of that so other designers could benefit from that out of the box without applyng the right variables by their own first.

The second issue you mentioned is also true but could be solved if Figma would allow us to add multiple variables each variant.

For instance:

XS + M for the “mobile” variant

and L + XL + XXL for “desktop” variant

By that we would not need to bloat our components library with duplicates just for the sake of assigning variables.

Completely agree (hint hint Figma)

I would use it to design for responsiveness, by changing component variants based on variable modes that represent break points.