Post Image

Symbols

by
Ben Gremillion
Ben Gremillion

Symbols are pre-built elements that, when changed, also change every copy — to an extent. Editing the original symbol will change the copy except for certain edits, like text changes and multistate elements’ default states, that you make on each instance.

For example, you can change the text inside an individual button without changing other buttons based on the symbol. But if you change the master symbol’s background color, every instance of it will change, regardless of their text.

Changing a UXPin symbol

To make a symbol, select one or more elements and right-click or type opt/alt-S. Doing so will create a symbol in the current prototype, not your design system — more on that in a moment. Copy/paste the symbol, or opt/alt drag it, to make a copy. Double-click any copy of a symbol to edit its contents.

Add a symbol to your design system

Symbols fall under the UI Patterns section of your design system. To add a symbol to the system so your team can use it, select a copy of the symbol, scroll to the bottom of UI Patterns, and click “add symbol.”

Create a symbol by right-clicking an element or elements on the canvas and choosing the “+ symbol” tile. Double-click its title to rename it. Once it’s in your UI Patterns, drag it from UI Patterns into your canvas to create a new instance.

Adding symbols to a library

References

Ask a question







< User Guide table of contents

Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you