Speaking the same design language sketch
Building a simple design system for a complex product
I work on a complex product when it was launched in 2005 and has become ever more complex. It is a year I began to develop a comprehensive design system, easy to use and easy to use our design team to help stay focused on product design without being distracted by its complexity.
Built in sketch, the system contains product components built into symbols. Symbols can contain nested symbols, and modifiable parts of symbols can be changed to zero. Sharing and updating the system is currently managed with Brand.ai.
Design components built as symbols
Anatomy of a component
All system components are built in symbols. This allows designers to share parts of the symbol and edit the text with substitutions.
The following example shows the input component of the structure:
The root symbol (input / _TEXT) contains two nested symbols and text state …
… and the error state contains an additional nested symbol: the error symbol. The error symbol is red so that the symbol component contains a color suppression.
After building the system this way, removing the designer simply needed a symbol on his desk and used as a replacement for the change.
Multiple variants made from a single symbol
I freely founded the symbol name structure in the excellent series of Lloyd Humphreys’ recommendations. In short, the structure takes the form of control / property / state. An example would be Symbol / fill / Confirmation.
Sharing and Maintaining
We choose to use Brand.ai as an asset library shared tool, mainly because it allows for a massive synchronization icon. There are also other tools available – Invision Handicraft Library, Terasi, Zeroheight – check to see what suits you best. We plan to build our own shared library tool that meets our requirements.
Weeding out old symbols
Often reuse designer existing design files when the project starts. These files may contain icons that are not part of the design system, resulting in congestion and inaccuracies. So far we had to remove manually orphaned or obsolete symbols.
The obvious advantage of implementing a design system is that the design team has instant access to a continuous supply of up-to-date design.
Change is Difficult
There are many possible solutions to a particular design problem, as there are designers. Make a designer change his workflow and new processes for adoption is a challenge. Education, documentation and clear communication of the advantages of the design system is to be on board for all, especially since the beginning.
Sometimes we see a strange behavior when the text in the crash symbols. The text is cut when the symbol of the size is changed, apparently consistent with the size of the original symbol – see below. Good people know Sketch the problem and assured me that they are working on a solution.
Design systems are a hot topic right now, with good reason. The technology eventually brings with the constant challenge of alignment design teams and keep electricity. Our design system is designed not only to reflect changes throughout our product, but also to become easier, more intelligent and more accessible.
References Blog medium.muz.li Author/Copyright holder: Patrick Morrow . Copyright terms and licence: CC BY 2.0
John is a Front End Web developer. He is a regular blogger on WDauthor.com