Sketch Interface & Basics

Sketch runs exclusively on macOS and uses native AppKit APIs for pixel-perfect rendering. This means it integrates with macOS system fonts, uses native file dialogs, and benefits from Metal GPU acceleration. The trade-off is clear: no Linux, no Windows, no browser access. Teams with Windows developers must pair Sketch with a handoff tool like Zeplin or Sketch Cloud's Inspect view so non-Mac members can read specs. When evaluating whether to adopt Sketch, the first question is always: what percentage of your team uses Macs? If the answer is less than 100%, plan for a handoff layer from day one.

The Sketch UI has three primary zones. The toolbar across the top contains tools for inserting shapes, text, images, and artboards plus the zoom level indicator. The canvas in the center is infinite — you scroll and zoom freely with trackpad pinch gestures or Cmd+= / Cmd+-. The layers panel on the left shows every element in the current page as a tree. Layers are stacked bottom-to-top (top of the list = front of the canvas). Double-clicking a group expands it; pressing Escape collapses it. Renaming layers is mandatory for professional work — cryptic names like 'Rectangle 47' destroy team productivity. Use Cmd+R to rename in-place. Flatten deeply nested groups with Cmd+E to merge them into a single layer when you no longer need editability.

The Inspector on the right is where design intent becomes developer-readable specs. Select any layer and the Inspector shows X/Y position, W/H dimensions, rotation, opacity, fill color (with hex/HSL/RGB toggle), border, and shadow values. For text layers it adds font family, weight, size, line height, letter spacing, and alignment. Every numeric field in the Inspector accepts math: type '100+16' and Sketch computes 116. This arithmetic shortcut is invaluable when aligning to an 8pt grid. Color swatches show the exact hex value; clicking them opens the native macOS color picker or Sketch's custom color popover with document colors and global variables (Sketch 70+).

Mastering shortcuts converts Sketch from slow to fast. The five highest-ROI shortcuts: V (vector tool), T (text tool), A (artboard tool), F (flip), and Cmd+D (duplicate). For navigation: Cmd+0 fits the canvas to the window, Cmd+1 zooms to 100%, and holding Space activates the hand tool for panning. For selection: Cmd+A selects all on the page, Cmd+G groups selection, Cmd+Shift+G ungroups. For precision: use arrow keys to nudge 1px, Shift+arrow to nudge 10px. Cmd+Z undoes, Cmd+Shift+Z redoes. Learn these 15 shortcuts in the first week and you will feel the difference immediately.

A Sketch document is organized as Pages > Artboards > Layers. Pages appear as tabs at the top of the layers panel; use them to separate major sections (e.g., 'Onboarding', 'Dashboard', 'Components'). Artboards are fixed-size frames that represent screens or breakpoints. Insert one with A, then pick a preset size (iPhone 14, Desktop 1440, and so on) from the Inspector. Layers outside any artboard still appear on the canvas but won't export correctly in most workflows — keep everything inside artboards. Name pages and artboards semantically: 'Dashboard / Empty State' reads instantly in Zeplin; 'Artboard 3' does not.

1// Sketch document mental model
2Document
3  └── Page: "Onboarding"
4        ├── Artboard: "01 - Welcome" (390 x 844)
5        ├── Artboard: "02 - Sign Up" (390 x 844)
6        └── Artboard: "03 - Email Verify" (390 x 844)
7  └── Page: "Components"
8        └── Artboard: "Buttons" (1200 x 800)