Design system project

Project Overview

1. Overview: Fretron Design System is a UI design framework we created to bring consistency and speed to our product design process. It was inspired by the Shipitwright UI kit from the Figma Community, which helped us get a clear idea of structure and style.

   Nah, We didn’t just copy it — instead, we learned from it and built our own system step by step using a design system course. This helped us create components, styles, and patterns that fit Fretron’s needs and made handoff to developers easier and cleaner.

2. Problem Statement: Our TMS had inconsistent UI patterns, making it difficult for users to navigate and for developers to maintain. These are the main challenges that we have to tackle:

   Our TMS grew without a consistent design, so screens looked different, workflows were confusing, and updating the UI sometimes caused issues.	Each group had different needs-dispatchers wanted detailed tracking, fleet managers need insights, so building a simple system for all was a challenge.	Engineering team used to work without design guidelines, so introducing a new system required training and convincing them of its long-term benefits.

   
   

• My Role & Goals

My Role – I was involved from starting to end from selection to implementation, my role includes the following:

Goals –

1. Establish a Unified and Consistent Design System

2. Design for Diverse User Needs

3. Enable Scalable Design-Engineering Collaboration

• Design System Breakdown

To maintain consistency and speed across teams, we built a custom design system — inspired by Shipitwright and tailored to Fretron's workflows. It includes reusable tokens, components, and real-world UI patterns.

Foundations:

Components:

Patterns:

• Integration Process

1. Token System Implementation: We used a centralized token file for colors, typography, spacing, and shadows. Tokens were named semantically (primary-bg, text-muted, padding-sm) instead of by value.

   
   

2. Theming & Scalability: Built the system with light and dark themes in mind — all tokens and components are theme-ready. It is easily scalable for partner/white-label versions.

   
   

3. Component Structure Using Variants: Each component (like Button, Input, Card) was created using Figma Variants with props and ensure Auto-layout in all components:

   • Button → Type: Primary/Secondary, State: Default/Hover/Disabled, Size: SM/MD/LG

   • Input → Type: Text/Password, State: Error/Success/Focused

   
   

4. Design to Dev Handoff: Integrated Figma Dev Mode with clearly defined component boundaries and documentation that will allow dev to directly copy the code and paste it in their system.