Revamping Xeer Design Tokens
I led a comprehensive redesign of design tokens in the Xeer Design System, establishing new baselines and resolving issues. This streamlined the creation and upkeep of the tokens, significantly improving efficiency, enabling faster updates, and ensuring greater consistency across projects. Consequently, our design workflow became faster and more effective.
Client
Xeer
Country
Egypt
Service
Design Systems
Year
2024
About Xeer & My Role
Emerald Design System is responsible for Xeer App, a digital financial tool for individuals with financial aspirations. It offers effortless management of expense tracking, budgeting, debt and asset management, Zakat, and more—all within a Sharia-compliant app.
My responsibility is managing and improving the Emerald Design System. I help the design team build and control the app more efficiently.
Context
I encountered some issues while working on the Emerald design system. I found it really difficult to reuse tokens in different places when creating components. Upon further investigation, I discovered that the problem stemmed from the lack of alias tokens. In reality, we only have primitive (global) and component-level tokens, which came as a surprise.
Are our aliases too specific?
Let’s take a closer look at the current tokens. Some have already been assigned to components as “button-primary-bgcolor-default,” which turns them from Alias Tokens to the next level of component tokens. This resulted from misunderstanding token levels, usage, and naming conventions.
Conversely, you will see tokens not associated with a component or assigned to a component but with specific usage, such as “Title-text color-default.” This specificity doesn’t reflect the purpose of an alias. You can’t use this kind of token in any other situation.
In a nutshell, we can say that the root of the causes is the naming convention & Overlapping.
New Tokens Anatomy
I conducted collaborative workshops with the lead to develop a formalized taxonomy system ensuring consistency and scalability for future use cases. I researched popular token naming methods from design systems such as Uber, Spectrum, and GitHub, and implemented a new token structure based on these insights. Each token type was assigned specific terms and taxonomies, and complex token sets were user-tested to ensure clarity and intuitivenes
Introducing The New Set of Tokens
The Impact
After implementing these changes now, we can say:
- Consistent Naming Conventions
- The process of creating or editing a token is now a lot faster than the old one
- Documented process for reading and writing new tokens
- We have gained better control over our Design System
- We Have better Mapping now