Skip to main content
Question

can I map a variable from a fixed value to a fill container?

  • June 30, 2025
  • 1 reply
  • 53 views
Bruno_Mattelet1

Hello,

 

In my design system, I would like to map a container variable that would be a fixed value in desktop but a fill container in mobile. 

 

I tried by setting a fixed value of 0 get the attention of the designers in order to make them change the value on their own but is there a way to automate this directly in the variable?

 

I understand that this is not how variables are working but if there’s a workaround or a way to fix this, I’m taking it <3

 

Thanks ! 

1 reply

Johnson_Ryan
  • Johnson_Ryan
  • Active Member
  • June 30, 2025

I defined boolean variables like “isDesktop” and “isMobile” that are only true when the mode matches.

  • Mode=Desktop
    • isDesktop=True
    • isMobile=False
  • Mode=Mobile
    • isDesktop=False
    • isMobile=True

Then, in my component, I’ll create two different containers/layers (one for Mobile, one for Desktop) and then control visibility of the layers based on the boolean variables created above. The mobile layer visibility is controlled by the “isMobile” variable, and vice versa.

It requires a little extra duplication of the child layers, but component props/overrides should apply to every layer they’re applied to (even if invisible). To switch layouts, you just need to change the variable mode on the component instance or one of its ancestors.

Terms & ConditionsAccessibility statement