Skip to main content

Example:



  • Variables and modes created for different values at breakpoint sizes

  • Components created with those variables applied

  • In addition to number variables (spacing, widths, etc.), variables for nested property switches are applied per mode to accomplish changes that aren’t currently variable types (scales, font sizes, visibility, etc.)


The goal is to allow for components to be responsive via automatic application of property values, whether top level or in nested components. This is primarily of interest to our team in Design mode but I think it would be useful in Prototype mode as well. That way if a component constructed with nested property variables is placed into an “iPad” mode frame, its nested properties also get set to the properties/variants that make the display correct for the iPad mode.


Currently without this support, trying to convert components from supporting device sizes via variants to via variables turns into a big mess of some things (spacing, etc.) we can apply with variable changes but the remaining aspects we still need to manually change with property selections. So that just INCREASES the amount of work needed to depict designs across device sizes, confusingly spread out over more of the editing panel.

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:




  1. 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.




  2. 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.



Thanks for the feedback, @Hoby-Van-Hoose!


We’ll pass this onto our Variables team for improvement.

Hi, Is there any way to transfer values between component properties and variables based on latest version? Like variable expression ? Any way is ok! This function could significantly simplify my interaction works.

Reply


Terms & ConditionsCookie settings