Min / Max Width
Last updated
Was this helpful?
Last updated
Was this helpful?
If you use "Fill" horizontal on your Auto Layout frames in Figma, when you export your component, in Quest you can additionally set the minimum and maximum width for that layer, group or frame.
To find this, simply click on a layer and you will see the Min / Max Width settings in the right-side panel. This can be done on any level in the component and sometimes easiest to set the entire component to have a minimum and maximum value on the top level overall. But if you'd prefer fine-tune controls, you can choose any child/layer in the component and set the values individually.
To set Min / Max Width, you can either press the Pin icons or type in the exact values you're looking for. Using the Pin icons will save you a lot of time and guess work. More on that below.
When dragging the responsive handles, you optionally press the Pin icons to set the value for the Min and Max without having to know or guess what the exact pixel amount is. This is the easiest way to test and try your minimum and maximum width visually directly in the Editor. If you'd like to make sure your values are exactly the amount you're looking for you can always change the pixel value after pressing the Pin button. However, if you'd like to use the Pin button again, you'll want to press the X button on the rightside to remove what you've previously set.
If the component you're setting up is using Breakpoints, it is important to note that each breakpoint has it's own Min / Max value for each layer. For instance, if you're setting the max width of the component overall and you're on a Desktop screensize, that value will not carry over to Mobile. You will need to go into each breakpoint and set up the Min / Max for all that you'd like to have it. If you're using the "Variants as States" option, this is not the case and settings Min / Max values on any variants/state will be applied to all in the component.
