Zalo Design System
During my time at Zalo - the social messaging app, I helped maintain and expand the Zalo Design System. One of my key contributions was simplifying 52+ variations of inbound and outbound chat bubbles into 2 customizable components that adapt to any design intent.
01
Problem
There were 52+ variations of inbound and outbound chat bubbles floating around. No one really knew which one was the right one: no specs, no clear rules, just a mix of old files and personal tweaks. Designers spent hours digging through Figma, trying to find the “official” version, or gave up and redesigned from scratch. Meanwhile, developers were still using bubble components from years ago.
A lot had to be considered:
Chat bubbles in group chats looked different from those in private ones
Regular message has a different design from "disappearing message" (vanishes after a certain time)
Outbound and Inbound messages use different colors
Light mode vs Dark mode
Each kind of bubble has many additional actions
While the message format followed a fixed structure, it still needed enough flexibility to support new features( dictation, AI, or tags) without breaking the design.
02
Solution
Instead of building 52+ separate message templates (edge cases not included) which would have been hard to maintain, I chose to use slots. This approach made the component flexible, easy to customize, without overwhelming designers with too many choices.
Analyzing current chat bubble design
I began by defining the structure of the message bubble, looking for a common theme that could unify all variations.
Cooking…
I combined everything into 2 components with 8 variants: private/group, inbound/outbound and regular/disappearing message
For the main content, I designed a fixed set of 10 components (text, call, voice, media, link, stickers, reminders,…). If designers want to make any changes, they only need to update the main component, and those changes automatically apply across all instances.
Last but not least, guidelines
I wrote a guideline that defines the anatomy of the chat bubble, specifying which parts are fixed and which are flexible for customizing new features. It also covers the specs for the bubbles, spacing between them, and how they interact with other elements in the chat window.
03
The results
From February 2024 until now, 100% of new feature designs in Zalo have used this component. Designers no longer have to ask around in group chats to see if anyone has the correct version, they now have a single source of truth, allowing them to design freely and create quick mockups for stakeholders in no time.
The next step is to implement it into the developer-facing component library, which is a whole story of its own. See you next time :)
