When working with layers on the canvas in Lightwell, there are a number of controls that are available to the user on the right side of the canvas:
Under LAYOUT CONTROLS, you're presented with several sections. At the top is the title, shape, or asset which is currently selected. In the case of an image asset, clicking on the title will navigate to the asset within the asset manager.
Below the layer title are the alignment tools:
These become active when you have several layers selected, and allow you to quickly distribute and align multiple layers. The buttons provide you with the ability to distribute horizontally, distribute vertically, align left, align horizontal center, align right, align top, align vertical center, and align bottom.
Aligning specifically requires two or more layers to be selected, and distributing requires three or more layers to be selected.
Below the alignment tools are the sections for the core layer controls: Shape/Text, Style, Layout, and Ambient Motion. Each of these sections are expandable and collapsible.
The first sections toggle depending on what type of layer you have selected, either shape or text. These sections are not visible when you have a layer containing an asset selected.
The text controls allow you to configure various aspects of a text layer. The top box displays the text currently in the layer, and allows you to make edits.
The typeface field allows you to switch between the various typefaces available (if you've imported any custom fonts from Sketch, they'll be selectable here as well).
Color and Size allow you to adjust the font size and also the color of the text. The alignment buttons allow you to align the text in the layer to left, center, right, or justified.
The shape controls allow you to configure various aspects of shape layers. Fill and Border allow you to enable or disable the fill and border along with setting the color. The field on the right of fill allows you to set the fill's alpha value, and the field to the right of border allows you to set the borders size.
Sides and Radius fields are available for polygon, triangle, rectangle, and star shapes and allow you to quickly adjust these shape fields.
The style section houses general controls for editing the selected layer. Scale allows you to scale the size of the layer up or down. The lock icon in between the text fields either locks or unlocks the aspect ratio for the scaling.
The opacity slider and field allow you to adjust the opacity value for the entire layer. The transform field allows you to rotate the layer.
The flip buttons allow you to quickly flip the layer over either the X or Y axis.
The visible hit testing checkbox is used to enable/disable visible hit testing. When enabled, clicking on a layer will register only when clicking on a visible aspect of the layer, otherwise clicks will register within the layer bounding box.
The layout section allows you to control dynamic layout options for the selected layer.
The top section has 4 fields for controlling distances from the edges of whatever screen or parent the layer is within. By default, if the layer is not grouped, the parent is the screen itself. The "Pin To" dropdown allows you to specify whether the layer is pinned to the parent layer/group, or the screen.
The 4 fields for controlling the layout values correspond to their cardinal directions: top, right, bottom, left. You are able to enter these values manually.
The 4 bars inside the fields are clickable, and are a quick shortcut for defining layout distances based on where the layer currently is. For instance, if your layer is 50 pixels from the right side of the screen, and you click the bar to the left of the R field, it will automatically set 50 as the value for the R field. This will also gray out the X position field as we have defined a specific layout value for the X-axis.
The "+" in the center of the layout controls allow you to quickly align the layer to be centered along the X or Y axes.
Below the layer controls are the fields for editing the layers size and also it's position. Keep in mind, if you configure specific layout properties for a layer the position fields will be grayed out.
Ambient Motion Controls
The final layout controls section is ambient motion which allows you to apply ambient animation to the selected layer.
The duration slider and field allow you to either turn off any configured ambient motion, or speed up and slow down how quickly the layer is animating.
Scale allows you to configure scale values to animate the layer. While the fields are similar to the layer's normal scale fields, these values at as a keyframe for the ambient animation. If your layer is scaled at 100% x 100%, and you configure an ambient motion scale of 150% x 100%, the layer will scale back and forth between 100% and 150% widths.
Movement allows you to animate the layer between it's default position and the configured values, and rotation allows you to do the same except with layer rotation.
The timing section allows you to configure how you'd like the animation to behave. When selecting the spring curve (as shown above), you're also given a field for adjusting the force of the spring.