First Circle / Design System

Introduction

We decided to build our design system to enable us to create a consistent user interface and experience across our external and internal products, fast and efficient.

We are using the ‘Atomic Design’ methodology for easier classification and grouping of elements and components.

Benefits of a Design System:

  • We only have to maintain one source of truth (code) instead two design libraries (tool and code) for our design, to keep it consistent.
  • It helped us eliminate creating mock-ups using tools such as Sketch, Figma or Adobe XD and create design studies directly using code.
  • Enable non-designers to play around and create user interfaces
  • Engineers can focus solely on functionalities instead of perfecting and maintaining aesthetics and UI.
  • It’s faster to maintain and create components.