Master Sketch Symbols — the reusable component engine. Create, nest, and override symbols so your design system stays consistent and developer handoff stays clean at any scale.
Symbols in Sketch are the design equivalent of React components: define once, reuse everywhere. Change the master and every instance updates automatically. Without Symbols, maintaining design consistency across hundreds of screens is impossible. With them, a color or font update takes seconds.
Select any layer or group, then choose Layer > Create Symbol (Cmd+Option+K). Sketch moves the master to a dedicated Symbols page and replaces your selection with an instance. Treat the Symbols page as your component library — never place real screen content there. Symbol masters are stored as artboards; their size defines the bounding box of every instance. Edit a master by double-clicking any instance and clicking 'Edit Symbol', or navigate directly to the Symbols page.
Overrides let instances differ from the master without detaching. Select an instance and the Inspector shows override fields: text overrides for each text layer, image fill overrides, layer style overrides, and nested Symbol picker overrides. Text overrides are the most common — a Button symbol with a 'Label' placeholder lets each instance show a unique label while shape, color, and spacing stay linked to the master.
1Button Symbol master (160x44)
2 bg-rect fill: Blue/500
3 label text: Button [text override available]
4
5Instance A: label = Sign Up
6Instance B: label = Log In
7Both remain linked to master geometry and colourA Symbol can contain other Symbols. A NavBar Symbol nesting Icon Symbols means updating the Icon master — for example, changing stroke weight from 1.5 to 2pt — propagates to every NavBar automatically. Limit nesting to 2-3 levels: deeper nesting makes override panels unwieldy and degrades performance in large documents. Use the same slash-notation for nested symbols as their parents: Icon/Home, Icon/Search, Icon/Profile.
Sketch groups Symbols in the Insert menu using '/' as a folder separator. Name a Symbol 'Button/Primary/Large' and it appears in a nested folder hierarchy in the Insert picker. A scalable convention: Category/Variant/State — Input/Text/Default, Input/Text/Error, Input/Select/Disabled. Define the convention before creating symbols; renaming later breaks library links in shared external documents.
Right-click any instance and choose 'Detach from Symbol' to convert it to a plain group. Detach only for genuine one-off exceptions that should never inherit future master changes. Frequent detaching signals the master needs more flexible overrides or should be split into multiple specialised Symbols. Track detached layers by looking in the layers panel for groups that share names with Symbol masters.
Your progress is saved in this browser, on this device only.