Dimensions
Set and constrain the width and height of a layer.
Width and height
The dimensions fields appear in the inspector when a layer is selected. Width (W) and height (H) always reflect the layer's current size in pixels at the canvas's base resolution.
- Click a field and type a value to set an exact size.
- Press Tab to move between W and H.
- Increment by 1 px with the ↑ / ↓ arrow keys; hold Shift to increment by 10 px.
Aspect ratio lock
Click the lock icon between the W and H fields to constrain the aspect ratio. When locked, changing either dimension automatically scales the other to maintain the original ratio. This is useful for images, icons, and logos where distortion is undesirable.
Sizing modes
Frames and certain containers support additional sizing modes that control how the dimension responds to content:
| Mode | Behavior |
|---|---|
| Fixed | The dimension is a fixed number. Content that overflows is clipped. |
| Fit content | The dimension shrinks or grows to wrap its children. Works like fit-content in CSS. |
| Fill container | The dimension expands to fill the available space in the parent frame. Works like flex: 1 in a flex container. |
Switch between modes using the icon buttons next to the W or H field (available when the layer is inside a frame with a layout mode active).
Minimum and maximum size
When a layer uses Fill container or Fit content sizing, you can set optional minimum and maximum dimensions to bound how large or small it can grow. This is equivalent to min-width / max-width in CSS.
To set min/max:
- Select the layer inside a frame with layout active.
- Click the advanced sizing control (the arrow icon beside the W or H field).
- Enter the minimum and/or maximum value.
Tips
- Set both min-width and max-width on a Fill-container element to keep it responsive while preventing extreme sizes.
- Lock aspect ratio before resizing any image — it prevents unintended stretching.
- For icon layers that should stay square, set W and H to the same value and lock the ratio before handing off to developers.
- In fixed-size frames, switch to Fit content temporarily to see the natural size of content, then switch back to Fixed to enforce a boundary.