Layout in Plasmic

Layout is accomplished using containers—it’s basically a box that contains other elements. You can nest containers to achieve the layout you want.

Types of containers

Document layout container

This is a common type of container that conveniently sizes your content to a pre-set width.

Any element inside of it can be set to:

• Standard width, intended for most content—ensure text line lengths don’t run too long.
• Wide width, for larger media or multi-column content.
• Full bleed width—for instance, if you want to divide up your page into a section that has a darker background.

Document layout:

• Sizes content to a reasonable pre-set width, without you needing to think about nesting containers, setting max-widths, and so on.
• Ensures your content does not run up against the edges of the page

Horizontal/vertical stack

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.

Grid

Grids divide up space into (usually equally-sized) rows and columns, and children are placed within these cells, filling them up left to right.

This is helpful for creating tile layouts.

You can optionally also set grid children to span multiple rows/columns.

Free box

In free boxes, you can specify whether the item is anchored to the top/left of its parent (the default), or perhaps the bottom/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.

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).

Free-floating children

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:

Free-form drawing (advanced)

You can press S to start drawing a box or R to start drawing a free box. This is generally not recommended since it results in boxes that have absolute sizing and (sometimes) absolute positioning, which doesn’t respond well to varying device sizes. But it can be useful for quick UI sketching.

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.

Have feedback on this page? Let us know on our forum.