PHX came from humble beginnings. When I started at Formstack 7 years ago, we didn’t have a defined design system, only Photoshop mockups (occasionally matching live code) and a team who was excited to innovate.

Early discussions were ripe with subjective banter about colours, spacing, and chucking gradients in the trash (flat design had established its dominance). Our first iteration UIL, short for UI Library, was a large Photoshop file where each component had its own layer group, each variant a layer to drag into your design file. No version history, no publishing changes or cascading styles, no toggling variant properties, no auto layout—how far we’ve come.

The birth of Phoenix

Rising from the ashes of UIL, Phoenix flew the Photoshop nest and began its new life in Sketch.

Our team was reluctant to make the move Sketch, so our adoption didn’t place until the introduction of Sketch’s component libraries. The prospect of a flexible single source of truth and increased speed and scalability was the tipping point.

During this time, I spearheaded the teams adoption of Sketch and as we worked together to transition UIL to Sketch, I was dubbed the “Master of Phoenix”. I defined the spacing, sizing, and typography guidelines, rebuilt and redesigned the majority of components and iconography, and was the keeper of the master file and would update component changes upon team approval.

The team built out documentation, worked with copywriters to flesh out a technical language ruleset, and had regular hand-offs with the Front End Developers to present design updates and review the implemented components in their code library, Storybook.