Change variant on resizing a component

You certainly can!

If your component has 3 size variants, say Desktop, Tablet and Mobile and you have a page / frame that you want to adjust across the device widths without having to individually change each component within… You can create a page width variable (screen-size) with different modes as above (Large, Medium, Small) to correspond to your defined breakpoints.

If your component variable uses the same values, i.e. Desktop, Tablet, Mobile you can map the components state to use the same variable as the frame (screen-size). This way, when you change the frame size it automatically changes all the components in the frame to use the same variant ie Desktop, Tablet or Mobile.

Hope this helps.

How did you monitor the component width? Can you show more detail?

You don’t need to monitor component widths, as the component variant is mapped to the screen-width variable.

So, on my design frame I assign min and max width variables plus assign the screen-size var to the frame. This allows me to adjust the frames width within the breakpoints. ie. if I select desktop the frame can be resized from 991px to 4000px and the screen-size var == large.

Now, if the components used within the frame also reference the screen-size var to determine which variant they display then you are controlling all the components with one frame option.

Hope that helps.

I see how this would work if you manual change the “Sizing” mode of a frame but what about for a responsive prototype that gets resized?

I see what you’re getting at. I’ll take a little time to look into it more but as far as I know this is the easiest way to implement something close to it.

I don’t think there’s a feedback mechanism to get the frame width and push it to a variable you could use to control the component variant states, but I think that would be the ideal solution.