Custom Breakpoints

When exporting a component with Variants that are all different widths, Quest will automatically bring in those Variants as Breakpoints. In this mode for variants, this will automatically create breakpoints which you can see when you rollover any of the screensize icons in the top bar. Breakpoints are state triggers that control which variant you are seeing based on the screen width and is auto generated by Quest.

When exporting your component that is using Breakpoints, an additional file will be generated to handle the breakpoints called: [YourComponentName]ResponsiveSize.js/.ts

Setting & Adjusting Breakpoints

When you export your component from Figma into Quest, Quest will automatically create breakpoint values based on the average between the widths. This can be seen by rolling over the screensize icons at the top and can be adjusted by clicking on the value and typing to change it. This change will be reflected when in Preview mode and of course in your live App.

Variants as Breakpoints vs. Variants as States

Variants as States are best used when the different states are for interactions or user feedback. An example of this would be different states of a button such as default, hover, clicked, disabled, etc. It is also the way for you to use State Animations as Variants as Breakpoints will hide this option.

Variants as Breakpoints are best when you're designing webpages for different screen sizes or nested components that you want to have look differently based on the screensize they're displayed in.

Quest will do it's best to auto-detect the intent of your design but you can simply use the drop-down to change it from one to the other in case that intent was misunderstood.