Building a Design System implementation using Jetpack Compose — Part1 (Theme)
Part 1 (You are here)
Recently working on a Design System project using Jetpack Compose building the implementation on Android application. I Hope can through this article to share with you how I did it and get feedback from the world.
Google already provided a great Design System framework called Material Design which lets you easily change the styles and has build-in components to cover most of the common use cases. But in the real world, especially if the Design System you are using is platform united, (like the project I’m working on, the Design System is supporting Android, iOS, and Web at the same time), the Material Design doesn’t fit perfectly.
Before
Knowledge required:
- Understanding the concept and key elements of Design System.
- Understanding Jetpack Compose and at least went through the tutorial provided by Google.
If you are looking for how to build a Design System implementation using the traditional XML UI system, check these articles I wrote.
- Building a Design System implementation for Android — Part 1
- Building a Design System implementation for Android — Part 2
The code examples below are built on Jetpack Compose 0.1.0-dev13 using Android Studio 4.2 Canary 7, APIs may change in the future updates.
Design
I’m going to use the simple design example I made to demonstrate how to build the implementation, it’s a simplified “unreal-world” design system, but the idea is close enough I guarantee.
As you can see, I created three styles (color, size, typography) which are basically included in any common Design System, let me implement them first.
Styles
DLS here stands for Design (Language) System used as a prefix for avoiding conflict
