Patterns and auto layout

Generate editable pattern fills (checkerboards, stripes, hex grids, mandalas) and let groups arrange their own children in rows, columns or grids. Both features live on groups, so they share the same logic: a group of plain layers with extra instructions attached.

Generating a pattern

Patterns are built from real shapes, not a flat image. Every tile, stripe or petal is a shape layer inside a group, so the result stays sharp at any export size and every piece can be recolored.

Click the grid icon (Generate Pattern) in the floating toolbar at the bottom of the canvas.
The Patterns window opens. Pick a kind from the list on the left.
Adjust the sliders on the right while watching the live preview.
Click Insert pattern. The pattern lands on the active page as a single group.

Press Esc or Cancel to close the window without inserting anything.

Pattern kinds

Kind	What it makes
Checkerboard	Classic alternating grid of two colors
Grid	One shape repeated uniformly in rows and columns
Stripes	Parallel bars at any angle
Hex grid	Honeycomb tiling
Mandala	Radial symmetry around a center
Kaleidoscope	Mirrored radial petals

Pattern controls

Each kind has its own settings. The ranges below are the limits of each slider.

Checkerboard

Control	Range	Default
Rows	2 to 20	8
Columns	2 to 20	8
Cell size	20 to 160	60
Color A, Color B	any color	`#111111`, `#f5f5f5`

Grid

Control	Range	Default
Rows	1 to 20	6
Columns	1 to 20	6
Cell size	10 to 200	60
Gap	0 to 120	20
Shape	rectangle, circle, triangle, diamond, hexagon	circle
Color	any color	`#820000`

Stripes

Control	Range	Default
Count	2 to 40	12
Thickness	4 to 120	28
Gap	0 to 120	14
Angle	0 to 180	30
Color A, Color B	any color	`#111111`, `#f5f5f5`

Hex grid

Control	Range	Default
Rows	1 to 20	6
Columns	1 to 20	8
Cell size	20 to 200	80
Color	any color	`#820000`

Mandala

Control	Range	Default
Copies	3 to 36	12
Radius	40 to 400	180
Petal width	6 to 160	40
Petal height	6 to 300	120
Shape	rectangle, circle, triangle, diamond, hexagon	rectangle
Color	any color	`#820000`

Kaleidoscope

Control	Range	Default
Pairs	2 to 24	8
Radius	40 to 400	180
Petal width	6 to 160	50
Petal height	6 to 300	130
Shape	rectangle, circle, triangle, diamond, hexagon	triangle
Color	any color	`#820000`

All sliders use the standard Studio slider: drag along the dotted track, or use the value chip to scrub or type an exact number.

Re-editing a pattern

A pattern keeps its settings after you insert it. Select the pattern group on the canvas or in the layers list and the right panel shows a Pattern section instead of the usual group controls.

Use the dropdown at the top to switch to a different kind. The pattern is rebuilt with that kind's default settings.
Change any slider or color and the pattern regenerates live.

The group keeps its position on the page while it regenerates, and its size grows or shrinks to fit the new pattern.

Note: Regenerating replaces the shapes inside the group. If you have hand-edited individual tiles (recolored one square, say), those edits are lost the next time you change a pattern setting. Finish the pattern settings first, then do the hand edits.

Pattern ideas

A Checkerboard at low opacity behind a portrait, with a blend mode set to multiply, reads like a printed tablecloth.
Stripes at a steep angle and two close colors make a quiet background for a gig poster.
A Mandala with tall rectangles and many copies makes a sunburst behind a title.
Put a pattern under a halftone or dither effect to push it toward print.

Auto layout

Auto layout lets a group position its own children. Instead of nudging five buttons until the spacing looks even, you set a gap and let the group do the arithmetic. Add, remove or resize a child and the rest move to make room.

Making a group

Select two or more layers and press Ctrl / Cmd + G, or click Group N layers under Arrange in the right panel (N is the number of selected layers). A new group starts with layout set to None, which means children stay exactly where you put them.

Layout modes

Select the group. The right panel shows Position & Size and a Layout section with four options:

Option	What it does
None	Free placement. Children keep their own positions.
Vertical	Stacks children top to bottom, like a column.
Horizontal	Lines children up left to right, like a row.
Grid	Places children in a grid of equal cells.

Gap and padding

Once a layout is chosen, two fields appear:

Gap: space between neighbouring children, from 0 to 400.
Padding: space between the group's edge and its children, on all four sides, from 0 to 400.

A Spacing number token from your design kit sets the gap of every selected group in one click.

Alignment (vertical and horizontal)

For Vertical and Horizontal layouts you get two rows of options. Their labels change with the direction so they always describe what you see.

For a Horizontal group:

Align vertically: Start (top), Center, End (bottom) or Stretch. Stretch makes every child as tall as the space inside the padding.
Distribute horizontally: Start, Center, End or Between. Between pushes the first child to the left edge, the last to the right edge, and spreads the rest evenly.

For a Vertical group, the same options appear as Align horizontally and Distribute vertically.

Distribution only has a visible effect when the group is larger than its contents. If the children already fill the group, there is no free space to share out.

Wrap content

Horizontal and Vertical groups have a Wrap content toggle. With it on, children that don't fit on the current line move to a new line (or a new column, for vertical groups), much like words wrapping in a paragraph. Each line is aligned and distributed on its own, and lines are separated by the same gap.

Grid layout

Grid sizes every cell to fit the widest and the tallest child, then fits as many columns as the group's width allows (after padding and gaps). Children are centered in their cells and fill the grid left to right, row by row. Make the group wider for more columns, narrower for fewer.

Grid ignores the alignment and wrap settings, so those controls are hidden.

Fit to contents

With any layout other than None, a Fit to contents button appears. It resizes the group so it wraps its children exactly, padding included. Use it after adding or removing children, or when you want a tight card around a row of icons.

Reordering children

In a group with auto layout, drag a child on the canvas to move it within the order. In a row or column it slides into the slot nearest your pointer. In a grid it swaps places with the child under your pointer.

Ungrouping

The Ungroup button at the bottom of the group panel releases the children back onto the page as separate layers and selects them.

Patterns versus auto layout

Pattern groups use their own generator, so they show the Pattern panel rather than the Layout panel. If you want a grid of arbitrary layers (photos, text cards, logos), group them and use Grid layout instead of a Grid pattern.