Rayan Aleisa
Qawafel's design system
A product designer focused on translating ideas into practical and beautiful designs that solve real-world problems.
The Tablet version is coming soon. You can view the website on a desktop or mobile. I apologize for this inconvenience.
Qawafel's design system
Qawafel's design system
The phases of improving and developing our design system at Qawafel from the beginning to now and my contribution to it.
The phases of improving and developing our design system at Qawafel from the beginning to now and my contribution to it.
My role
Product designer
My role
Product designer
Timeline
2023 Mar - present
Timeline
2023 Mar - present
Tools used
Figma
Tools used
Figma
Overview
This project consists of several phases through which we have developed and improved our design system, aiming to achieve the primary goal of the design system, which is to save time and effort for the designer and ensure consistency across our products at Qawafel, whether they are applications or websites. The work is still ongoing as we are always looking for the best ways to improve, and we utilize the latest features released by Figma to help us in our design system.
Phase 1
Translation of the design system
When I first joined Qawafel, the design system was in its early stages to the point that it was only in English. This caused the designer to take longer in the design phase because they had to translate any component they used from the design system. This, in itself, took time. Therefore, the first goal was to translate all the components so that they are available in both Arabic and English. This was my first task in the design system, which took time because, in addition to translating the content in the components, alignment had to be considered. Arabic alignment is opposite to English, which was time-consuming and exhausting. Unfortunately, at the time, we didn't have plugins like "RTL layout" to help with such matters.
Phase 2
Identity Update
During my time at Qawafel, the visual identity of Qawafel completely changed (colors, fonts, logo, etc.). Therefore, the second phase was to apply the new visual identity to our design system and update all components to align with the new identity, as well as all products (applications and the website).
Phase 3
Simplifying the Design System
Our design system was very extensive and contained many components, with each component having multiple variants to cover all needs (for example, there were almost 3 or 4 types of tabs). However, in our case, we needed to simplify this system for several reasons:
Reducing the options for the designer to speed up the decision-making process, thereby reducing the overall design time.
Ensuring consistency across our products regardless of different designers.
Preventing designers from expending effort in choosing between variants.
Old buttons
Buttons now
Phase 4
Using Variables
When Figma first announced and launched variables, it was a great opportunity for us to leverage this feature to simplify and streamline the design process as much as possible. Therefore, we used them in our design system. We created variables for various elements such as text colors, borders, colors, surfaces and their shades, and more.
The beauty of variables compared to styles is that variables allow you to customize each one to appear only in specific places (for example, text color variables are applied only to text). This significantly organized and simplified the design process.
Finally, by using variables, the process of making adjustments and improvements has become simpler and more efficient.
Finally
Note
Our work on our design system is ongoing, and we continue to work on it and improve it as much as possible. It's important to note that work on a design system is never truly finished because there is always room for improvement, especially with the ongoing changes and advancements in product design, as well as updates and features related to design tools like Figma.
The ultimate goal is always to leverage the designer's time and effort in finding solutions to the problems they are working on rather than wasting them in the design process. Additionally, ensuring consistency across all products.