As I attempt to convert a design system to take advantage of variables, I’m finding that especially when trying to make components responsive—I could utilize variables more and easier if:
Variable modes had the ability to set properties (both primary and nested). This would be useful for things that variables can’t do and auto layout can’t do, while still making the change be triggered by a mode switch. This would make designer’s lives easier by making components automatically make all changes when applying a parent mode vs making some changes via variable mode and others via manual property selections.
Properties had the ability to augment variables by either changing values, aliases, or applying basic math. Math example: I have variables set up for grid column widths at various breakpoints. That works for everything except when objects assuming those variables are inside of a container with padding. In order to make the whole section fit in the content area I need to reduce the width of the nested component objects by the left and right container padding. Currently I think the only way to do this is to create duplicates of all the variables and aliases of the column widths at those reduced values. That can be A LOT of duplicated items propagated throughout variable sets. This would be much less crazy if I could just create a single property that says "Make this width equal the width alias minus twice this padding alias, minus ", which I can enable when I’m using it in that component.