Atomic Design: The LEGO Bricks of The Digital Universe.

In the fast-paced world of design and development, every detail matters, and it is the attention to these details that sets the foundation for success in every project. Consider this quote from Plato; “The beginning is the most important part of any work.”

In this context, Atomic Design by Brad Frost, published in 2016, emerged as a groundbreaking solution to tackle the issues of inconsistency and a lack of standards in this industry. The methodology presented in this ‘Designer’s Manifesto’ emphasises the systematic and hierarchical approach to building user interfaces (UI).

It breaks down UI components into the following five stages of ascending complexity:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Atomic Design was born out of a desire and necessity to have a responsive, digital environment. The components listed above all form part of this digital environment, which encompasses the interconnected web of organisms, their physical environment, and the intricate relationships between them. In other words, these components lend to a more engaging and seamless end-user experience.

“When investigating something complex, we often begin by dissecting the problem into the smallest parts possible so that we can then put them back together to form a whole.”- Figma

Imagine a pile of building blocks or LEGO Bricks. One LEGO brick can be equated to one atom, connecting two, creating a molecule and so on and so forth until you’ve built your very own Van Gough!

At the mention of LEGO, our Head of Engineering, Frank, magically appeared and wanted to share his two cents on Atomic Design-and since we’re pretty sure Frank reads Atomic Design as a bedtime story to his kids, we definitely wanted his input.

Frank, who has an impressive and stellar 20 years experience building applications and is deeply passionate about design and UX asserts; “The idea of building anything is for it to be functional, to do what you need it to do.”

“I use development purely as a means to an end to make beautiful/functional products.” explains Frank. He goes on to unpack the methodology of using atomic design to create a design system.

A design system can be defined as a complete set of standards intended to manage design at scale using reusable components and patterns.

Here are some examples of Design Systems that have the coveted Frank-Approval:

1. GitHub’s Primer.Style
2. Atlassian Design System
3. Goldman Sachs.

In the past, you’d have developers using colour pickers instead of using the designated colour specified by the designers and that would result in an inconsistent looking application. Now most tech companies publish their Design Systems and this assists in defining colour theories, colour usage, component usage and accessibility guidelines.

The end goal is always accessibility and consistency- creating the visual components that the end-user will interact with.

Frank uses Atomic Design methodology to build both front-ends and back-ends and views the entire process as a living design system that can be used in high-fidelity design, front end implementations as well as backend development when it comes to creating complicated pieces of code.

Applying AD methodologies to back-end engineering:

As Frank puts it, “The aim in all development is to keep your code DRY- to avoid redundancy. The idea is to break your code up into small reusable pieces to be used in other places to reduce regression across the code base and reduce the code bloat and maintenance while also improving testing efficiency.”

For example, if you have a JWT (JSON Web Token) library, each function of the JWT library can be broken down into smaller pieces of code that then get reused within that library. The benefit of that is that it’s modular, easy to maintain, and very easily testable.

Example of JWT issue class:

# frozen_string_literal: true

class JWTLib::Issue

  attr_reader \
    :exp,
    :user

  class << self

    def call(user, exp: nil)
      new(user, exp: exp).call
    end

  end

  def initialize(user, exp: nil)
    @user = user
    @exp  = exp
  end

  def call
    encoded = JWTLib::Encode.call(user, exp: exp)

    access_token = JWT::AccessToken.create(
      user_id: user.id,
      jti:     encoded.jti,
      payload: JWTLib::DecodePayload.call(encoded.access_token)
    )

    refresh_token = JWT::RefreshToken.create(
      user_id:    user.id,
      token:      SecureRandom.hex,
      jti:        encoded.jti,
      expires_at: JWT::RefreshToken.expiry_time
    )

    OpenStruct.new(
      access_token:  encoded.access_token,
      jti:           encoded.jti,
      exp:           encoded.exp,
      refresh_token: refresh_token.token
    )
  end

end

But like all great love arcs, Frank has some gripe with Atomic Design.

Design components span multiple categories (atoms, molecules, organisms, templates) so his preferred method is to build small single use components (buttons) and reuse those atoms to create new stand alone components (navigation components).

Instead of using organisms and templates he creates layouts that use those components. He essentially takes the number of categories down from 4 to 2, combining atoms and molecules and organisms and templates.

Frank prefers organising the design system into the following categories:

Core/ Foundation: the core of the design system that affects every aspect of the interface.

• Colour
• Typography
• Spacing

Layouts: the arrangement and organisation of visual elements within a design composition.

• Grid layouts
• Application frame layouts (side-bar, header, footer etc.)

Components: the building blocks/LEGO bricks used to create the interface.

Frank explains that he likes to break the components down into two categories: base components and compound components.

• Base components: The goal of base components is to be reusable in compound components.

Examples: buttons, icons, form, elements.

• Compound components: Stand alone components with their own design, utilising as many base components as possible to prevent duplication.

Examples: cards, modals, accordion menus, navigation menus, flash messages etc.

Frank’s methodology can be surmised as such: Using multiple base components to create new compound components.

What started as a desire to pull back the curtain and unveil the inner workings of design to enhance general comprehension of its final form, evolved into a comprehensive atom-powered guide for creating design systems at their most foundational level. In an era of progressing technology, designers and developers will inevitably revisit Frosts’s Atomic Design to find clarity through simplification.

What Frank has accomplished here is undoubtedly aligned with Frost’s intended purpose when sharing his design methodologies. Frank has effectively taken the foundation of Atomic Design and skillfully tailored it to align with the overarching objectives and vision of Platform45.

Frank concludes, “Everyone tries to copy Google, but you can’t apply Google methodologies to every single company, but you can take the best parts and create your own process using reputable and established methodologies as a starting point.”

Everything starts out small, how we build the ground up is what matters. It is important to remember that everything has to start from somewhere, and when we embrace the principles of Atomic Design, we lay a solid foundation for growth and innovation.

By utilising this approach, Platform45 has witnessed a transformative impact on product development, resulting in products that are not only more scalable, maintainable and consistent, but also boast a superior build quality.

Platform45 acknowledges the value of “tried and tested” methodologies but goes beyond mere replication by augmenting them to suit our unique context.

This enables us to deliver tailored solutions to our clients, both locally and globally, addressing their specific needs and challenges. With the influence of Atomic Design permeating our product building process, we ensure that every step we take aligns with our mission to create exceptional and impactful experiences for our clients and their users.