Adit Lal

Building a Design System with Jetpack Compose - Andromeda

Adit Lal -

In today's world of Modern Android Development, a consistent user interface layer of our mobile app is now more critical than ever. Moreover, with the Jetpack Compose framework, things have never been more fun and straightforward.

In this post, we look at building a complex Design system for our Android apps. What is a design system, one may ask? It is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

Design systems, when implemented well, can provide many benefits to a design team, and thereby the usage of a Design system can then benefit the engineers on the team as follows:

  • It can help create a visual consistency across products, channels, and different teams.
  • It can be a tailor-made solution based explicitly on product teams' requirements. An in-house Design System will adapt to the company's needs and not the other way around.
  • An open-source Design system allows high-quality and consistent products built with less effort in design and development as it is a ready-made solution waiting to be adopted.
  • Most importantly, it allows everyone on the team to create/reuse user interface components that give consistency to products, thereby bringing focus to a consistent user experience.

Google provides an excellent Design System framework called Material Design which lets us start with simple yet powerful drop-in components to cover most of the everyday use cases. However, if we focus on a complex world use case, a question arises - What if the Design System that we use can be platform-independent, i.e., Most of the components and colors and branding used across not just for Android apps but also on cross-platform such as Web, iOS, Desktop - the Material Design does not fit perfectly in such cases in my opinion.

Investing to build a design system in-house can get very time-consuming, and you need a dedicated member/s of your team to always keep things updated, documented, and answer any questions that may arise during the development lifecycle. For example, when components need to be tweaked, with the intention being that once these components are built, it becomes very simple to rapidly build new feature screens. Anyone designing or building pages should have a very clear understanding of what is and isn't a "top-level" component, how interactions with these components work, how these components would react to new semantics provided by call sites, and more.

So, today I introduce you to a brand new library for Jetpack Compose Andromeda - an open-source design system with custom components and a customizable theme that focuses on the following key areas:

  • The library should adhere to a clear design spec to ensure "top-level" components and their subcomponents variations are easy to use and adopt well to provided semantic colors and can be operated very easily as there would be documented guidelines.
  • We should be able to cross-reference components and their implementation via a Catalog app which would be ever-growing with new and improved versions as the library evolves.
  • The library should be clear and concise with easy solutions for components.
  • Have I mentioned that there is plenty of documentation for every tiny bit?
  • Add tools / CLI companion helpers to enable library users to scale the design and customize to need and build a brand with their own typography/colors/illustrations and/or icons representing the Tokens in this Design system.
  • Top-level or, in other words, first-class citizens of the library can be basic stateful composable components that just work out of the box and alongside them are more complex and compound components that are use case/feature specific.
  • Reusability and well-defined structure are vital.

I will be covering more such details in the following posts in this Blog series, which will help detail the thought process on how I managed to build a custom design system for Jetpack Compose. Stay tuned, in the meanwhile check this out a snapshot of the Catalog app :


Catalog app showcasing a circular reval and different components working closely with custom theme.

Showcase Screens