Inspector: fills, borders, shadows and effects
Sketch-style styling: multiple fills, gradient borders, shadows, blur, blend modes, masks and Liquid Glass.
Select a layer and the inspector shows its properties above the tabs: the layer's @id and kind, Lock for AI, then sections for what fits that layer. Styling is a Sketch-style stack of sections. Sections without content show just their name and a +; sections with content fold with their chevron. Every change applies to all selected layers as one undo step.
The sections
| Section | Shown for | What's in it |
|---|---|---|
| Instance | Instances | Main component, start, speed, play mode, variants and props |
| Expose as prop | Layers inside an open component | ◇ next to each field that can become a prop |
| Text | Text | The text, Font, size (4–400 pt) and weight |
| Video | Video | Trim, timing, sound and playback |
| Auto Layout | Groups | Direction, gap, padding, alignment and sizing of a row or column; see Auto Layout |
| In Auto Layout | Children of a layout group | Fixed, Hug or Fill container, Collapse when hidden, Absolute position |
| Layer | All | Blend mode, opacity, Vectorize (images), Use as Mask |
| Corners | Rectangles | Smooth or Rounded, the radius with presets, and independent corners |
| Fills | All but groups, images and instances | A stack of solid and gradient fills |
| Borders | Rectangles, ellipses, paths | Paint, position, width and details |
| Shadows | All | Drop shadows |
| Inner Shadows | Rectangles, ellipses, paths | Inner shadows |
| Effects | All | Glass, fade, blurs and color adjust |
| Text animation | Text | Per-letter presets and timing |
| Motion | All | Actions in three groups: In, Idle, Out |
For every field, range and default, see the Inspector reference.
Layer
Opacity and blend mode: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge and Plus Lighter. Images also get Vectorize here (see Image trace), and any layer except a group can be Use as Mask (see Masks).
Corners
Corner radius, with Smooth (continuous, Apple-style; the default) or Rounded (circular arcs) corners. Scrub the radius by dragging its corner mark, pick a preset from 0 to 32 or Full (a pill), or switch to independent corners for a 2×2 grid of radii. You can also drag the radius dots on the stage. See Corner radius.
Fills
- Stack several fills: solid colors and linear, radial or angular gradients. Each fill has a switch, a swatch, the hex value (or the gradient kind), an opacity and a remove button.
- Click the swatch to open the paint editor: Solid, Linear, Radial or Angular, a gradient bar with stops, and a color picker.
- On a gradient fill, Blend to Another Paint crossfades the fill to a second color or gradient from the playhead. It animates in the timeline as
gradientMix. - Gradients can animate their angle and shift. See Gradients.
Borders
A border has a switch, a paint (color or gradient), a position (Inside, Center, Outside), a width in points (steps of 0.5) and a details button. The details open inline below the row:
| Detail | Options |
|---|---|
| Join | Miter, Round, Bevel |
| Cap | Butt, Round, Square |
| Dash | Dash length and gap length, plus presets Solid, Dash (8 / 4) and Dot (1 / 3) |
| Draw (paths) | Stroke presets, trim Start, End and Offset, Paths, Direction and Taper |
| Animate Dashes | Marching ants: the dashes travel along the stroke in a seamless loop (shown when there are dashes) |
The details button lights up while the border has dashes. See Stroke animations for the Draw section.
Shadows and inner shadows
Add as many as you like with +. Each has a switch, a color with opacity, and X, Y, Blur and Spread. A new drop shadow starts at Y 4, blur 12, black at 25 %; a new inner shadow at Y 2, blur 6. Shadows export to SVG in Figma's own layout, so they come back as effects in Figma.
Effects
| Effect | What it does | Values (defaults) |
|---|---|---|
| Glass | Liquid Glass behind the layer on macOS 26; a thin material on earlier versions | Blur (16) |
| Fade | Fades the layer out toward one side | Angle (180°), Edge (50 %) |
| Layer Blur | Blurs the layer itself | Blur (4) |
| Background Blur | Blurs what's behind the layer | Blur (20) |
| Motion Blur | Blur along a direction | Amount (12), Angle (90°) |
| Zoom Blur | Radial blur, for punchy entrances | Amount (20, up to 100), center X and Y (50 %) |
| Color Adjust | Adjusts the layer's colors | Hue, Sat, Bright, Contrast |
Text and rectangles also get Shimmer in the effects menu: a gradient sheen that sweeps across until the end of the scene.