Styling Layers

The Inspector

The inspector is hidden by default, so the canvas gets the full width. Open it with the panel button at the right end of the floating toolbar, the Cmd/Ctrl Alt 2 shortcut, or "Show inspector" in the command palette (Cmd/Ctrl K) — it slides in over the canvas and stays open until you close it, across sessions.

With the inspector open, select a layer and its style controls appear. The inspector adapts to what you've selected: a text layer shows text controls, an image layer shows color adjustments, a frame shows Auto Layout, and so on. Only the sections that apply to the current selection are shown, so you won't see options that don't do anything. With nothing selected, the panel shows your theme styles instead.

Select multiple layers to edit them together. Most fields show a shared value when the layers match, or a placeholder when they differ.

Numeric fields

Every numeric field in the inspector — size, spacing, radius, opacity, text size and spacing, and the rest — takes the same input:

• Type a value, or an expression like 560 - 20, and press Enter.
• Click into the field and scroll to step the value up or down: 1 per notch, 10 with Shift, 0.1 with Alt. Scrolling only changes the field you're in, so you can still scroll the panel past the others.
• Arrow Up / Arrow Down nudge by the same amounts.
• Where the field has a label inside it (W, H, X, Y, and friends), drag the label sideways to scrub the value.

Dimensions

Set position and size at the top of the inspector.

• X / Y — position on the canvas.
• W / H — width and height. Use the constrain-proportions toggle (the link icon between them) to keep the aspect ratio when you change one.
• Rotation — angle in degrees.
• Flip horizontal and flip vertical buttons mirror the layer.

On frames you'll also find a scale-contents-on-resize toggle, which scales child layers along with the frame instead of repositioning them.

Constraints

For a layer inside a frame or artboard, the Constraints section (just below the dimensions) controls how it behaves when its parent is resized. Set a constraint for each axis with the dropdowns, or click the edge pins in the diagram.

• Horizontal — Left, Right, Left & Right (stretch to keep both margins), Center, or Scale.
• Vertical — Top, Bottom, Top & Bottom (stretch), Center, or Scale.

Pinning an edge keeps that layer's distance to the frame's edge constant; Scale grows the layer in proportion with the frame. New layers default to Left + Top.

Clip content — when a group, frame, artboard, or component is selected, a Clip content checkbox sits in the same area. Turn it on to hide anything that extends past the container's bounds, regardless of whether the container uses Auto Layout. Artboards and components clip by default; turn it off to let content spill outside.

Alignment

With two or more layers selected, use the alignment buttons to line up their edges or centers — left, center, right, top, middle, bottom.

Auto Layout

Add Auto Layout to anything: right-click a layer (or several) and choose Add auto layout, or press Shift A. A single group or frame gets it applied directly; a loose shape or a multi-layer selection is wrapped in a new frame first. The gap is measured from where the layers already sit, so the first and last keep their place while everything between is evenly spaced. You can also turn it on for an existing frame with the + in the Auto Layout inspector section. Children then arrange automatically as you add, remove, reorder, or resize them. Use the same shortcut (or Remove auto layout) to turn it back off.

• Direction — horizontal or vertical.
• Sizing — set each axis to Fixed (you control the size) or Hug (the container shrinks to fit its children).
• Gap — space between children.
• Padding — space inside the container, around its children.
• Packing — how children sit along the layout direction: start, center, end, or space-between.
• Cross-axis alignment — how children align on the other axis.

Auto Layout nests: a frame inside an auto-laid-out frame can have its own direction and sizing, so you can build rows inside columns.

Dragging a child's edge sets its size on that axis: a child that filled the container's width now keeps the width you drag it to, while the rest of the stack re-flows around it.

When you select a frame (or anything inside it) and then paste, insert an asset, or add an icon, the new content drops into that frame and joins its layout right away — no need to drag it in afterward.

Fills

A layer can have one or more fills, stacked from bottom to top. Add a fill with +, and for each one choose a type:

• Solid color.
• Gradient — linear, angular, or radial, with as many color stops as you need.
• Image or pattern.
• Shader.

Click a fill's swatch to open the color picker. Each fill has its own on/off checkbox and opacity, so you can layer effects or temporarily hide one without deleting it.

Frames take fills, borders, radius, and shadows just like a shape — style the frame itself to make a card or badge, instead of putting a separate background rectangle behind its contents.

Borders

Add a border with +, then set:

• Width.
• Position — inside, center, or outside the layer's edge.
• Color or fill type (borders accept the same fill types as fills, including gradients).
• Line cap and join, which control how the ends and corners of open paths are drawn.

Shadows & Inner Shadows

Drop shadows fall outside the layer; inner shadows sit inside it. Both let you set:

• X / Y offset.
• Blur — how soft the shadow is.
• Spread — how far it grows beyond the offset.
• Color.

Add more than one shadow to build up depth.

Blur

Choose a blur type and set its radius:

• Gaussian blur softens the layer itself.
• Background blur blurs whatever sits behind the layer (frosted-glass effect) and adds a saturation control.

Opacity

Set how transparent the whole layer is with the opacity slider or by typing a percentage in the numeric field. This affects the layer and everything inside it.

Radius

Round the corners of a rectangle or frame.

• Set a single radius for all corners, or switch to per-corner values to round each corner independently.
• Corner smoothing controls the curve of the rounding, with an iOS preset for the squircle look found on Apple devices.

Text

Text layers show typography controls:

• Font family and size.
• Color.
• Weight and traits (such as italic).
• Letter spacing, line spacing, and paragraph spacing.
• Alignment — left, center, right, justified.
• Resizing — Auto Width hugs the text on both axes, Auto Height keeps the width and grows down to fit, and Fixed keeps the box exactly as sized. The one you pick wins over an auto-layout parent that would otherwise stretch the box to fill, so the text box stays the size you chose.
• Transform — uppercase, lowercase, capitalize.
• Decoration — underline or strikethrough.

The text Color and the layer's solid Fill are the same color — change it in either place and the other follows.

Selection colors

Select several layers — or a frame, and the section covers everything inside it — and Selection colors lists every solid color in the selection, each shown once no matter how many layers use it. Solid fills, borders, text colors, and frame backgrounds are included; the same color at a different opacity gets its own row, and colors linked to a theme color show its name.

• Edit a row — through the swatch's color picker, the hex field, or the opacity field — and every layer using that color updates at once. It's the quickest way to recolor a whole design without hunting down each layer.
• Click the target icon on a row to select all layers that use that color.
• Collapse the section by clicking its header; it shrinks to a compact strip of swatches.

Color adjustments

Image layers include adjustments that affect how the image is displayed without changing the source file:

• Hue.
• Saturation.
• Brightness.
• Contrast.

Image layers also have AI image actions for editing the picture itself — see AI image editing.

Shared styles

Save a layer's look as a reusable style, then apply it to other layers in one click. When you change the shared style, every layer using it updates together. You can also update a shared style from a layer you've tweaked, or detach a layer so it keeps the current look as its own one-off styling.

Export

Add export settings to a layer to control how it leaves the app.

• Click + to add an export setting, then pick a format and a size or scale (for example 1x, 2x, or a fixed width).
• The preview shows how the export will look.
• Download as PNG, JPEG, PDF, SVG, or WebP.

For exporting whole pages or several layers at once, see Exporting.