Fills, strokes and text

Most sections start empty, with a + at their right: press it to add a fill, a stroke or an effect. Each one you add gets an eye to hide it for a while and a − to remove it. When the layers you selected differ, a field says Mixed.

Appearance

Opacity

In the right panel's Appearance section, type a percentage in the opacity field. The eye in the section's heading hides or shows the layer.

The number keys set it too, with layers selected: 1 is 10%, 5 is 50%, 0 is 100%. Two numbers typed quickly give an exact value: 5 then 5 is 55%.

Corner radius

One number rounds every corner. Press Independent corners, beside it, to give each corner its own. Kite has no corner smoothing control; smoothed corners in a paste from Figma keep their shape where your browser can draw it.

Blend modes

The drop in the section's heading sets how the layer mixes with what is under it: Pass through / Normal, Multiply, Screen, Overlay, Darken, Lighten, Color dodge, Color burn, Hard light, Soft light, Difference, Exclusion, Hue, Saturation, Color and Luminosity. Once set, its name shows in the section, so a layer that seems to vanish has an explanation.

Fills

A layer can have several fills, listed top first, each showing through the see-through parts of the one above. Click a fill's swatch to open it; type a hex code and opacity straight into its row; drag rows to reorder them. A text's fill is its colour.

The fill's window has three tabs: Solid, Gradient and Image. Blend, at its top, mixes this fill with the fills under it.

The colour picker

• Drag in the square for saturation and brightness, and along the sliders for hue and opacity.
• Choose Hex, RGB or HSL for the numbers. Kite keeps your choice for the next picker.
• Paste any colour into the field, like white, rgb(…) or oklch(…).
• Pick a colour from the screen takes one from anywhere you can see, as the Eyedropper does (Chrome, Edge and the Kite app).
• On this page lists the colours already used on the page, to pick again.

Gradients

Switching a fill to Gradient runs it from its colour to a slightly darker one. Choose Linear or Radial. A conic or mesh gradient pasted from Figma keeps its kind, and you can edit it here; a mesh's four corners each have a colour.

• The bar shows the stops. Click it to add one, drag one to move it, or or click the − on its row under Stops to remove it. A gradient keeps at least two.
• The diamonds under the bar are the midpoints between two stops: drag one to shift the blend, double-click it to centre it again.
• Angle, Space the stops evenly, Flip the gradient and Rotate 90° sit by the bar.
• Interpolation is the colour space the stops blend in: sRGB, Linear sRGB, OKLab, OKLCH or OKLCH, longer hue. OKLab and OKLCH avoid the grey middle between two bright colours.
• A radial gradient also has its centre (X, Y) and how far it reaches (W, H), as percentages.
• Under Stops, each stop has a row: where it sits, its colour, and a −.

On the board, a selected layer shows its gradient's handles: for a linear one, a line with a handle at each end to turn it (hold ⇧ for steps of 15°) and a dot for each stop; for a radial one, its centre and handles to size it.

Picture fills

Choose the Image tab and pick a picture from your computer. Then choose how it fills the layer:

• Fill: covers the whole layer, cut where it must.
• Fit: the whole picture shows inside the layer.
• Crop: crop it on the board, as for a picture (see Cropping).
• Tile: repeats it.

Click the picture's thumbnail to put another in its place. A picture layer's own picture is its first fill: it can be fitted and cropped, not tiled, and the + adds a colour or gradient on top of it.

Strokes

Press the + beside Stroke. Each stroke has a colour and:

• Position: Inside, Center or Outside the layer's edge.
• Weight: how thick it is.
• Style: Solid, Dashed or Dotted.
• Sides, for a stroke inside: All sides, Top, Right, Bottom or Left, for a divider line under a row.

Drawings (vectors) and combined shapes have more:

• Custom dashes, with the length of each Dash and Gap.
• Caps: No cap, Round cap or Square cap. Joins: Miter join, Round join or Bevel join.
• On an open path, what it starts and ends with: None, Line arrow, Triangle arrow, Circle, Square or Diamond.

A text's stroke goes Outside or on the Center of its letters. Lines and arrows drawn with the shape tool set their ends in their own section (see Lines and arrows).

Effects

The + beside Effects adds a drop shadow. Change it to another kind from its menu:

• Drop shadow and Inner shadow.
• Layer blur: blurs the layer itself.
• Background blur: blurs what is behind the layer, for frosted glass. Give the layer a see-through fill to see it.
• Brightness, Contrast, Grayscale, Hue rotate, Invert, Saturation and Sepia, on the layer or on what is behind it.

The settings button beside an effect opens its numbers. A shadow has Position (X and Y), Blur, Spread and Colour; on a drawing, Show behind transparent areas lets it show through see-through parts. A blur has its amount. The other filters have an Amount and, under On, Layer or Background. Drag effects to reorder them.

A group's shadows follow the shapes in it, and a text's follow its letters.

Text

Select a text and the Text section shows its font, Weight, size, line height (Auto, a percentage or pixels) and letter spacing (a percentage or pixels), with how the words align across and down. For bold, pick a heavier Weight. Italic is a button in the section's heading, and underline is under Decoration in the type settings, below.

Fonts

Click the font to open the list. Search fonts finds one by name, each shown in its own face, under the tabs All, Page, Workspace, Local and Google:

• Page: fonts already used here, so you stay consistent.
• Workspace: fonts your team has added, which everyone who opens the file sees, and which exports use. Upload a font… adds one (.ttf, .otf, .woff or .woff2).
• Local: fonts on your computer, in Chrome and Kite for Mac once you allow it. They draw only for you, so use Add to workspace on one before others need it.
• Google: every Google font, loaded as you pick it.

For a Google or workspace font, Weight lists the weights it really has. A font that nothing can load is marked in the field and drawn in a fallback. With nothing selected, the right panel lists the file's Missing fonts: choose Replace fonts… to swap them for others, Add one found on this computer, or Upload fonts….

Styling some of the words

While you type, select some words. The section's Selected words row then styles just those: Bold, Italic, Link (type the address, or Remove link), their colour, font and size. Everything else in the section still sets the whole text.

Type settings

The settings button in the Text heading opens Formatting, with a preview and three tabs:

• Basics: Alignment (with Justify); Case (As typed, Uppercase, Lowercase, Title case); List (No list, Bulleted list, Numbered list), each line an item; Paragraph spacing; Decoration (None, Underline, Strikethrough); Wrap (Normal, Balanced for even headline lines, Pretty to avoid a lone last word); CJK words; and Truncation, which keeps it to one line ending in …
• Details: the font's own features, like number styles, ligatures, alternates and stylistic sets. What a font doesn't have changes nothing.
• Variable: for a variable font, a field for each of its axes.

Selection colours

When what you selected uses two or more colours, Selection colours lists each one and how many times it is used. Change one there and it changes everywhere in the selection, colours inside drawings included. Select a whole frame to recolour a screen in a few clicks.

Copy, remove and swap

• Right-click a layer and open Copy/Paste as. Copy properties copies the layer's look: its fills, strokes, corners, effects and type. Then right-click the layers to change and choose Copy/Paste as, then Paste properties: they take it in place of theirs; where they are and their size stay. The keys are ⌥⌘C and ⌥⌘V.
• To remove a fill or a stroke, click the − on its row in the right panel. Remove fill (⌥/) and Remove stroke (⇧/) take every one off the selection at once. A picture layer keeps its picture.
• Swap fill and stroke trades their colours, to turn a solid button into an outlined one. It has no button: open the file menu (the Kite mark, top left), choose Keyboard shortcuts and click it (or press ⇧X).

The CSS section

At the foot of the panel, CSS (with how many properties the layer has) opens every property of the layer as it is written. Change a value in place, or type property: value on the last line and press Enter to add one. It is there for anything the sections above don't show. To take a layer away as code, use Copy as HTML, Copy as React or Copy as Tailwind (see Export and copy).

Variables and styles

Colours, sizes, radii, gaps and more can come from your design system rather than a typed value. A field that can take one has Apply variable: pick a variable and its name shows in place of the value; change the variable and every layer using it follows. Detach variable keeps the value and lets go of the variable.

Fill, Text, Effects and Layout grid also take Styles, a set of values saved under one name, from the button in their heading. Choose Create style… to save the current look as one, or Detach style to edit it on this layer alone.