Web UI Component Library

A Design System is a source of truth that groups all the elements allowing the teams to design, realize, and develop a product.

This was part of my journey in creating and organizing user interface components and guidelines for a startup (Megaputer Intelligence) as we were preparing to retire our web reporting product.

PRODUCT

PolyAnalyst Web Reports - A cloud-based data visualization tool

Role

UI & Component Crafter

Design Collabration

2 Designers

Timeline

7 Months

A Web UI Library

PolyAnalyst Web Reports

In 2019, I contributed the first UI library with my design team leader in Megaputer. I worked with my design manager to help our design team craft UI components, typography, color usage, and grid system and refined the style guide to ensure a cohesive user experience across multiple platforms.

That was back in the days when we switched from Sketch to Figma. After fully understanding the differences between Sketch and Figma, we decided to stop building UI libraries in Sketch and all the designers moved to Figma and built a new UI library there.

During that time, I learned a lot of tricks to make "symbols" in Sketch and "components" in Figma.

By creating this initial UI library, we helped the team figure out all the essential elements needed for a design library.