Worked in team with a junior designer to develop the design system.
The Challenge
<aside> ⚔️ Create a comprehensive design system to support long-term development and empower future design workflow.
</aside>
Result
<aside> 💡 Created a scalable and responsive design system with 120+ components covering major experiences of the product.
</aside>
RAx has heavy use of tags, annotations, and other complex information organizing components. This required usage of multiple colors to support easy and quick differentiation. So we decided to keep one primary blue tone and multiple secondary colors.
[ Inspiration/example - Github ]
Considering the text-heavy nature of the product's interface, we decided to keep a single font family (Roboto) with well-defined weights and grey tone colors.
[ Inspiration/example - Notion ]
Components were set up with a 4px grid with margin and padding in multiple of 4.
Responsive text boxes (thanks to figma's autolayout) are at the core of RAx Design system. Text boxes are designed to
Designed an extensive button component library to speed up the design process without worrying about different variations and button states.
More complex components are quickly built using the combination of text-boxes and button variations.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c68d8f86-f4d3-4ddd-823b-8efcc05e5cfd/text_box_video.mov
Designed comprehensive variants of selection elements and input fields. Designing a form becomes extremely easy using the combination of these components.
Lists are an essential part of the RAx interface. All major files are displayed as a list with multiple quick actions on the items. The list items are designed to be easy to scan and give enough information for the user to take the next action.
RAx required various type of cards for users to scan information and take actions accordingly. We designed responsive card components with a consistent structure that speeds up design and development process.
We designed multiple components for the unique experience and value addition that RAx brings to the table.
