Layers and pages

Pages

A file's pages are listed at the top of the left panel, above its layers. Use them to keep a file tidy: one page for the screens, one for explorations, one for the parts you reuse.

• Add page: click the + beside the Pages heading. Type its name straight away.
• Open a page with a click. Double-click to rename it, and drag it up or down the list to change the order.
• Right-click a page for Rename, Duplicate, Copy link and Delete…. A duplicate is named “(copy)” and comes with the page's layers, guides and canvas colour. The link opens the file on that page.
• Deleting asks first: Everything on this page goes with it. Choose Delete page. Changed your mind? Click Undo in the message that follows to bring it back. A file always keeps at least one page.

To send layers to another page, right-click them on the board and open Move to page (it shows once the file has two pages or more), then pick the page. They land in the same place on that page, and you stay where you are. Each page has its own canvas colour, set under Background in the right panel when nothing is selected.

Drag the line between Pages and Layers to give either more room; double-click it to fit the pages again.

The layers panel

Two tabs sit at the top of the left panel: Layers, with the pages and the layers on the page, and Assets (see Components). The layers are listed front first: the top row is in front of everything under it. Selecting something on the board opens its frames in the list and scrolls to it.

Components and their instances are named in purple. A group shows a dashed square, a mask group marks its mask, and a combined shape shows how it combines.

Layer rows

• Click a row to select the layer. Hold ⇧ and click another to select every row in between; hold ⌘ and click to add one or take it out.
• Click the arrow at the start of a row to fold or unfold a frame. Hold ⌥ as you click it to fold or unfold everything inside too. There's no button to fold every layer at once: press ⌥L.
• Double-click a row to rename the layer.

Reordering and nesting

• Drag a row above or below another to change its place in the stack. A line shows where it will land.
• Drop it on the middle of a frame's or group's row to put it inside. The row is ringed when it will.
• Drop it below the last row to take it out of its frame and onto the board, in front.
• Dragging a selected row carries the whole selection with it.

Hide and lock

Hover a row to see its Lock (a padlock) and Hide (an eye) buttons at its right end. A row that is locked or hidden keeps its button showing, and a hidden layer's row is faded. The same two are in the right-click menu on the board, as Hide and Lock.

• A hidden layer isn't drawn and can't be clicked on the board. Click its eye again to show it.
• A locked layer stays where it is: clicks on the board go through it, and it can't be moved or deleted. Lock a background so you can work over it. To unlock it, click the padlock on its row.
• There's no button to unlock every layer on the page at once: press ⌥⇧⌘L, or choose Unlock all in the file menu's Keyboard shortcuts.

Find and replace

Find has no button: press ⌘F, or choose Find in the file menu's Keyboard shortcuts. The left panel becomes Find: type in Find layers and words to list every layer on this page whose name or text has what you typed.

• Click a result to select it and bring it into view. Pressing Enter in the field goes to the next one, and with ⇧ held, the one before.
• Type in Replace with, then click Replace for the text shown, or All for every text that has the words. Styled words keep their style, and All is one step to undo.
• Click the × beside the Find heading to go back to the layers.

Renaming

Double-click a layer's row, or right-click the layer on the board and choose Rename (or press ⌘R). To rename a frame, you can also double-click its name on the board. The file's own name is at the top left: click it to change it.

Good names pay off: they show on the board, in Find, in exports, and they are how your agent knows which part is which.

Renaming many layers

Select several layers, right-click one of them on the board and choose Rename layers…. The window shows the first few names as they will be:

• Match (optional): words to find in each name, or a regular expression. Only what it finds is changed; a name it doesn't match is left as it was.
• Rename to: the new name. It can use the codes below.
• Start from: where numbering starts. Layers are numbered in the order the layers panel lists them, top first.

With Match empty, Rename to replaces the whole name. Match “Copy” and Rename to “Final” swaps that one word in every name that has it.

Groups, frames and sections

Three ways to hold layers together, each for something different. Select the layers, right-click them on the board, and choose one:

• Frame selection puts a frame round them: a box of its own, with a fill, stroke, corners, clipping and layout. Frames on the board are your screens: the ones you preview, export and share. To draw an empty one, pick Frame in the toolbar.
• Group selection (or press ⌘G) makes a group: it only holds layers. It has no fill or layout of its own, and its box is always the box round what is in it. Resizing a group scales what is in it; its opacity, blend and shadows apply to all of it. A group left empty goes away.
• Section selection makes a section: a panel on the board, behind the frames, to keep related screens together. Section in the toolbar draws one.

Reach for a group to move a few things as one, and a frame when the box itself matters. Ungroup, in the same menu, takes a group or a frame away and leaves its layers where they are.

Masks

Select two or more layers, right-click them on the board and choose Use as mask. With shapes and pictures selected, the same button is at the top of the right panel, beside the name: a half-filled circle. The bottom layer becomes the mask: the layers above it only show inside its shape, in a new Mask group. Put a circle under a photo to crop it round. To undo it later, select the mask group, or the mask in it, and choose Remove mask in the same places.

Combining shapes

Select two or more shapes, right-click them on the board and open Boolean. Or, at the top of the right panel beside the name, click Union, or the small arrow beside it for the others:

• Union: one shape covering them all.
• Subtract: the bottom shape with the others cut out of it.
• Intersect: only where they overlap.
• Exclude: everywhere but where they overlap.

The result stays live: the shapes are kept inside it, so you can double-click in to move or edit one and the result follows. It takes the bottom shape's colour. Select the combined shape and pick another operation to change it. If something can't be combined, Kite tells you why.

Flatten and outline stroke

Both are in the right-click menu on the board when everything selected is a shape, a drawing or a combined shape:

• Flatten turns the selected shapes and drawings into one vector, in the bottom one's place. Do it when the shape is final.
• Outline stroke turns strokes into filled shapes, so an icon drawn with lines scales as a solid shape.

Stacking order

Right-click the selection on the board and open Order: Bring to front, Bring forward, Send backward or Send to back. Or drag its row up or down the layers panel. In a flex frame, the order is the order of the line.

Align, distribute and tidy up

At the top of Position in the right panel are six align buttons: left, centre and right, then top, middle and bottom. One layer lines up with its frame; several line up with the box round all of them. Layers placed by a flex frame are left to it.

With several selected, the … button beside them (Spacing) opens a menu:

• Distribute horizontal spacing and Distribute vertical spacing: the same gap between three or more.
• Tidy up: puts layers that are roughly in a row, a column or a grid into a neat one, with an even gap. The top-left one stays put. It is in the right-click menu on the board too.

Flip and rotate

Right-click the selection on the board and open Flip for Horizontal (left to right) or Vertical (top to bottom). Under Position in the right panel, beside the angle, are three buttons: Rotate 90°, Flip horizontal and Flip vertical.