Layout in Plasmic
The layout system in Plasmic is designed to be uncompromising, so that you can express a much richer set of layouts than what is available in today’s design tool auto-layout features, while remaining confident that these can be directly represented in the target platform.
Boxes and Stacks
Layout is accomplished using boxes, a basic element type. It acts as a container and can hold other elements as children. A box can be a free box whose children have free-floating positioning (“absolute positioning” in CSS terminology), or automatically lay them out in a horizontal or vertical stack. You can insert these from the Gallery, or draw these using the top toolbar icons:
In free boxes, you can specify whether the item is anchored to the top/left of its parent (the default), or perhaps the top/right. You can even anchor to both the left and right of the parent, so that resizing the parent resizes the child in a way that maintains fixed left/right margin widths. This is similar to Constraint Layout in other design tools.
A horizontal or vertical stack arranges its children in a row or column automatically. This frees designers up from worrying about maintaining exact placement, and is how most UIs in production behave.
Stacks can specify a default gap between their items. Stacks also have the ability to wrap, and as such can specify a cross-axis gap (e.g., a row gap for a horizontal stack).
Stacks can also specify padding (as shown above), which is how much they nudge their children inward from their own border.
When you draw a box (including stacks) onto the screen around some other elements, those elements will become nested as children in the newly drawn box.
You can also take a box and press “Shift+A” to cycle through the auto-layout configurations. If it’s currently a free container, we’ll guess what is the desired stack layout (horizontal/vertical) from the positions of the items in the box.
Although by default stacks imply the children are auto laid out, you can in fact set any particular stack child to be free-floating, which is occasionally useful for placing the red badge in this example:
Sizing
Depending on the layout, an element’s size (width and/or height) can be:
- Fixed size, e.g. 32px
- Hugging or “tightly wrapping” its own content. For instance, a button should always wrap its own text content with constant padding.
- Stretching to fill its parent. For instance, a Nav Menu component should always stretch to span the width of the screen.
You can mix these on different axes—while the Nav Menu should stretch horizontally, perhaps it should be hug its content vertically.
You can also set more advanced layout configurations using min and max sizing constraints. For instance, you want a button to hug its text, but also want a minimum width and/or maximum width (forcing the text to wrap or truncate).