Set fills, strokes, corners, and shadows in Design

Select a Layer and use the Design tab of the Inspector. Its sections run from what the Layer is to how it looks: Layer, Position and size, Text for Text Layers, Appearance, Fill, Stroke, and Effects, then the layout sections. Number fields accept arithmetic such as 24*2.

Appearance sets the Layer's opacity as a percentage and its blend mode. Rectangles, Frames, Components, Instances and images also have Corner radius. Enter one value for every corner, or four values for top left, top right, bottom right and bottom left, for example 12 12 0 0.

Fill can be None, Solid colour, Linear gradient, or Radial gradient. A solid fill has a colour and its own opacity. A gradient has a start and end colour; a linear gradient also has an angle in degrees, as in CSS: 90 runs left to right and 180 runs top to bottom. Text colour is the Text Layer's fill.

Stroke is off until you choose Add stroke. Set its colour, width and style (Solid, Dashed or Dotted), or choose Remove stroke.

Effects holds up to eight effects, drawn in order. Choose Add effect, then pick Drop shadow, Inner shadow or Blur. Shadows have a colour, X and Y offset, blur, spread and opacity. Blur softens the whole Layer. Choose Remove effect to take one away.

For images, Image fit chooses whether the picture fills the Layer and is cropped, fits inside it, or stretches to it. Alt text describes the image for people using screen readers.

Select two or more Layers to change their opacity together.

The canvas, the Prototype viewer and exports draw fills, strokes, corners and effects the same way. Inspect shows the matching CSS.

If a fill, stroke or effect looks different in a Prototype or export than on the canvas, Contact support.