Feature: If < min-width => change-to variant

It would indeed be game changing and important if we could get the option to automatically swap between variants based on the actual size of the parent frame. This could simulate real life complete web applications and be really helpful to show when and how a breakpoint should interfere with a component.

3 Likes

Hey @Niclas_Lundberg, thanks for the feedback!

We’ve updated your topic into a feature request, and we’ll pass this onto our Prototyping team for future consideration.

1 Like

I second this feature as it would be a huge leg-up using FIGMA for responsive designs.

1 Like

@Niclas_Lundberg you can do that with variables and conditions.
variable for min width and a variable that control the state of a component and a condition:
if “frame-min-width” == “number” then set variable to…

Yes, I guess that makes sense

Where would I apply this condition, as, as far as I can tell, the only possible way to “trigger” conditions is by input - there arent any “listeners” if you know what I mean

Would love your input to I can learn how to apply this and step up my responsive game

@Niclas_Lundberg you can create an event listener by creating a pixel component with two states(can be 0% opacity), the states switch with a delay interaction in an instant.
only on one pixel variant you will need to place all your conditions.

Screenshot 2024-03-25 at 15.41.56



Screenshot 2024-03-25 at 15.48.48

Oh I see, sort of lika null object just to hold information!

Thanks!

1 Like

Hi Shaul, do you have any examples of this working? I’m having a hard time connecting this concept. I don’t understand where or how to set the variables for the frame width.

Hey @Jeffro, the main idea is to have a component in your main framework that continuously loops, checks conditions, and makes the necessary changes.

where/how to set a variable: first you need a variable that controls the state of your change. the variable needs to be in the type of the field that you need to change, example: width field is a number variable.
check here for more info https://help.figma.com/hc/en-us/articles/15343107263511-Apply-variables-to-designs