Now that Figma has local variables and modes, is there a way that a component instance variant can changed based on mode?
Basically, I have it set up so that when I define my main frame as ‘desktop’ mode, the margins are 32, and when ‘mobile’ mode is chosen they are 16 which is great.
However I also have a nav bar, which is very different between desktop and mobile. Previously, i’d create two component variants, (desktop and mobile, but this means I have to change it on every screen manually. Ideally I’d like variants to swap out based on mode (or even frame width)
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.
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.
