Breakpoint Variants

In the Experience Canvas, the Variants functionality has evolved to be more responsive than ever before! You not only will have to spend less time setting up your Variants, but there are now some helpful tools that will drastically decrease the amount of time it takes to design the content that appears across your Variants.

For starters, Variants will now automatically assign themselves in your Experience based on the widths of the Artboards in each Variant:

Meaning that you do not have to worry about assigning them manually anymore and potentially wind up with the wrong Variants showing on the wrong screen sizes.

You can create new/more Variants in one of two ways:

1) By clicking on the plus sign at the top right corner of the Variants menu:

2) Or by right clicking on your first Variant and selecting "Duplicate". For those who have used Creator Studio's Editor, this option offers the same Variant creation functionality that you are used to, where you will be given a clone of that first Variant to redesign and resize to your liking:

Regardless of how you choose to start creating your Variants, you will always have the same freedom that Creator Studio has always offered where can place any Widgets wherever you'd like in each Variant and size each Widget to whatever size you feel is appropriate in each Variant.

Override Breakpoints

As mentioned above, Variants will automatically assign themselves for you, but, we do give you the ability to override that if you'd like. If you select a Variant from the Variants menu, you should then see an "Override Breakpoint" button appear in the right hand menu:

This allows you to enter a maximum width (in pixels) of your choosing for the Variant to scale up/down to before switching to the other Variant - as opposed to it switching Variants at the default, automatically determined width.

Additional Tips

- The Flex Layout options that come with the Experience Canvas will greatly increase how efficiently you can build these variants too. Head here for more information about how that new functionality comes into play.

- The Proportional Scaling tool can also be very helpful for making sure your widgets maintain a specific aspect ratio when resizing a group of widgets. This can be enabled by selecting the "K" button on your keyboard, or using the preferences menu: 

Please contact support@getfastr.com with any further questions on this!