Design Specs & Measurements

Select any layer and the Inspector shows X (distance from artboard left edge), Y (distance from artboard top edge), W (width), and H (height) — all in points. On a standard display 1pt = 1px; on Retina 1pt = 2px. Most teams design at @1x and export @2x assets. Always clarify which density your specs reference. A convenient feature: any Inspector number field accepts arithmetic. Type '48+16' and Sketch computes 64, keeping you on an 8pt grid without mental math. The Inspector is the authoritative source — never estimate values by visually scanning the canvas.

Hold Option while hovering over a nearby layer (with your target layer selected) and Sketch draws red measurement lines showing the gap in points. This instantly reveals padding between a button edge and its icon, margin between cards, or how far a label sits above a field. Values are always bounding-box to bounding-box — account for font metric whitespace (ascenders, descenders) when specifying text-to-element gaps, as a 16pt label may appear visually closer than 16pt to its neighbour.

1/* Sketch Option+hover measurements translated to CSS */
2/* Button W=160, label-to-left-edge=16pt, label-to-icon=12pt */
3.btn {
4  width: 160px;
5  padding-left: 16px;
6  gap: 12px;
7  padding-right: 16px;
8}

A text layer Inspector shows: font family, weight, size (pt), line height (pt, absolute), letter spacing (pt), and paragraph spacing. CSS line-height from Sketch is the absolute px value — not a unitless ratio. Letter spacing in em = Sketch pt value divided by font size pt. This conversion is the most error-prone part of design-to-code — document it in a shared spec sheet to avoid repeated conversions.

1/* Sketch: Inter Bold, 28pt, Line Height 36pt, Tracking -0.5pt */
2.heading {
3  font-family: 'Inter', sans-serif;
4  font-weight: 700;
5  font-size: 28px;
6  line-height: 36px;        /* absolute px */
7  letter-spacing: -0.018em; /* -0.5 / 28 = -0.01786 */
8}
9
10/* Sketch: Inter Regular, 16pt, Line Height 24pt, Tracking 0pt */
11.body-text {
12  font-size: 16px;
13  line-height: 24px;
14  letter-spacing: 0;
15}

Fill colors display as HEX by default; click the swatch to toggle to RGB or HSL. Two independent opacity controls exist: layer opacity (top of Inspector, affects everything including borders and shadows) and fill opacity (the slider in the fill row, affects only the fill). A card at 100% layer opacity with fill opacity 80% renders differently from a card at 80% layer opacity with an opaque fill. Confirm both values when implementing semi-transparent elements. When Sketch Color Variables are in use, the Inspector shows the variable name (Brand/Blue-500) rather than raw hex — obtain the token-to-hex mapping from the design team.

Shadows list X offset, Y offset, Blur, Spread, and Color with opacity — mapping directly to CSS box-shadow. Border settings include position (inside/center/outside), thickness, and color. Inside borders keep the element dimensions unchanged (simulate with CSS inset box-shadow). Outside borders expand the visual size (use regular box-shadow with positive spread). Center borders split the stroke across the edge.

1/* Sketch shadow: X=0, Y=4, Blur=16, Spread=0, #000000 at 12% opacity */
2/* Sketch border: Inside, 1pt, #E5E7EB */
3.card {
4  border-radius: 12px;
5  box-shadow:
6    inset 0 0 0 1px #E5E7EB,        /* inside border simulation */
7    0 4px 16px 0 rgba(0,0,0,0.12); /* drop shadow */
8}