Choosing Between Flat Symbols, Nested Symbols, and Overrides in Sketch

Decision and constraints

When building a reusable UI component library in Sketch, you need a strategy that lets you update components easily, keeps designs consistent, and stays within the performance limits of large files. The decision is whether to use flat (single‑level) Symbols, nested Symbols, or Symbol overrides for variability.

Comparison of options

Option	Description	Editability	Scalability	File‑size impact
Flat Symbols (single‑level master)	Each variant is its own master Symbol.	Simple to edit; each master is independent.	Poor – many masters increase panel clutter and make global changes tedious.	Low per Symbol, but total size grows linearly with the number of variants.
Nested Symbols (master containing other Symbols)	A parent Symbol holds child Symbols (e.g., a Button that nests an Icon).	Good – editing a child updates all parents that use it.	Better – fewer masters, but deep hierarchies can slow rendering.	Moderate – each nested Symbol adds overhead; deep nesting (>3 levels) noticeably increases file size.
Symbol Overrides (text/image layers)	Expose specific layers of a Symbol as overridable properties.	Very good – change an override without editing the Symbol itself.	Excellent – one master can produce many variants.	Low – overrides store only reference data, not duplicate graphics.

Trade‑offs

• Flat Symbols are easiest to understand but become unwieldy when you need many variants (e.g., different button states, sizes, icons). Updating a shared property requires editing each master individually.
• Nested Symbols let you reuse child Symbols (icons, logos) across multiple parents, reducing duplication. However, each added level increases the Symbol tree depth, which can slow Sketch’s rendering and make overrides harder to trace.
• Overrides provide lightweight customization without extra Symbols. They rely on proper layer naming and ordering; if a layer is not exposed, you cannot change it via the overrides panel.

Implementation example: a Button with a swappable Icon

1. Create an Icon Symbol (e.g., a 24×24 vector) and place it in the Symbols page.
2. Create a Button Symbol. Inside the Button master, drag the Icon Symbol onto the canvas and position it where the icon should appear.
3. Select the nested Icon layer, then in the Inspector click “Override” to expose it as an override for the Button Symbol.
4. Add a text layer for the button label, set its resize constraint to “Pin to left and right” so it expands with the label.
5. Set the Button’s overall resize constraint to “Pin to corners” (or “Scale” if you want the whole button to resize proportionally).
6. Create several instances of the Button Symbol across your artboards.
7. To test, select an instance, go to the Overrides panel, and change the Icon override to a different Symbol (e.g., replace a “search” icon with a “settings” icon).
8. Verify that the change appears instantly in all instances of that Button Symbol.

Validation steps

• Open the Symbols panel and confirm that the nested Icon Symbol appears as a sub‑symbol under the Button master.
• Check that the Icon override is listed under the Button Symbol’s overrides.
• Save the file, close it, and reopen it to ensure the override settings persist.
• Compare the file size before and after adding several instances with different overrides (use macOS “Get Info”). The size increase should be modest, reflecting only reference data, not duplicated graphics.

Limitations and cautions

• Avoid nesting Symbols deeper than three levels; deeper trees can cause noticeable lag and make override tracking difficult.
• Remember that overrides do not detach the Symbol. If you need a completely independent variant (e.g., a button with a unique background shape), detach the Symbol or create a new master Symbol.
• Ensure that any layer you intend to expose as an override is not hidden or locked; hidden layers cannot be overridden.