DESIGN SYSTEM –LIBRARIES AND DOCUMENTATION

Establish, maintain and document an enterprise-wide design system. This is a collaborative effort of all designers, with me leading the web library

The design system is built in Figma and the documentation is located in the brandcenter (system: Frontify).

COLLABORATION

Every designer is allowed and encouraged to actively participate in the design system. If they feel changes need to be made, they can implement them in a branch and challenge them through the review process. If necessary, changes are also discussed in a larger group so that every impact on all areas can be taken into account.

Project goals

01/ Establish a design system in the company

As designers are distributed across the company in different teams, a single source of truth for design is needed to ensure a consistent output.

02/ Build Libraries in Figma

In 2021, the change from Sketch to Figma took place. The choice fell on this tool, among other things, because you can build a design system directly in figma.

03/ Documentation in frontify

In addition to the libraries, we document the various components in guidelines.

Design System structure

The Trusted Shops design system (called ‘Helios’) is currently structured in such a way that the components of the foundation library form the basis of all other libraries.

Atomic design

The helios design system is based on the ‘Atomic Design’ concept developed by Brad Frost. This concept ensures a consistent structure and allows changes to be made quickly and efficiently. Even complex systems can be comprehended more easily through the methodical design structure.

Component impression

This teaser module shows a rather complex component. I have built it so that you can make the following settings in the instance.

Switch screen sizes (M-L, S, XS)
Switch number of colunms from 2-4
Switch image stye (illustration, image round, image full width, video and icon
Switch between button and text link
Switch between different text content (default, event and news)
For all settings, input that has already been entered is retained.

Documentation

The detailed specifications and guidelines of the individual elements are written down in the brand centre. Every employee can access the information there.