Symbols

What do you do when you have to update an icon that exists in multiple places on your prototype? Or when you have to change a button throughout your design?

In UXPin, you can make all that in no time using Symbols. You can use symbols:

  • Locally on different pages within a single prototype to keep all the instances in sync;
  • Globally between different projects to make your designs coherent (with Design System Libraries).

Creating Symbols

To create a symbol, select an element or a group of elements. Then click the Create Symbol icon in the Top bar or use the Cmd "K" keyboard shortcut. You can also create a symbol from the context menu.

Nesting Symbols

Symbols can also contain other symbols — Nested Symbols. These are regular symbols that are made from other, already existing symbols. They let you create advanced components out of the smaller, more detailed ones. Any changes inside nested symbols will also change in other symbols that include them across your design. Please note that a nested symbol cannot contain an instance of itself.

Editing Symbols

To edit a symbol, double-click it. Any edits you make inside any instance are immediately introduced throughout all the instances of this symbol in your prototype.

Every instance of the symbol has individual properties, not shared by the other copies such as:

  • dimensions
  • position and sticky position on the canvas
  • opacity
  • visibility
  • and locked/unlocked position

Additionally, you can update the instanced separately using overrides.

Overrides

Overrides allow to update an instance of the symbol independently with unique content. You can use this option for the layers inside the symbol such as:

  • images
  • icons
  • text
  • visibility settings
  • active state of multistate elements

and create elements that require the same design but may have different content.

Once you update your symbol e.g. with new images or text, the changes will be introduced only in the instance you are working on. If you want to apply the updates to all the instances of this symbol, choose Set as default option from the overrides menu in the Properties Panel. If you decide against the changes, choose Clear option to restore your symbol to its original state. Please note that you will be able to override the introduced changes only once.

Resizing Symbols

With constraints, you’ll be also able to determine specific resizing rules for symbols. They are shared by all the instances of the given symbol and allow to create components such as navigations, tab bars, and switchers, which can be easily adapted to different sizes in just a few clicks. UXPin will automatically set the constraints for your symbols based on the position and size of the elements, but you can always change the settings.

You’ll find constraints in Resizing section in the Properties Panel.

There are four types of constraints:

  • Stretch — stretches the element proportionally.

Left/Right/Top/Bottom — pins the element to the specified side of the symbol and preserves its size.

  • Center — keeps the element in place in relation to the center of the parent element and preserves its size.
  • Left &Right or Top&Bottom — stretches the element horizontally or vertically so that both sides remain pinned to the symbol and the distance from the borders is preserved.

Detaching and Breaking Symbols

There are two options that influence the relationship between different instances of the symbol:

  • Detach — unlinks the selected symbol from its instances and the library. The detached symbol has all the functionality of its original, but you can edit it and clear its overrides, without affecting the original. Please note that the Detach option works only for the main symbol — all nested symbols will remain linked.
  • Break — reverts the symbol content back to regular elements. Please note that breaking the symbol doesn’t affect the nested symbols inside it.

Remember that none of these options influences the master symbol added to the Design System Library.

Updating symbols

The master versions of a symbol can be stored in the Design System Library and reused throughout different projects.

Important

Please note that any edits introduced to a symbol which is on the canvas won’t be automatically applied to the master symbol in the library or synced with symbols in other prototypes.

Updating Symbols in the Library

In order to update the master symbol in the library, select the updated symbol and push the changes using the Sync to Library button from the Properties Panel.

Updating Symbols on the Canvas

You can update symbols on the canvas to the latest version. If the given master symbol is shared across different projects and it was updated in the library by one of the team members, once you click any of its copies in the prototype, you’ll see a notification about elements being out of sync. Click Sync from library option to update all the instances of the symbol placed on the canvas with the current version of the master symbol.

Additionally, in the left toolbar below the Design System Libraries icon, you’ll see a number indicating how many master symbols are different from the instances placed on the canvas. Click the notification to see a preview of those symbols with their current and new version presented and select the ones you want to update.

Please note that in both cases any overrides introduced previously in the instances on canvas will be preserved after the update.