Flex Layout Options

With the Experience Canvas, you will now have the ability to design groups of Widgets that can automatically resize and re-arrange themselves based on which Variant they live inside of.

This is possible using the Flex Layout capabilities of Penpot, which will quickly re-arrange groups of Widgets for you based on the settings which you have applied to that group.

For example, you might have a series of images laid out in your desktop Variant like this:

If you highlight all of those images (click and drag to select all of them, or hold Shift and left click on each one) then right click and select "Add Flex Layout", you will see the following options appear on the right hand side: 

These are the settings that will allow you to set your group of Widgets to automatically wrap and re-arrange themselves based on what the group is sized at in each Variant. So if I turn on the Wrap settings on this example group:

That will make this group of Widgets automatically re-arrange and stack themselves if I scale the size of the group up/down at all in another Variant. The "Content" settings in the above screenshot let you determine how that re-arranging behaves exactly.

But with that in place, if I now used this same group on a mobile variant, and simply resized the group (instead of resizing each Widget one by one), this is how they end up appearing:

We plan to make further use of these functionalities in the future, so that your time to create Variants becomes even faster as well!

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