Tazki Design System
Tazki is a platform that helps companies manage occupational risk prevention and streamline their project workflows. It centralizes critical tasks like checklists, safety inductions, training sessions, risk assessments, and regulatory compliance.
I was brought in to design a cross-platform design system that could support this operational complexity while delivering a clean, consistent user experience across web and mobile.
The Challenge
My Role
-
Built the entire Figma component library using variables, tokens, and naming conventions
-
Designed all components to be responsive and usable across web and mobile
-
Created developer-friendly documentation inside Figma
-
Managed a shared Notion inventory to track design and implementation progress
Components
One of the most comprehensive components I created was the Button, which includes over 1,500 variants. It was built using Figma variables and structured around key properties:
-
Hierarchy (Primary, Secondary, Tertiary)
-
Size (Small, Medium, Large)
-
Corner radius
-
Icon position (leading, trailing)
-
Toggle visibility of label and icon
-
Layout behavior (auto width, fixed width)
Each variation was powered by Figma’s variable system, which allowed me to manage tokens efficiently and adapt the components with flexibility and responsiveness.
I followed a structured naming convention inspired by atomic design to keep everything clear and scalable — for example:
Button/Primary/Labeled/Icon-Trailing/M.
Documentation
To keep communication smooth with developers, I:
-
Documented usage guidelines and interaction behaviors directly in Figma
-
Built a Notion-based inventory to track each component’s status (designed, in dev, shipped)
-
Included specs for responsive behavior and component properties to support implementation
This system drastically improved the speed of handoffs, reduced inconsistencies, and laid the groundwork for a more cohesive product experience.