Symbols are reusable elements which help to speed up your workflow by syncing changes across all instances. 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).
In order to create a symbol, first select an element or a group of elements. Then click Create Symbol icon in the top right corner of the Properties Panel. Alternatively, you can use CMD+K (Mac)/ CTRL+K (Windows) keyboard shortcut or choose Create Symbol option from the right-click menu.
Share your symbols with your team and use them across different projects by adding the symbols into the Design System Library. Simply select your element and click +UI pattern in the UI Patterns tab.
Symbols can also contain other symbols, so you’ll be able to create advanced components out of the smaller, more detailed ones and the changes introduced inside nested symbols will propagate to other symbols that include them. Please note that a nested symbol cannot contain an instance of itself.
In order to edit the 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:
- position and sticky position on the canvas,
- and locked/unlocked position.
Additionally, you can update the instanced separately using overrides.
Overrides allow to update an instance of the symbol independently with unique content. You will be able to use this option for the layers inside the symbol such as:
- visibility settings,
- active state of multistate elements,
and create elements that require the same design but may feature 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.
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, cloning and breaking symbols
There are three 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.
- Clone — creates a new copy of the selected symbol which is by default detached.
- 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.
The master versions of the symbols can be stored in the Design System Libraries and reused throughout different projects. Please note that any edits introduced to a symbol placed on canvas won’t be automatically applied to the master symbol in the library or synced with symbols used 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 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.