FRONTEND DESIGN SYSTEMS - (An architectural paradigm)

Introduction

What is a Design System and how does it relate to Frontend Engineering?
Though it sounds ambiguous and somewhat nerdy, it's nothing complex. You already use this daily. Now you can relax and read the article as I try to make sense of what it means at a very basic level.

I especially like how Nate Baldwin explained this term in his "Anatomy of a Design System" article:

Design Systems are a culmination of people, processes, and shared assets that work together in an iterative cycle in order to unify products, negotiate and align cross-team communication, and increase efficiencies in building products from design to implementation.

In simple terms, it’s a methodology that establishes the essential building blocks of any system.

Design building blocks

Design systems exist across all fields of engineering. They ensure consistency across systems, improve productivity, and create better user experiences. Some argue that a design system is a product serving other products — that’s also correct.

These underlying decisions, whether aesthetic or engineering-focused, form the foundation of a system’s architecture. For this article, we’ll focus on frontend applications.

Frontend UI

Frontend is the user-facing part of digital systems. It's what users see and interact with. A visually appealing and functional interface can generate emotional connection, excitement, and loyalty.

Aesthetic-Usability Effect

  1. A beautiful design creates a positive perception of functionality.
  2. Users tolerate minor issues in aesthetically pleasing designs.
  3. Visual appeal can mask usability flaws during testing.

While UI is often simplified to buttons and text fields, these elements are critical. Customers won’t be using your app with Postman. 😊

For simple apps, you might get away with ad-hoc screens. But what happens when you scale? Will you refactor or do it right from the start? Optimizing for scalability and modularity early isn’t premature — it’s smart.

One of the biggest advantages of establishing a thoughtful design system is that it allows organisations to scale best practices. – Brad Frost, Atomic Design
UI design system overview

Many engineers associate design systems strictly with UI/UX. I believe it’s more than that. Here’s my simplified breakdown of a frontend design system:

  1. Programming Language
  2. UI Language
  3. State Language

Programming Language

I prefer JavaScript for prototyping and TypeScript for serious projects. TypeScript catches compile-time errors, promotes stability, and improves maintainability.

TypeScript helps visualize component interfaces, which improves developer experience. But the best programming language is the one you can use effectively.

UI Language

UI Language

The UI language is determined by the style guide. Tools like Styled Components, Emotion, Chakra UI, NativeBase, and UI Kitten help build a consistent UI using atomic design principles.

  • Components
  • Assets
  • Style Guide

State Management

State Management

State is the most complex aspect. For web apps, I use React Query for server state and Context API for UI state. In more complex apps, Redux replaces Context.

For mobile, Redux Toolkit + Redux Persist helps manage and persist async storage.

Conclusion

This article is an introduction. In upcoming articles, I’ll dive deeper into sub-systems and how I make sense of frontend architecture.

References