When designing for mobile devices, one of the toughest things can be keeping your designs consistent across all the different screen sizes. Luckily, Lightwell provides dynamic layouts which allow you to configure layers to maintain certain aspects regardless of which screen they're displayed on. Let's take a look.

Along the right side of the canvas editor you should see the layout section among the stack of canvas layer controls. This section also contains the controls for the sizing and positioning of the selected layer.

For dynamic layouts, the top section is the important part. Here you should see four different fields with a cross-section between them. Below this you'll see the "Pin To" combobox.

First off, the four fields are labelled T, R, B, and L, corresponding to top, right, bottom, and left. These fields represent the selected layer's distance from the indicated direction in relation to either the screen itself, or the layer's parent.

This is where the "Pin To" field comes into play. You can configure the layer's layout to pin to either the screen itself, or the group/layer the layer is currently inside of.

The cross section controls themselves are clickable, and provide quick ease of use for setting up dynamic layouts.

When configuring one of the layout directions, the outer ring of dashes will become colored to indicate a constraint has been setup. You can also click these dashes manually to set the constraint to where the layer is currently positioned.

The dashes in the center (the plus sign) are also clickable. These handle centering the layer in either the horizontal or vertical directions. Note that if you have directional constrains setup, applying one of the centering aspects will stretch the layer size out.

It's also important to note that applying horizontal or vertical layout constraints will gray out the position fields as the position of the layer is being determined based on the screen or the parent:

Once you have setup some layout constraints for layers, you can quickly see these in action by swapping between devices using the devices button to the left of the preview button along the top of the editor:

Did this answer your question?