Skip to main content

Hello - is there any way to use layout grids ad have them change based on viewport size. IN the same vein, can component instances be swapped based on viewport or grid layout?


Iโ€™s love to be able to have a template that when it scales down to template size mobile variants get swapped into the design. I can see that this can be done manually. You need to swap the grid manually and then swap the component manually(one that could be optimized for mobile)


Thanks for any ideas or plugins. 🙂

What I did for this was create a โ€œgridโ€ variable that has the width of each viewport I wanted (desktop, tablet, mobile), and they have a text variable with the name of each mode. I then link the frame width to the grid width variable. After doing this I create the component variants I need to swap depending on the mode selected for that layer, I name the variant the same name as the grid modes (desktop, tablet, mobile) and then link the instance property with the grid name variable.


Setting up variable


Setting up variants:

image


Using variable as variant property:

image


Hi Camila. Fantastic. I was wondering if variables could do the trick! let me absorb the implications here. It sounds like just what I was hoping for. 🙂


Reply