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). Turn the switch off for no background: the frame shows a checkerboard on the canvas and exports transparent (PNG, PDF, SVG and alpha video; formats without transparency, like JPEG and MP4, get white).
  • With more than one frame in the document, Delete removes the selected one.

With several layers selected

Select more than one layer (Shift-click on the canvas or in the layer panel) and the inspector edits them together: the top reads "2 Layers" (or however many), and every change applies to each selected layer as one undo step.

  • Shown: Layout (position, size, scale, rotation, 3D rotation, constraints), Appearance (opacity, fill, stroke), Effects, Crop, and Modifiers. Content sections (Rectangle, Polygon / Star, Image, Text type settings) appear only when every selected layer is that kind.
  • A value that differs between the layers shows Mixed (an empty number field, or a "Mixed" note next to a switch or section). Typing a value or changing the control sets the same value on all of them.
  • Size with the proportions lock on keeps each layer's own proportions.
  • Per-layer items are hidden: name, keyframe diamonds, Follow, Link to Frame, the Timeline window, text content and counters, text animation, video / sound clips, Use as Mask and track matte.

Layer

  • Name — the layer's name (double-click in the layer panel also renames).
  • Link to Frame — while presenting, a click on this layer (group, frame) opens the chosen frame; None removes the link. See Present your frames.
  • Template Slot — marks this layer as an input of a template: Role names it (headline, feature1, screen, icon…; the same role in several frames is filled once), Kind says what goes in (Text, Image, Video, App Screen — a recording shown where the template shows one — or App Icon). Text slots take a character limit; pictures and clips a fit (Cover or Contain) and, for clips, a minimum length; Required and a Hint describe the input. Only what the slot says is replaced when the template is filled — the look, place and motion stay. File ▸ Validate Template… lists the slots and anything that keeps the document from being a template.

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.

  • Language — which language's words the Content field edits, when the document has languages (see below): the base language is the layer's own text; another language's field shows its translation, with the base words as a placeholder while it's empty. Add Language… opens the document's languages.
  • Content — the text (multi-line).
  • Font — an installed font family ("System" at the top = the system font). The list shows each family in its own typeface, so you can see what it looks like before choosing; type in the search field to narrow it down. Symbol fonts show their names in the system font.
  • Add Font File… — embeds a TTF / OTF / TTC font in the document (for example a free pixel font) and switches the selected text to it. The font is saved inside the .lcanvas, so the document looks the same on a Mac that doesn't have it installed; it then appears in the Font list.
  • Weight — Thin to Black. The face of the family closest to that weight is used (a variable font is set to it).
  • The system typefaces can be named the way people know them: SF Pro (also SF Pro Display / SF Pro Text), SF Pro Rounded, SF Mono and New York all draw with the system's own fonts, so they look the same on every Mac, iPhone and iPad whether or not the SF fonts are installed.
  • Italic — toggle.
  • Size — font size.
  • Alignment — left / centre / right / justified, and next to it the vertical alignment: top / middle / bottom — where the lines sit in a Fixed Size box that is taller than they are (a label centred on a button, a caption pinned to the bottom of its box). Text taller than the box runs on below it (top), past both edges (middle) or upward (bottom). Auto Width and Auto Height boxes hug their lines, so it shows only once the box is fixed. New text starts at middle; text from documents made before this option stays at top, so older documents look the same.
  • 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. Text taller than the box runs on below it (like Figma) instead of disappearing — a big number in a box shorter than its line still shows.
    • 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.

Document languages

One document, the same design and motion, different words: File ▸ Document Languages… registers the document's languages (the first is the base — every text layer's own words; Make Base swaps another language in and keeps the old base as a translation). Then type each text layer's translation in the inspector's Language ▸ Content, or switch View ▸ Language and edit the words on the canvas. The canvas, playback, Presentation Mode and every export show the language chosen in View ▸ Language (saved in the document, undoable); a layer without a translation shows its base words. Auto-sized text boxes refit to the translated words. Export All Frames writes every language (see Export). Translations live in the document bundle beside the design, so a document opened in an older version keeps them.

Text on Path

Shown for text set on a path (Attach Text to Path, see Vector editing).

  • Offset — where the text sits along the path, in percent of its length (0–100; a closed path such as a circle wraps around). It has a keyframe diamond: key it at two times and the text runs along the path.
  • Align — whether the text starts, is centred or ends at the offset.
  • Side — Above (letters stand on the line; outside a circle) or Below (letters hang under it; inside).
  • Flip — the text reads the other way and turns over to the other side — e.g. readable along the bottom of a circle. The offset stays where it was.
  • Baseline Shift — moves the letters away from the line (pt; + = up).
  • Show Path — draws the path itself as a thin line under the text.
  • Detach from Path — ordinary text again.
  • Resizing the box stretches the path with it. Letters past the ends of an open path are hidden.

Follow Path

Shown for a layer sent along a path (Animate ▸ Follow Path…, see Animation).

  • Progress — how far along the path the layer is, in percent of its length. It has a keyframe diamond; changing it moves the layer along the path.
  • Orient to Path — the layer turns to face the way it travels (its own rotation is added on top).
  • Remove from Path — the layer stays where it is and its Path Progress keyframes go.

Video

Shown for video elements.

  • Source Length — how long the video file is.
  • Clip Start / Trim In / Trim Out — placement on the timeline and the start/end trims. Trim In and Trim Out are times in the source (seconds of the recording), so they don't change with Speed.
  • Length — how long the clip runs on the timeline: the trimmed part at the clip's speed ("4.00 s at 2×").
  • Speed — plays the clip faster or slower: pick 0.25× … 4× from the menu or type a percentage (10–1600 %). The clip keeps its start and its trimmed part, so at 2× it takes half as long on the timeline and at 0.5× twice as long (the timeline grows to fit). Keyframes inside the clip — an auto-zoom, say — stretch with it so they stay on the moments they were set on. The sound plays at the same speed and keeps its pitch, in playback and in exports. Dragging the clip bar's edges trims in timeline time.
  • 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) · Frame

Shown for image and video elements, and for nested frames.

  • Corner Radius — rounds the corners of the image or video (applied in exports and on both platforms). On a frame it rounds the background, the border and the clip of its content (canvas, video, image and HTML exports; SVG and Lottie exports don't draw frame backgrounds).

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), Weight and Position (Inside / Center / Outside). Position decides whether the line sits inside the outline, straddles it or sits outside it; the visible line is always Weight thick. It works on text too, giving letters an outline; turned on for text it starts Outside so the letters don't get thinner.
  • Outlined text: turn Fill off and Stroke on — the letters are drawn as outlines only, on the canvas and in every export. (Text with neither fill nor stroke still draws black.)
  • Fill on text works like on shapes: besides a solid colour it takes gradients (linear, radial, angular). While you type on the canvas the text shows the gradient's first colour; once editing ends it draws the full gradient. SVG export carries text gradients and outlines too.

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.

With two or more effects, Order at the top lists them all in the order they are applied: ⌃ / ⌄ move one up or down (a blur before or after a colour change looks different), the eye switches one off without losing its settings (it is not drawn or exported; switching it back on puts it at the end), ⊖ removes it. iPhone / iPad: Effect Order.

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.
  • Offset and blur are in the layer's own points: a shadow grows and shrinks with the layer — its scale, the group or camera it sits in, the canvas zoom and the export scale (a 2× export is the 1× image at double resolution, shadow included). The offset keeps its direction on the artboard: +Y stays down when the layer or its group is rotated, as in Figma and Sketch.
  • Shadows show in the canvas preview and in image/video exports. HTML exports draw them with CSS, which turns the offset with a rotated layer (the export lists a warning). (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.

Distortion: RGB Split, Glitch, Wave, Noise Warp

Four effects that move the layer's pixels — for glitch hits, heat haze, water and a hand-drawn wobble. They render with Core Image, identically in the canvas, frame renders and image/video exports, and can be combined with each other and with the other effects (they apply in list order).

  • RGB Split (chromatic aberration) — the red channel moves one way and blue the other, so edges get colour fringes. Amount (pt) and Angle (0° = sideways, 90° = up/down); both keyframe with the diamond (◇).
  • Glitch — the layer is cut into horizontal slices that jump sideways, with a small RGB split. Amount (0…1, keyframes with ◇), Slices (1…64), Distance (the biggest jump at full amount, pt), Rate (new patterns per second; 0 holds one pattern) and Seed (another pattern). The pattern changes by itself and always comes out the same for the same seed and moment, so a glitch hit only needs two or three Amount keyframes (0 → 1 → 0).
  • Wave — a sine distortion. Style: Wave (rows slide sideways — a flag, heat shimmer, underwater) or Ripple (rings spreading from the layer's centre). Amplitude (pt), Wavelength (pt) and Phase (°) keyframe with ◇; Speed (cycles per second) makes it travel on its own; Angle turns the direction a Wave pushes.
  • Noise Warp — smooth random displacement: heat haze, a "boiling" hand-drawn line. Amount (pt) and Scale (blob size, pt) keyframe with ◇; Speed makes the noise evolve; Seed picks another noise.
  • Exports: video and images are exact. HTML export turns them into SVG filters — RGB Split and Wave match, Glitch, Ripple and Noise Warp are close approximations (the export lists them). SVG export draws them as a still (their state at 0 s). 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 — up to 200 copies — in a line, a grid or a ring; one layer instead of hundreds.

  • The toggle in the title row — on/off.
  • Copies — number of copies. With a keyframe diamond: animate it and copies appear one by one (between whole numbers the last copy fades in).
  • Layout — Line (each copy steps on from the one before), Grid (rows of Columns, Spacing X × Y apart) or Ring (copies on a circle of Radius around the layer's centre, over Arc°, from Start Angle; Turn with the Ring points each copy outwards).
  • Offset (X, Y) / Rotation / Scale (Line) — movement, turn (degrees) and size (%) accumulated per copy. Offset, Rotation (the Ring's start angle — keyframe it to spin the ring) and Scale have keyframe diamonds.
  • Opacity (start, end) — opacity of the first → last copy (fade out along the copies).
  • Delay — a time offset in seconds: each copy plays the layer's own animation that much after the one before (copy *i* is the layer *i* × Delay seconds ago). Animate the layer once — a pop-in, a slide, a colour change — and the copies follow as a cascade or an echo. Each late copy also appears late (its appear time moves with it).
  • Falloff — the far copies (the last one, or the outer ones) reach these values, the ones between some of it: Opacity %, Scale %, Rotation °, Tint (a colour mixed into the fill and stroke). Curve shapes how it spreads (Linear / Ease In / Ease Out / Ease In Out), Reverse starts from the other end, From the Centre measures from the middle copy (in a grid, by distance from its centre — a ripple), Delay Follows Falloff makes the copies start in that order instead of one after another.

Shape Modifiers

Shown for shapes. A stack of outline changes, applied in order before Trim Path, paint and the Repeater. + adds one; each row has an on/off checkbox, its amount (with a keyframe diamond on the first modifier of each kind), ▲ ▼ to reorder and − to remove (iPhone / iPad: the ⋯ menu).

  • Round Corners — rounds sharp corners by the amount (pt; at most half of each edge). Curved points stay as they are.
  • Zig Zag — pushes points alternately to either side of the outline by the amount (pt), Ridges per segment; Smooth makes waves instead of points.
  • Wiggle Path — a hand-drawn wobble: points drift up to the amount (pt), Speed wobbles a second (0 = still), Detail points per segment, Seed for another pattern.
  • Offset Path — grows the outline by the amount (pt) or shrinks it (negative); Corners miter / round / bevel. An open line becomes the outline of a band that wide.
  • Pucker & Bloat — negative amounts (%) pull the points in with pinched edges, positive ones push the edges out.
  • Exports: Lottie keeps Round Corners, Zig Zag, Offset and Pucker & Bloat as its own (animated) modifiers and bakes a Wiggle Path into path keyframes; HTML draws a still outline as it is and samples moving ones 30 times a second (it says so in the warnings); SVG draws the outline at that moment.

Point (path anchor)

Shown when a path anchor is selected.

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

Keyframe banner

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.