1) Introduction

At KNP Labs, we started the month of April 2023 with the presentation of the "Design system implementation" by Chloe (UX/UI designer) 👩‍💻 and Gregoire (developer) 🧑‍💻. The topic is about two documents that strongly link the design and dev teams during the production process of a project:

• the UI kit
• the Storybook

The purpose of these documents is to facilitate the implementation of the components in an isolated test environment in order to reduce the gaps between the hi-fi mock-ups and the final integration.

In both design and development, we follow the widespread principle of atomic design, which allows all areas of intervention to maintain consistency in the thinking and production processes.

‌

2) Design side - Production of 'atomic' components in the UI kit

For KNPeers designers, tasks can be approached in two different ways depending on the work context we are in at the time of the sprint start.

In some cases, the rush periods coupled with the multiple long-term redesign projects we follow, may force us to work on the functionalities in a more global environment in order to propose a global vision to the client, which allows to capture the proposed iteration principle in a more efficient way while opening the discussion. It is in this type of configuration that the 'atomic' components are produced at the heart of the high fidelity model, directly from the template or the targeted page, and then centralized in the project's UI kit.

In other cases, we prefer the research and production phases of the components in an isolated way, from the design system or UI kit document in Figma, which makes it possible to instantly foresee all the states, types, sizes etc. and to avoid a possible additional step of centralizing the components from the hi-fi mock-ups to the UI kit. This working context also allows the designer to have a 360 vision of all the variations of the edited components and to facilitate the harmonization and the coherence of the proposals.

Thus, the two cases mentioned above facilitate the preparation of the storybook environment by the developers. Since the document design system or UI kit is organized according to the 'atomic' approach, the inspection of specs and the classification of components will remain the same from one document (the designers' UI kit) to the other (the developers' storybook).

3) Dev side - Setting up an isolated test environment (the storybook)

When implementing an application, it is often difficult to isolate the components (atoms) from the application context.

Component-driven tools such as React, Vue or Angular, help break down complex user interfaces into simple components. However, as UIs develop, the number of components increases, and mature projects may contain hundreds of components that generate thousands of variations.

In addition, these user interfaces are complicated to debug because they are directly linked to the business logic, interactive states and context of the application.

The storybook service is presented as a small development workshop that coexists with the application. It allows to have an isolated iframe to render components without interference from the business logic and the context of the application.

This helps developers to focus development on each variant of a component in synchronization with the design (figma).

‌

4) Conclusion

‌

Did you like our quest for continuous improvement? Contact us https://knplabs.com/en/contact