Etar is a collaborative project between me and Sayed Elmohamady. Sayed is one of the design system gurus who helped in building design systems for a lot of large companies in the middle east, Halan the first Unicorn in Africa is one of them.
Etar is the largest design system supporting RTL languages for both, web pages and mobile applications. Helps to start any project, save thousands of hours and raise the level of design. Also, aids to have a fast and consistent design, global styles & carefully designed for precision.
Designers face lots of problems when building user interfaces, especially when starting a project from scratch. These problems include:
When designing user interfaces for RTL languages such as Arabic, Hebrew, and Persian, these problems are doubled. In addition to, the above mentioned problems that product designers normally face, RTL languages add:
A set of tools and resources that can help them address the unique challenges posed by these languages. A design system and Figma UI kit that supports RTL languages, can provide designers with the components, guidelines, and best practices they need to create high-quality, user-friendly interfaces for RTL language speakers. Etar includes pre-designed UI components that are optimized for RTL layouts, such as buttons, menus, and other UI elements that are mirrored and positioned correctly. Components are designed with the unique characteristics of RTL languages in mind, including text alignment, typography, and other cultural considerations. Etar can complement the design system by providing designers with a set of pre-designed templates and components that can be easily customized and adapted to suit their specific needs. Etar also includes a range of UI elements that are optimized for RTL layouts, such as text boxes, icons, and other design elements that are mirrored and positioned correctly.
Building a one-size-fits-all design system that serves the needs of most of the product designers and can fit efficiently in their design process as well as various brands with various guidelines. Also, the idea of that the components' names, properties and variants should be intuitive enough so that designers can publish the design system directly to their project files with no need to manually browse between the components, go through the properties or feel lost.
Mirroring the components correctly as RTL languages have a different layout and visual hierarchy than LTR (left-to-right) languages. This means that UI components, typography, and other design elements need to be mirrored and positioned correctly, which was very challenging as needs much amount of time, effort and testing all the components.
We explored the most popular Figma UI Kits to know the needs that are still unfulfilled by them as well as their weak points. We found multiple issues that could be addressed by Etar and opportunities as well that could be our USP. For example:
Etar consists of more than 4,000 well designed components and variants supporting RTL languages and serving both mobile applications and websites, to fit most of the designers' needs, accelerating their design process by saving the time and effort consumed in building UI components from scratch. Also, maintaining consistency to help in the scalability of a wide range of products and platforms.
Smart color styles with simultaneous hues let you customize the color theme with a single value and text layers that can be updated with a single edit. They are implemented as global styles in the UI kit file to efficiently and quickly apply the brand visual identity. In addition to, sample of various images added as global styles under colors to easily add them into components without detaching the instances.
These base components are the atoms used in the master component itself, they are unpublished nor used alone in the design. They are just there to tweak and change in their styles or anything else and these changes are automatically pushed to all the master components using these base atoms. Thanks to this method in building the design system the changes are made more efficiently and with the least effort possible
Components are clustered under actions, navigation, data entry, data display, feedback and marketing website. This grouping adds more meaning to the components and their usage. As these groups naming conventions give a sense of guidance about how these components should be used and why the are there in the UI Kit file.
Organizing components neatly for easily scanning the components and its variants. Also, to get a grasp of the available variants as quickly as possible.
Components are implemented to efficiently change the language direction [From English (LTR) to Arabic (RTL) and vice versa]. Mirroring the components correctly and altering their Auto-layout direction to fit the desired language direction. Lastly, consistent text layer names to don't lose the inserted text with any change in the component's properties.
Etar designed its components to cater for both mobile and web platforms. Most of the components are designed to be used in both web and mobile, these are the basic ones for example button, input field, icon container, list control, ...etc. Some are web based components with mobile breakpoint for example page header and breadcrumb. Lastly, there are the mobile only components for example tab bar and bottom sheet.
All the UI Kit components have clear and descriptive properties names to enhance the usability of Etar, so designers can use it in building their designs without the need to read any documentation or a guide to know how to use the design system. Emojis are added to each property name to add a layer of delightful designing experience and also to be more understandable visually.
Etar Design System has helped designers to quickly kick start a new project in just a few seconds without creating all the components from scratch, thanks to the global styles and base components, designers can efficiently update the whole kit. Lastly, designing for RTL languages like Arabic is now much more easier by just changing the language property and the component will be mirrored correctly with the desired language direction.