00
FLY NOW PAY LATER

Design System

One of the projects I'm particularly proud of is the Design System I built from scratch. Before this, there was no unified system in place, and consistency was lacking across all channels - the app, checkout API, and SaaS dashboard. To address this, I designed and developed in Figma a comprehensive Design System that would ensure a cohesive and seamless user experience.

Our Design System was inspired by various sources, including Material Design, Atomic Design, and other well-known brands and government design systems. As a result, we were able to build a robust system. It was a challenging project, but I enjoyed every minute of it.

What is a Design System

Before I star talking about design System we need to mention what is a Design Language System

Design Language System

Set of foundational styles and components that covers one or more platforms (mobile, web, SaaS Dashboard, etc.)

Design System

A holistic collection of tools, systems and guidance that allows organisations to build products efficiently.

Benefits of design systems

Before I star talking about design System we need to mention what is a Design Language System.
  • Consistency & better user experience
  • Accessibility built-in
  • Better hand-over to the dev and internal processes
  • Scalability & maintenance
  • Speed & cost savings
Core tokens are essential to maintaining a consistent visual identity and ensuring that all design components work together harmoniously.
Definition
  • Named entities that store raw design values
  • The core pieces of a design system
  • A codified design decision
  • Technology agnostic and can be transformed for any platform
  • Replace hard-coded variables
Centralisation
Design Components & tokens are shared between designs and developers

Process to launch a design System

Launching a design system involves several key steps. Here is a general overview of the process:
00