Layout

Frames do the layout

Only frames lay things out. Select one and the Layout section of the design panel starts with its Type:

• None: its layers are placed by hand, wherever you put them.
• Stack: its layers in a row or a column, one after another. This is Kite's flex, like Figma's auto layout.
• Grid: its layers in columns and rows.

A group has no layout: its box follows what is in it. To give a group layout, put a frame round it: right-click it and choose Frame selection. See Groups, frames and sections.

Flex

Adding flex

• Right-click a frame on the board and choose Add flex (or press ⇧A). Kite reads how its layers already sit: they line up the way they run, with the gap already between them, and the room round them becomes padding. Little moves.
• Select several layers, right-click one of them and choose Add flex: they are wrapped in a new frame named “Flex” that fits round them, running the way they already sit.
• Or, in the right panel's Layout section, set Type to Stack, which lines the frame's layers up in a column.

To take it off, set Type to None, or right-click the frame and choose Remove flex. The frame keeps its size and its layers stay where they were, placed by hand from then on.

Direction, gap and wrap

• Vertical (↓) or Horizontal (→): which way the layers run.
• The gap field sets the space between each. Choose Auto at the end of the field to share the free space out between them instead, as in a nav bar with a logo left and links right. A gap below zero makes them overlap, as in a row of avatars.
• Wrap: when a row runs out of room, the next layers go onto a new line. A second gap field sets the space between the lines.

Padding

Padding is the room between the frame's edge and what is in it. The two fields set it across and down; the button beside them, Padding on each side, splits it into top, right, bottom and left.

You can also set padding and gap on the board. Select a flex frame and pink bars show in its padding and between its layers; hover one to see its value, drag it to change it. Two keys do more while you drag a padding bar: hold ⌥ to set the opposite side too, or ⌥⇧ to set all four.

Alignment

The 3 × 3 grid beside the direction sets where the layers sit inside the frame: top left, centre, bottom right and the rest. It works along and across the direction at once.

Grid

Choose Grid under Type to place layers in columns and rows. It starts with two columns.

• Cols: how many columns, each the same width.
• Rows: how many rows. Leave it on Auto and there are as many as the layers need.
• The two gap fields set the space between columns (↔) and between rows (↕).

Layers fill the grid in their order, one cell each. A grid of cards stays even however many you add.

Sizing

The W and H fields each have a menu at their end that says how that side is sized:

• Fixed: the number you type.
• Hug: just big enough for what is inside. Offered for flex frames and text.
• Fill: as big as its frame allows. In a flex frame, it takes the room left along the line, or stretches across it; anywhere else, the frame's full width or height.
• Relative: a share of its frame, as a percentage.

The link button beside W is Lock proportions: on, changing W changes H to match, and the other way round, in the panel and on the board.

Min and max

The same menu has Add min width, Add max width, Add min height and Add max height. Each adds a field that stops the layer growing or shrinking past it, which is how a Fill or Hug side stays sensible. The × on a field removes it.

Text boxes

For a text, Layout also sets how its box grows:

• Auto width: one line that gets wider as you type.
• Auto height: a fixed width; it wraps and grows downwards.
• Fixed size: the box stays as it is.

Layers in a flex frame

• Their X and Y are set by the frame, so the fields are greyed out. To reorder, drag them: a line shows where they will go. The arrow keys move one along the line too.
• Absolute position, in Position, takes a layer out of the line so you can place it freely, like a badge in a card's corner. The others close up behind it.
• When the frame you select is itself a flex frame sitting in another, Self sets how it sits across its parent: As the parent aligns, Start, Center, End or Stretch. In a grid, Span sets how many columns and rows it covers.

Constraints

In a frame without layout, a layer can be told what to keep its distance to when the frame is resized. Two menus under X and Y set it:

• Across: Left, Right, Left & right (it stretches), Center or Scale.
• Down: Top, Bottom, Top & bottom, Center or Scale.

Pin a close button to the top right and it stays in the corner as the screen gets wider.

Clip content

In the right panel's Layout section, tick Clip content to hide whatever spills over a frame's edge: a picture larger than its card, a list that runs past the screen.

Resize to fit and to fill

• Resize to fit: a text or flex frame hugs what it holds; a plain frame shrinks or grows to exactly the box of its layers, which stay where they are. Double-click one of the layer's resize handles on the board to do it along that side.
• Resize to fill: the layer takes the whole of its frame, across and down.

Neither has a button. Open the file menu (the Kite mark, top left), choose Keyboard shortcuts and click Resize to fit or Resize to fill (or press ⌥⇧⌘R or ⌥⇧⌘F).

Layout grids

A layout grid draws columns, rows or a square grid over a frame on the board, to line work up against. Select a top-level frame and, in the right panel, click the + beside Layout grid. It starts as 12 columns with a 20 px gutter and a 40 px margin.

• Kind: Columns, Rows or Grid.
• Count, Gutter and Margin for columns and rows; Size for a square grid.
• The colour it is drawn in.

Layers snap to the grid as you drag them. The eye in the section's heading shows or hides every layout grid (or press ⇧G). Grids can be saved as styles in a design system.

A card in four steps

1. Draw a rectangle for the picture and two texts under it, a title and a line of description, roughly in a column. Select all three, right-click one of them and choose Add flex: they go into a frame named Flex, running downwards.
2. In the right panel's Layout section, set the gap to 12 and both padding fields to 16.
3. Set the frame's W to Fixed 320 and leave H on Hug. Select the rectangle and both texts and set their W to Fill, so they take the card's width.
4. With the frame selected, add a white fill, a corner radius of 12 and a drop shadow (see Fills, strokes and text). Double-click its row in the Layers tab and name it Card.

Now type a longer description: the card grows to fit. Right-click it and choose Duplicate a few times, then select all the cards, right-click one and choose Add flex again for a row of them. To keep every copy in step, make it a component.