Drawing tools

Drawing anything

The toolbar floats at the bottom of the board. Its buttons are icons; hover one to see its name and its key. From left to right:

Click a button, then drag on the board. A click on the board without a drag makes one at a standard size: a 100 × 100 shape, a 400 × 300 frame, an 800 × 600 section, or a line 100 px long. Once it is drawn, you are back on Move. Whatever you draw inside a frame goes into that frame.

Two keys change a shape while you drag:

• Hold ⇧ to keep it square, or a circle, and to turn a line in steps of 45°.
• Hold ⌥ to draw a box or ellipse out from where you started, as its middle.

To move the toolbar, right-click it and choose Floating at the bottom, Docked on the left or Docked on the right.

Frames

Frames are the boards you design in: a screen, a banner, a slide. On the toolbar, click Frame (the # grid, or press F) and drag on the board. A frame drawn around layers already on the board takes in the ones it covers entirely, so you can draw the frame after the design.

To put a frame around layers you have selected, right-click one of them and choose Frame selection.

Frame sizes

While the Frame tool is on, the right panel lists ready-made sizes in groups: Phone, Tablet, Desktop, Presentation, Watch, Paper and Social media. Click a group to open it, then click a size: a frame of that size appears to the right of everything on the page, named after it, and the view goes to it. A few of them:

• iPhone 17: 402 × 874
• Desktop: 1440 × 1024
• Slide 16:9: 1920 × 1080
• A4: 595 × 842
• Instagram post: 1080 × 1350

Starting on an empty page

An empty page offers four ways in, in the middle of the board: Desktop (1440 × 1024), Phone (390 × 844), Draw a frame, or Ask your agent, which shows how to connect one and start it on this file. See Working with agents.

Sections

A section is a quiet panel on the board that keeps frames together: the screens of one flow, the options for one idea. On the toolbar, click Section (the folder) and drag around some frames; the ones it holds entirely go into it, and it sits behind every frame.

To put one around frames you have selected, with a margin, right-click one of them and choose Section selection.

Shapes

One toolbar button, after Section, holds the shapes and shows the last one you used. Click it to draw that shape again. For another, click the small corner at its bottom right, or right-click the button, and choose from the menu: Rectangle, Ellipse, Line, Arrow, Polygon or Star. The menu shows each one's key.

Fills, strokes, corners and shadows are set in the right panel: see Fills, strokes and text.

Arcs and rings

Select an ellipse and three small handles appear on it on the board:

• Sweep, near the edge: drag it round to cut the ellipse down to a slice, like a pie chart.
• Start, once it is less than a full circle: where the slice begins.
• Ratio, in the middle: drag it out to make a hole, for a ring or a progress arc.

Hold ⇧ while you drag one to move in steps of 15°. The Arc section of the right panel has the same three as numbers: the start in degrees, the sweep and the ratio as a percentage.

Lines and arrows

Select a line or an arrow and the right panel has a Line or Arrow section: its weight, and what it starts and ends with: None, Arrow, Circle or Square.

Polygons and stars

A polygon starts as a triangle and a star with five points. Select one and change the number in the Polygon or Star section of the right panel, from 3 up to 60.

Pen

On the toolbar, click Pen (the pen nib, or press P) to draw paths point by point.

• Click on the board to place a point and draw a straight line to it.
• Press and drag to pull out handles, for a curve through that point.
• Click the first point again to close the shape.
• To finish an open path, like a line, press Enter or Esc: there is no button for it.

The path goes into the frame you placed its first point in.

Pencil

On the toolbar, click Pencil (the pencil), then draw on the board for as long as you hold the button down. The stroke is smoothed when you let go, and closes into a shape if you end where you began.

Editing paths

Select a drawing or shape and click Edit path, the last button beside its name at the top of the right panel, or double-click it on the board. A rectangle or ellipse becomes a vector the moment one of its points changes.

• Click a point to choose it, or drag a box round several. To add more, hold ⇧ and click them. Drag them, or nudge them with the arrow keys.
• Drag a corner of the box round the chosen points to scale them; hold ⇧ to keep their proportions.
• Drag a handle to shape the curve. The opposite handle follows; hold ⌥ to move one on its own.
• Double-click a point to switch it between a sharp corner and a smooth curve.
• Drag a segment to move it; hold ⌘ and drag to bend it. Click the dot halfway along a segment to add a point there.
• Deleting points is by key only: ⌫ deletes the chosen points and their segments; ⇧⌫ deletes them and joins the path up round the gap.

While you edit, the Points section sits at the top of the right panel. It shows where the chosen points are, and:

• Mirroring: No mirroring, Mirror angle or Mirror angle and length, for how a point's two handles follow each other.
• Join: with two open ends chosen, joins them.
• Split: cuts the path at the chosen points.

To stop, click elsewhere on the board, or press Enter or Esc. Everything you did to the points is one step to undo.

Text

• On the toolbar, click Text (the T, or press T), then click on the board to type a line that grows as you type, or drag a box for text that wraps inside it.
• Clicking an existing text with the Text tool types into it, rather than starting another.
• A new text takes the font and size of the last text you selected, so a run of labels comes out alike.
• To edit a text, double-click it on the board. To stop typing, click elsewhere on the board, or press Esc.

Fonts, sizes, lists and styling single words are in Fills, strokes and text. How a text box grows is in Layout.

Typing into several at once

Select several texts, right-click one of them and choose Select, then Children (or press Enter). You type into the first; when you stop, the others take the same words. A quick way to fix a label repeated across screens.

Pictures

On the toolbar, click Place a picture (the picture, after Text) to pick one or more from your computer, iPhone photos (HEIC) included. You can also drag pictures onto the board, where they go into the frame you drop them on, or paste them.

• Each picture is a layer straight away, at its own size, and you can move it while it uploads. Others in the file see a grey box until it is up.
• Up to 20 come in at a time.
• A picture over 4 MB is made smaller to fit, up to 4,096 px on its long side.
• An SVG file comes in as a vector drawing you can edit, not as a picture.

To fill a shape or frame with a picture, use a picture fill instead: see Picture fills.

Cropping

Select a picture and click Crop, the last button beside its name at the top of the right panel, or double-click the picture. The whole picture shows, dimmed outside the part you keep.

• Drag the box's sides and corners to choose what to keep.
• Drag the picture to move it under the box.
• Drag the picture's own corners to make it bigger or smaller.

To finish, click elsewhere on the board, or press Enter or Esc. With a picture selected, holding ⌘ while you drag one of its handles crops straight away. A rotated picture can't be cropped.

Eyedropper

The Eyedropper has no toolbar button. Open a fill's colour picker in the right panel and click Pick a colour from the screen, or press I. Then click anywhere on your screen, in Kite or outside it. The colour becomes the fill of what you have selected: a text's colour, a drawing's paint. With nothing selected, the key copies its hex code instead. It works in Chrome, Edge and Kite for Mac.

Scale

With Scale, resizing a layer scales everything in it with it: text sizes, stroke widths, corners and shadows, keeping its proportions. Use it to turn a 1440 px design into a 720 px one. Otherwise it selects and moves as Move does.

It has no toolbar button: open the file menu (the Kite mark, top left), choose Keyboard shortcuts and click Scale (or press K). That list runs any command you click in it.

Zoom

With Zoom, click on the board to zoom in on a spot, hold ⌥ and click to zoom out, or drag a box to fill the view with it. It has no toolbar button: click Zoom in the file menu's Keyboard shortcuts (or press Z). To jump to 100%, or back to the whole page, click the zoom percentage at the top right. More ways to zoom are in The canvas.