At UXPin we are aware that slow development and incoherent design are problems that can cripple progress and weigh down user experience. Basing on our research, we’ve decided to tackle these with the introduction of Design System Libraries and Symbols.
While Design System Libraries (DSL) allow you to create reusable sets of assets, colors, text styles, and UI Patterns, Symbols help keep different parts of your design up to date at all times. Let us walk you through a couple of use-cases that present how internal processes of your Team can be improved.
#1 Faster prototyping
We all know how lack of reusable design assets can slow down both design and development processes as it forces to create every component from scratch. Make the most of Design System Libraries and Symbols to create, store, and reuse patterns quickly.
Once the designer has created the Lo-Fi mockup, they can add different sections to the Design System Library as symbols.
Symbols allow you to create building blocks with designated structure which you can adjust to specific use-cases. A master template can be pulled from the DS Library to the canvas, where the Designer will be able to update its local copy, for example by changing text, but leaving the layout untouched.
In fact, every instance of this symbol placed on the canvas can be quickly iterated and the changes will be applied to all the copies at once, making editing easier and faster than ever!
In Design System Libraries you can also store colors as well as text styles and use them to customize your elements effortlessly and speed up the design process by avoiding unnecessary clicks.
#2 Design consistency
Coherent patterns help to create feelings of safety and familiarity which improve user experience. In order to keep your design systematic between teams and projects, use Design System Libraries and Symbols to avoid one-off solutions.
Whenever Design Operations update design guideline or assets, your prototypes need to reflect the changes. For example, once a new set of SVG icons is presented, the designer can upload them directly to the library for the entire team to use across the projects.
Using the updated library, designers can quickly replace older icons or placeholders or add them to existing symbols. During this process, it may happen that some elements start to differ, but you need to keep both versions. Detaching symbols allows to create independent instances of previously used symbols and add them to the library separately.
As the project progresses, Project Manager can review prototypes using Spec Mode to maintain consistency. This way they can notice and point out any departures from the design guidelines, for example in icon sizes.
In order to smooth cooperation between intercontinental or national teams, detailed style guide with summary of all elements used in a prototype can be presented to DesOps or stakeholders.
Design Operations can set up guidelines for Hi-Fi colours using Free Flow Documentation.
As a result, Designers may transfer the rules to Design System Libraries and then apply them to the mock-up.
Simplifying and speeding up design and product development processes allows teams and companies to focus on bigger product problems and come up with better solutions. UXPin provides you with a variety of tools to improve your performance in these areas. Log in and test out Design System Libraries and Symbols now!