Inspector (editing properties)

The inspector on the right edits the properties of the selection. With nothing selected it shows "No Selection".

When changes apply: number and text fields commit on Return or when focus leaves; sliders, colours and knobs apply immediately.

Sections are grouped into categories with icons, top to bottom: Layer → Layout → content (Text / Video / Rectangle / Polygon / Image) → Appearance → Effects → Mask → Modifiers → Timeline. Sections that do not apply to the selected layer type are hidden.

With a Frame (artboard) selected

Click an artboard's label (or its section header in the layer panel) to select the Frame itself; the inspector switches to Frame editing.

Name — the frame's name.
Preset — built-in sizes (1920×1080 (16:9), 1280×720 (16:9), 1080×1080 (1:1), 1080×1920 (9:16), 1440×1024). Choosing one resizes the frame (layers reposition according to their Constraints). A size not in the list shows as Custom.
Size (W, H) — type the size directly.
Background — background colour (with opacity).
With more than one frame in the document, Delete removes the selected one.

Layer

Name — the layer's name (double-click in the layer panel also renames).

Layout

Alignment — six buttons at the top of the section align the selection. Left group: left / centre (horizontal) / right; right group: top / middle (vertical) / bottom. With several layers selected, alignment is relative to the selection; with one, relative to the artboard.
Position (X, Y) — the element's position (top-left based).
Size (W, H) — width and height. The padlock (lock aspect) between them keeps the original proportions when either value changes, and locks the proportions for handle drags too (Shift on the Mac does the same). The lock is saved per layer in the document (undoable). (Path shapes show their real path bounds; changing the values transforms the path to that size.)
Scale (X %, Y %) — the transform scale, separate from the box size (100 = original). This is what the Scale X/Y keyframe tracks and the Scale constraint change. Size always shows the visible size (box × scale); editing Size or resizing on the canvas while a scale is applied bakes the scale into the size and returns Scale to 100% (stroke widths, corner radii and the like adjust so the look stays the same). With the timeline on, the Size/Scale keyframe at that time is updated.
Rotation — the angle, typed or turned with the dial (knob). The knob is relative: it adds or subtracts the amount you turn (clockwise +, counter-clockwise −), so from −60° a small turn gives −50° rather than jumping to a 0–360° value.
Constraints — how the element follows its parent (Frame or Group) when the parent is resized (Figma style). The default is Left / Top (pinned to the parent's top-left = the absolute positioning you had so far). Pick one horizontal and one vertical rule:
- Horizontal: Left (left gap fixed) · Right (right gap fixed) · Left and Right (both gaps fixed → the width grows) · Center (offset from the parent's horizontal centre kept) · Scale (position and size scale with the parent's width).
- Vertical: Top · Bottom · Top and Bottom (the height grows) · Center · Scale.
- Set them with the two dropdowns, or click the bars of the pin widget on the right to toggle edge pins (one side → clicking the opposite side pins both, clicking again gives Center). Center and Scale are chosen from the dropdowns.
- Changing a constraint does not move the element (the gaps are recomputed from where it is). Repositioning happens when the parent is resized. *On the Mac, resizing the Frame (artboard) applies it immediately.*

Text

Shown for text elements.

Content — the text (multi-line).
Font — an installed font family ("System" at the top = the system font).
Weight — Thin to Black.
Italic — toggle.
Size — font size.
Alignment — left / centre / right / justified.
Line Height — line spacing (multiplier).
Tracking — letter spacing (pt).
Resizing — how the box follows the content (the same as Figma's text resizing).
- Auto Width (↔) — a single line whose width follows the content (only explicit line breaks wrap).
- Auto Height (↕) — fixed width; the height follows the wrapped lines.
- Fixed Size (□) — width and height fixed (content may overflow).
- Changing the content, font, size or tracking refits an Auto box. The top edge and the alignment edge (left for left-aligned, centre for centred, right for right-aligned) stay where they are.
- Resizing the box by hand on the canvas switches the mode: widening an Auto Width box makes it Auto Height; changing the height of an Auto box makes it Fixed Size.
Double-click text on the canvas, or press ⏎, to edit it in place. See Vector editing.

Video

Shown for video elements.

Clip Start / Trim In / Trim Out — placement on the timeline and the start/end trims (seconds).
Auto Rewind (Loop) — repeats the clip for the whole animation. The repeated range is the Trim In–Trim Out range at the moment you turn it on (including pieces made with Split Clip). While on, Trim Out may exceed the source length (up to the animation length), and if the animation is longer than the clip when you turn it on, the clip extends to the end automatically. Turning it off restores the previous range, so split pieces are kept. The timeline clip bar shows a ↺ marker where the loop restarts (Mac). Playback and export (video and audio) both loop.
Cursor Highlight / Zoom × — the cursor highlight and auto-zoom strength of a screen-recording clip.

Rectangle

Corner Radius — corner rounding.

Polygon / Star

Shown for polygon and star elements (the section is titled Star for stars).

Sides / Points — number of sides or points (3–24). The stepper changes the shape immediately.
Inner Radius — (stars only) the inner radius as a % of the outer one. Smaller values give sharper stars.
Corner Radius — corner rounding.

Image (images and video)

Shown for image and video elements.

Corner Radius — rounds the corners of the image or video (applied in exports and on both platforms).

When an image or video is added and its original is larger than the artboard, it is scaled down to fit inside the artboard while keeping its proportions (it never overflows).

Appearance

Opacity — slider or % field.
Fill — on/off; Solid / Gradient.
- Solid: a HEX field (#RRGGBB, #RRGGBBAA with alpha, #RGB shorthand), the eyedropper button (pick a colour anywhere on screen; shortcut I), or the colour picker.
- Gradient: type (Linear / Radial / Angular), angle (Linear / Angular), and several stops (edit each stop's colour and position (%); Add Stop / − to add and remove).
- Selecting a gradient layer shows a gradient editor on the canvas (Figma / Sketch style):
  - An axis line with end handles (circles) — drag an end to change the angle.
  - Each stop is a colour square on the axis. Click to select it (blue border + position badge), drag to move it (0–100%).
  - Double-click the axis to add a stop with the interpolated colour at that spot.
  - Radial / Angular: an elliptical outline and a handle perpendicular to the axis (circle). Dragging it changes the aspect ratio, stretching or squashing the gradient into an ellipse.
  - Angle and aspect animate with keyframes (between gradients of the same kind).
Stroke — on/off; colour (HEX / picker) and Weight.

Effects

Layer effects live in one section; each effect's controls unfold only when its toggle is on. Shadows are added with ⊕ on the right.

Shadows

Drop shadows behind the layer. Several can be stacked for multi-shadow looks (shadows higher in the list draw in front).

Add Shadow — adds a shadow (default: black 35%, 4 pt down, 8 pt blur).
Each shadow row:
- Colour picker — the shadow's colour and opacity (alpha).
- Offset (X, Y) — the shadow's offset (+Y is down).
- Blur — softness (pt).
- − — removes that shadow.
Shadows show in the canvas preview and in image/video exports. (Lottie export omits effects.)

Blur (layer blur)

A Gaussian blur over the whole layer. Based on Core Image CIGaussianBlur; identical in preview and in image/video exports.

The toggle in the title row — on/off.
Radius — blur radius (pt); larger is blurrier. The diamond (◇) next to the label keyframes it, so the radius animates (focus in/out).

Blur, bokeh and the other effects can be combined on one layer; they apply in list order.

Color Adjust

Colour correction for the layer. Based on Core Image (CIColorControls, CIExposureAdjust, CIHueAdjust); identical in preview and exports.

The toggle in the title row — on/off. (All values at their defaults = no visible change.)
Brightness — −1…1 (0 = none).
Contrast — 0…4 (1 = none).
Saturation — 0…4 (1 = none, 0 = greyscale).
Exposure — EV, −4…4 (0 = none).
Hue — rotation, −180°…180° (0 = none).
Each value has a diamond (◇) for keyframes (fade to greyscale, an exposure flash…).

Vignette

Darkens the layer's edges to draw the eye inward (spotlight / focus). Based on Core Image CIVignette.

The toggle in the title row — on/off.
Intensity — darkening strength (0…2, 0 = none).
Radius — size / falloff (0…3; larger pushes the dark ring outward).
Both keyframe with the diamond (◇).

Pixellate

Mosaics the layer into square blocks (hide sensitive details, or as a style). Based on Core Image CIPixellate.

The toggle in the title row — on/off.
Block Size — block size (pt); larger is coarser. Keyframes with the diamond (◇).

Bokeh (lens blur)

A depth-of-field (bokeh) blur: bright out-of-focus areas bloom into soft circular bokeh discs (backgrounds and decoration). Based on Core Image CIBokehBlur; identical in preview and exports.

The toggle in the title row — on/off.
Radius — disc radius (pt); larger is blurrier with bigger blooms. The diamond (◇) next to the label sets a keyframe at the current time so the radius animates (focus pulling in or out).
Ring — emphasis of the disc's edge ring (0…1). Higher values give more pronounced bokeh rings.

Performance: blurs are relatively heavy, but a result for the same shape and scale is cached and reused on later redraws (when nothing else is edited, moved or zoomed). Many blurred layers or very large radii can still slow things down. Blurs combine with shadows and the other effects. Lottie export omits them.

Mask

Use as Mask (Figma-style mask)

The toggle in the title row makes this layer a mask: the layers above it in the same group show only inside its shape, and the mask itself is not drawn. (Same as Arrange ▸ Use as Mask, ⌃⌘M.)
Type — Alpha (transparency) / Vector (outline only) / Luminance (brightness). See Layers for the details.

Crop

Clips this layer to a rectangle or ellipse (the layer clips itself). To mask one shape with another, use Track Matte above.

The toggle in the title row — crop on/off.
Shape — Rectangle / Ellipse. (Switching to Ellipse shows the elliptical clip immediately.)
Inset — how far to shrink from the edges (pt).
Mode — Add (inside only) / Subtract (outside only) / Intersect.
Inverted — swaps inside and outside.
Draw Path… / Redraw Path… — switches to pen mode; draw a freeform outline on the canvas and that closed shape becomes the layer's mask. Use Shape returns to rectangle / ellipse mode.
Exported to Lottie as a layer mask (masksProperties).

Sound

Shown for video and audio layers.

Mute — silences the clip (playback and export). Hiding the layer or its parent frame/group also silences it (what you cannot see, you cannot hear). To keep the sound while hiding the picture, set the layer's Opacity to 0.
Volume — overall level (0–200%, 100 = original). The slider applies immediately; the field applies on Return.
Fade In / Fade Out — the time the sound rises at the start / falls at the end of the audible span (seconds). When trimming or appear/disappear shortens the audible span, the fades apply at its actual ends; an Auto Rewind clip fades once over its whole span.
Audio layers also show Duration / Clip Start / Trim In / Trim Out here (the same meaning as a video's Video section). Dragging and trimming the clip bar on the timeline and Capture ▸ Split Clip at Playhead work on audio clips too.
On the timeline clip bar, fades draw as dark wedges and mute as a speaker icon.

Track Matte

Masks the layer with the layer directly in front of it (shown when there is one).

Track Matte — None / Alpha / Alpha Inverted / Luma / Luma Inverted.
- Alpha: the layer shows only where the front layer is opaque (Inverted: the opposite).
- Luma: the front layer's brightness is the mask (approximated with alpha in the app preview; exact in exported Lottie).
The front layer used as a matte is not drawn itself; it is consumed as the mask.

Modifiers

Shown for shape layers only.

Trim Path

Shown for shapes (rectangle / ellipse / polygon / path). Shows only part of the outline, for draw-on effects.

Trim — Start % / End %: the visible range (0–100%). Example: animate End from 0 to 100 with Start at 0 to draw the line on.
Offset — rotates the start point (degrees).
The diamond (◇) next to the label keyframes Start / End / Offset at the current time.

Repeater

Shown for shapes. Duplicates the shape several times, transforming and fading each copy a little more.

The toggle in the title row — on/off.
Copies — number of copies.
Offset (X, Y) — movement accumulated per copy.
Rotation — rotation accumulated per copy (degrees).
Scale — size accumulated per copy (%).
Opacity (start, end) — opacity of the first → last copy (fade out along the copies).

Point (path anchor)

Shown when a path anchor is selected.

Position (X, Y) — the anchor's local coordinates; type to move it precisely.

With the timeline on, the top of the inspector always shows which keyframe you are editing.

"Baseline keyframe · 0.00s" — the first (baseline) keyframe.
"Keyframe 2 / 4 · 1.50s" — that keyframe.
"Edits add a keyframe at …" — a time without a keyframe (editing creates one there).

See Animation for more.