From Screenshots to a Scalable Sketch Component Library

Project for: ValueBlue / BlueDolphin SAAS Tool

When I joined the team, designers were mostly working with screenshots instead of reusable components. This made the product harder to scale and created many consistency problems across the interface. I helped organize the design team, mapped the existing UI elements, and rebuilt the BlueDolphin Sketch library with smart, reusable components. The result was a more consistent product experience and a design workflow that was easier for the whole team to use.

Tool: Sketch

My Role

I organized the designers around this process and helped turn a messy collection of screenshots and repeated UI patterns into a clear component structure. After the audit, I created most of the reusable Sketch components myself, including modals, menus, forms, lists, navigation elements, notifications, controls, icons, and canvas elements.

Auditing and Organizing the Existing Interface

We started by collecting the existing interface elements that were being used across the product. Since many design decisions were hidden inside screenshots, we printed, cut, grouped, and categorized them together with the design team. This helped us see which components already existed, which ones were missing, and where the biggest consistency problems were.

Building Smart Components in Sketch

After defining the component categories, I rebuilt the library in Sketch using smart reusable components.
Each component was structured with clear groups, families, styles, and states, so designers could work faster without recreating the same elements again and again.
This also helped the product team keep the interface more consistent across different parts of BlueDolphin.

Outcome

The project gave BlueDolphin a proper Sketch library and a shared design foundation for the first time.
Designers no longer had to rely on screenshots or rebuild elements manually.
The product gained better visual consistency, the design workflow became faster, and the team had a clearer structure for maintaining and extending the interface over time.