At UXPin we believe in constant progress and improvement – this is why we decided to transform our Smart Elements into Symbols. Now you can not only create reusable elements with ease but also edit properties for their individual instances and prepare resizable assets.
With Symbols you’ll be able to create various UI elements which can be conveniently used at different stages of your design process. Since this feature replaces Smart Elements, all the previously created elements will be converted into Symbols and placed in your Design System Library. You can access them by choosing Account Smart Elements library from the dropdown at the top.
All designers know that some elements are repeated throughout the mockup a couple of times with just minor changes. Now you can conveniently save such clusters of elements for later use – it’s enough to right-click an element on the canvas and select the “Create Symbol” option.
The element will instantly turn into symbol, as indicated by Symbol label in the layers panel. Now whenever you need to use this element again, you can simply copy it from the canvas and paste the duplicate in another place of your design. However, if you are sure that you’ll use some symbols for other projects as well, it’s best to add them directly to your Design System Library. You can do it with a single click – it’s enough to open the library, select a couple of elements on the canvas and and click the button to add UI Patterns. Your elements will be instantly transferred into a symbol and added to the library. This way your whole team will be able to reuse the symbols and create consistent designs.
UXPin Symbols are of course easily editable – it’s enough to double-click the symbol to enter the edit mode and you’ll have an array of editing options on your hands!
Please note that edit mode for Symbols is marked only with yellow dotted line.
Similarly to Smart Elements, you can conveniently edit all the instances of the symbol at once. Imagine you used the same symbol a couple of times within different prototypes and you’d like to update it – nothing easier! If you introduce the changes regarding colors, position or size of the elements inside the symbol in just one place, they will be automatically applied to all the instances of this symbol you’ve put on the canvas.
You can also turn your multistate elements into symbols – this way, if you add a state to a given element, it’ll be automatically included in its copies as well.
With Symbols you’ll also be able to edit the individual instances freely. You can change the visibility settings, size or position on canvas of the entire element or even lock/unlock just one of the copies and your updates won’t affect all the other places you’ve used this particular symbol.
Additionally, images, icons and text can be easily overridden for each element within the Symbol, so you can use just one symbol to create various versions of your UI components such as buttons or mobile contacts avatars.
The same rules applies to specifying default state of the Multistate elements. If you decide to turn your Multistate element into a symbol, you’ll be able to determine different default states for each duplicate.
However, sometimes it might be more convenient for you to update the text, image or icon in all the instances of a given symbol at once. With UXPin you can decide if you’d like to propagate the changes to all the copies or save them just in one place.
Let’s start from changing eg. the text in one of the symbols – now if you select it again, you’ll instantly see Overrides menu in the properties panel. If you want your text to be updated in the other instances of your symbol, select Set as default option and you are all set!
But if you decide against the changes and you’d like to restore the previous version, you can always choose Clear option and your symbol will return to its original state.
Detaching and Cloning Symbols
While designing with symbols, you might come to a situation when you need to update the previously used symbol but don’t want its duplicates to be affected by the changes in any way. There’s a simple trick for that – detach it!
Once you select the symbol, go to the Symbol section in the Properties panel and click the Detach button. In the result your symbol will become disconnected from its other instances and you’ll be able to edit it freely as the changes won’t influence other symbols.
Another useful feature is a possibility to clone your Symbols. It’s enough to click Clone button in the Symbol section to create a fully independent copy of the original symbol which can be further employed in your mockups to save you both time and effort!
UXPin Symbols can be used to create complex reusable elements with ease. It’s enough to take benefit of nested symbols to prepare multilayer components which can be conveniently updated with a couple of clicks.
Please note that if you decide to detach such symbol, the system will disconnect only the main symbol – all the nested symbols will remain linked.
As mentioned before, if you want to reuse your symbols for different projects, you’ll need to add them to your Design System Libraries. Once put on the canvas, such master symbols can be conveniently edited by your team members according to the rules above and the original symbol in the library will be updated locally.
However, if you’d like to keep the updated symbol for other projects, you need to apply the changes to the master symbol from the library as well. In order to do so, just select the symbol on canvas and use “Sync to library” option from the Symbols section in the Properties panel. And you are all set!
Now imagine that your coworker introduced some changes to the master symbols in the Design System Library and you need to bring your prototype up to date. Nothing easier – once you select the symbol on canvas, you’ll see a proper notification displayed in the Symbols section in the Properties panel.
You can simply click “Sync from library” option to match all the symbols placed on the canvas with the current version of the master symbol from the library. It’s also convenient way to revert all the applied changes and restore the original master symbols throughout your prototype.
We all know that responsive design can be a challenge, but with UXPin Symbols fully resizable UI elements are just a few clicks away from you. All you need to do is turn your components into symbols and you’ll be able to determine specific resizing rules for both x and y axes.
First, you need to create a symbol. Once you’re done, enter its edit mode, select an element within a symbol and go to Resizing section in the General properties.
Here you can either select the regular stretch behaviour or decide to pin your element to left, right, left and right and center for X axis or top, bottom, top and bottom and center for Y axis. This way the element will keep its position even if the whole symbol will be resized. To make the editing process more convenient, the resizing rules will be automatically applied to all the duplicates of a given symbol, so you won’t need to determine them individually.
Resizing rules can be also applied using the control pad – it’s enough to select proper borders and you are all set!
Sign up for a free trial account, if you are interested in testing out Symbols. And stay tuned, as it’s not our final say!