Layout
Frame Modifier
The Frame modifier positions layers within an invisible frame with a specified size.

Overview
The Frame modifier comes with 3 parameters: Width, Height, and Alignment. When neither the Width or Height parameter is specified, the layer shows no signs of modification, assuming its inherent size.
You can specify a Fixed size for a layer’s Width, Height, or both. If you only specify one of the dimensions, the resulting layer assumes the sizing behavior in the other dimension. For example, by only placing a Fixed Width, the layer will occupy that Width and whatever Height its parent has to offer.

The Alignment parameter specifies a layer’s alignment within the Frame.
- Top Leading - Layers align to the Leading top corner of the Frame
- Top - Layers align to the top center of the Frame
- Top Trailing - Layers align to the Trailing top corner of the Frame

- Leading - Layers align in the center of the screen, but to the Leading edge of the Frame
- Center - Layers align in the center of the screen, vertically and horizontally of the Frame
- Trailing - Layers align in the center of the screen, but to the Trailing edge of the Frame

- Bottom Leading - Layers align to the bottom Leading corner of the Frame
- Bottom - Layers align at the bottom center of the Frame
- Bottom Trailing - Layers align to the bottom Trailing corner of the Frame

You can also align layers to the Baseline of a Text layer and to the Leading, Center, or Trailing edges.

Flexible Frame
Set the minimum and maximum size for the Width and/or Height of your layer. You can also specify if a dimension of the Frame should Fill the container instead. Use the Alignment parameter to specify the layer’s alignment within the Frame.

Videos
Ask Our Community
If you have questions about the Judo editor, or developer questions about SDK integration, join the community and start a conversation!