Amr Aljanadi

Design System V 1.0

Gathering and organizing all utilized components, icons, and other elements into a centralized library, which would be incorporated into the existing software, marked the crucial first stage in launching the system.

Atomic System_

The design system was constructed based on the atomic concept, which involved dividing the design elements into five distinct stages. This approach allowed for a systematic and modular organization of the components.

Responsive System_

Through the design system, we attained the capacity to create complex components with nested elements, all within a structured layout that adapts based on Figma’s assigned properties.

Impact & Next steps_

The extensive components library enables diverse designers to efficiently create multiple feature variations, maintaining a consistent design identity without relying on a single designer.

Organizing design components into connected design tokens is essential for effective management and maintenance.


“Jonathan Ogg, Natalia Favrin, Lia Baran”