top of page

Basin Design System

A design, component, and class library built for Stantec products.

My Role: Design Strategy, UI

Team: Design Team

Tools: Figma


The Brief

Taking the lead

As technology keeps evolving, one of my first tasks as a UX/UI designer at Stantec was to bring their design system from Adobe XD over to Figma. 

Consistency across designs is so important. As Stantec's innovation team begins to expand, my goal not only is to migrate the design system from one platform to another, but to also ensure that each component is organized and structured in a way that can be used by anyone effectively with ease. 

Since then, I've become the leader for Basin, working alongside designers and developers to deliver high quality design components.

Components & Variants

A playground for components

With icon or no icon? Icon on the left or right? Small or large?


Many of Basin's components come in different styles and states. An example would be its buttons. To make it easier for designers and developers to navigate through all these options, I utilized Figma's component properties to turn each complex item into a single simple element. 

Button Component.png


Responsiveness is key

Nightmare happens when you try to resize a component but everything within starts to break. Well, to prevent that from happening, I made sure that most components (including these advanced charts!) are all scalable and responsive. 

What does that mean? It means no matter what height or width you adjust the component to, the contents inside will stay fit!

bottom of page