top of page
Anchor 1
Design System Cover Image.png

Design System​

​

A design system consolidates rules, guidelines, components, and tools, aiding teams in crafting unified user experiences. It acts as a definitive guide for design and development, ensuring consistent visual appearance, behavior, and functionality across a company's digital assets.

Role: UX & UI Designer

Year: 2022

Tool: Figma

UX/ UI Methodologies & Techniques

Specific components User Research
User-centric design approach
Design Principles
Accessibility consideration
Documentation and Training

The Challenge

The Benifits
 

  • Central hub for components, patterns, and styles in one place.

  • Enables efficient redesign and management of project changes at scale.

  • Allows design resources to tackle complex issues, maintaining visual and functional consistency.

  • Rapid replication of designs using pre-made components.

  • Minimizes redundant work, promoting consistency and efficiency.

  • Cuts down wasted time due to miscommunications in design or development.

Datepicker Usage (1)_edited.jpg

  • Starting afresh for each project or phase led to repetitive creation of component libraries.

  • Despite style adjustments, similar components were remade.

  • Our goal was to duplicate previous components and document past uses, tailoring specific use cases for each component.

The Approach
We started with creating a style guide for the system from scratch.

Search field usage (2)_edited.jpg
Search field usage (2)_edited.jpg
Search field usage (2)_edited.jpg

Why Design system at T&F company?​

Consistency: Reinforcing brand identity and usability. 

Efficiency: Reusing components and styles, designers and developers can work faster and more efficiently, reducing redundant work.

Collaboration: It fosters better collaboration between design and development teams by providing a shared language and framework.

Scalability: Allowing teams to build upon existing components and guidelines rather than starting from scratch. 

Maintenance: It simplifies maintenance and updates as changes made to the design system propagate across all products using it.

The style guide consisted of

Button control
Tooltip
Segmented control
Links
Tags
Lozenge
Bagde
Text Field
Password Field
Search Field
 

Dropdown
Profile Menu
Date picker
Breadcrumbs
Slider
Navigation
Cards
Form Input
Pagination
Footer

Check Box
Radio Button
Toast Message
Loading

bottom of page