Library Structure

In the two years since our original design system was built, we started to outgrow our single component library. For our new design system, we divided the library into styles, assets, and components.

Additionally, we had to solve for the challenge of designing in two design systems at once. Many of our new components would have similar or identical naming conventions, and would be difficult to distinguish from old components, especially in the small search panel thumbnails.

We found that a blue frame background in the new system was the simplest visual cue we could add to improve scannability in the search panel.

Component Properties

Our insights components get heavily modified by designers, and need to seamlessly incorporate dense content. Figma’s new component properties offered the perfect opportunity to streamline those efforts.

Nested Instances

In some cases, our templates include complex component nesting, which we can now manipulate at the highest layer level.

It’s not uncommon for our team to have non-designers making copy adjustments to material, so this enables them to do so while ensuring design consistency.

Layout Grids

We’ve always used layout grids for margin guardrails, but we needed to add some complexity to them in our rebranded system to make spacing and alignment seamless for designers.