Symbols & Styles

Create a Text Style by selecting a text layer with your desired properties and choosing Layer > Create Shared Style. Name it with your type scale convention: Body/Regular/16, Heading/Bold/28, Caption/Regular/12. Apply this style to any text layer via the Inspector dropdown. When you update the master style (Edit > Shared Styles), every layer using it updates instantly. This is the design equivalent of a CSS class definition — change the class and all consumers change simultaneously without touching individual layers.

Layer Styles store fill, border, shadow, and blur settings as reusable styles. A 'Surface/Card' layer style might define a white fill, 1pt #E5E7EB inside border, and a 0 4 16 drop shadow. Apply it to any rectangle and those properties apply instantly. Update the master style and all layers using it update — the design equivalent of modifying a CSS utility class like .card across hundreds of uses.

1/* Sketch Surface/Card layer style -> CSS */
2.card {
3  background: #FFFFFF;
4  box-shadow: inset 0 0 0 1px #E5E7EB,
5              0 4px 16px rgba(0,0,0,0.08);
6  border-radius: 12px;
7}

When you apply a Shared Text Style to a text layer inside a Symbol master, updating that Text Style propagates to every Symbol instance automatically. This is the highest-leverage update pattern in Sketch: change Heading/Bold/28 from Inter to Plus Jakarta Sans and every card title, modal header, and page heading across all artboards updates in one action. Set up this linkage from the beginning — retrofitting Shared Styles to a large existing document is extremely tedious.

Sketch 70+ introduced Color Variables: named colors stored at the document level that can be referenced in fills, borders, shadows, and text styles. Unlike Document Colors (simple presets in the color picker), Color Variables create a live link — change the variable value and every fill using it updates everywhere. Organise variables semantically rather than by palette value: use Text/Primary, Background/Surface, Brand/Primary instead of Blue-600, Gray-100. Semantic naming survives brand refreshes without requiring every layer to be remapped.

1Color Variable Hierarchy:
2  Primitive:  Blue-500 = #2563EB
3  Semantic:   Brand/Primary = Blue-500
4  Component:  Button/Background/Default = Brand/Primary
5
6Change Blue-500 to #1D4ED8 -> Brand/Primary -> all button backgrounds update

Open the Shared Styles panel (View > Layer Styles) to see every named style and how many layers use each. Layers styled manually — not using a Shared Style — will not appear here and create design drift over time. An asterisk (*) next to a style name in the Inspector indicates the layer has been manually modified after the style was applied. To revert it, click the style name and choose 'Sync with Shared Style'. Run this audit before every major handoff to eliminate inconsistencies before they reach the developer.