Components & Tools

Symbols (reusable components)

Design an element once, reuse it everywhere, and update every copy at the same time — perfect for navigation bars, footers, and repeated calls-to-action.

Last updated 2026-06-29

A symbol is a reusable component. You design something once — a navigation bar, a footer, a call-to-action — turn it into a symbol, and place copies (instances) wherever you need them. Edit the original and every copy updates at once. Symbols live in the Components tab of the left panel.

Why symbols matter

Think of your site's footer. Without symbols, if it appears on five pages and you change a phone number, you'd edit it five times — and probably miss one. With a symbol, you edit it once and all five update. Symbols keep repeated elements perfectly in sync.

Create a symbol

  1. Select the element (or whole section) you want to reuse.
  2. Right-click it and choose Create Component (or use the button in the Components tab).
  3. Give it a clear name, like "Site Footer" or "Primary CTA."

It becomes a master — the original definition — and appears in the Components tab.

Use it again (instances)

From the Components tab, click your symbol and insert an instance onto the canvas. Each instance is linked to the master and is labeled as such, so you always know it's a shared component.

Editing: masters vs instances

  • Edit the master and every instance updates automatically — this is the whole point.
  • You can also override a single instance (say, change just its button text) when one copy needs to differ. Overriding affects only that instance.
  • Reset to master returns an overridden instance to match the original.
  • Detach turns an instance into a normal, standalone element that no longer follows the master.

Great candidates for symbols

  • Navigation bar — identical across every page; update links in one place.
  • Footer — contact details, social links, copyright.
  • Call-to-action band — the same "Get started" section reused down a long page.
  • Cards with a consistent structure you repeat often.

Symbols vs the Brand Kit. Use the Brand Kit to keep styles (colors, fonts) consistent; use symbols to keep whole elements consistent. They work beautifully together.

Where to go next