Clearview UI Kit Rebuild

Examples from UI Kit

Anatomy of Action Toast

Anatomy of Context Menu

Component of Button Variants

Light and Dark Theme Example

Standard Input Component Variants

Notification Component Variants

×

Problem Statement

The original UI Kit in Adobe XD lacked scalability and flexibility. Designers faced inefficiencies in prototyping and inconsistent component usage. The goal was to rebuild the system in Figma with smart, reusable components and design tokens that support both light and dark modes.

My Contributions

Rebuilt all UI components from scratch in Figma (forms, messaging, tables, tabs, etc.)
Created templated components with nested structures and editable properties
Defined usage rules for clarity and consistency along with documentation
Developed design tokens for colors, typography, and theme modes (light/dark)
Held UI checks for 8 designers before handoff to dev/QA
Provided feedback, training, and support to help designers meet UI standards
Acted as the source of truth for component usage and expansion

Evaluated requests for new components
Advised on alternatives or created new components for the library

Impact

Reduced prototype creation time
Improved design consistency across projects
Enabled faster onboarding for new designers
Strengthened designer-developer handoff
Improved team understanding of design systems
Enabled future growth with modular components

UI Check Workflow

Designer Submits Project for Review

Initial UI Check by Jeremy

Review component usage
Identify inconsistencies
Flag missing tokens or standards

Feedback & Coaching

Provide actionable feedback
Teach correct component usage
Suggest improvements or alternatives

Component Evaluation (if needed)

Designer requests new component
Jeremy evaluates need vs. reuse
Create new component or redirect to existing

Final Approval

Ensure UI standards are met
Confirm readiness for Dev & QA handoff

Project Moves to Dev/QA

What I Learned

Leading UI checks taught me the value of proactive design governance. By mentoring teammates and refining our system collaboratively, I saw firsthand how a well-defined design system can empower creativity while maintaining consistency. It also sharpened my ability to balance flexibility with structure, ensuring our components served both individual project needs and broader organizational goals.