The Challenge

After struggling with code quality in a poorly scoped project for a year, our team needed a complete code refresh.

Our first take at development had its challenges.

My rushed design process had created inconsistent components with inadequate documentation, burdening overwhelmed engineers with too many decisions to plan around.

This time, while the team focused on rebuilding backend structures, I seized the opportunity to address my previous handoff gaps.

This was my last ode to the waterfall workflow I’d work in with this team. Since I was well ahead of our engineers, I focused on empowering them to dedicate their time to creating a flexible homework system.

It was also an opportunity to fully utilize the new variables feature that were introduced to Figma in Summer of 2023.

Luckily, for me...

Design systems documentation is abundant on the internet... for free!

With so many design systems having usage guidelines available online, I was able to compare token-naming conventions and find what worked for our company’s engineers.

I also made the best recommendations I could by consulting with brand designers and engineers, and observing how designers and developers used Figma in their day-to-day.

Highlight:

Sizing tokens that require less training for engineers working exclusively in web.

The primary sizing unit for AoPS engineers, who only work in web, are rems. We’ve named our primitive tokens after rems because t-shirt sizes and arbitrary numbers are difficult to scale.

This removes a layer of translation that engineers would have to do if we ever have design files that don’t directly use spacing tokens.

Highlight:

Explicit primitive and semantic tokens that change by product theme.

We defined responsibly-named tokens designed for theme changes to support our upcoming rebrand. Themes are built into Figma Files as variable modes, to make future theming easier.

Highlight:

Robust components that are prepared for highly-volatile branding.

We’ve built flexible components that wouldn't constrain designers still defining brand and product directions.

Highlight:

Font recipes that work for this product, and are ready to transform for the next.

A preliminary version of our rebrand introduced a variable font: Roboto Flex. We’ve created layered font recipes that are adaptable to any branding changes.

But...

There’s still a long way to go.

As we speak, components are still being built and tested as the team reaches new milestones. Next steps include moving documentation from Figma into code as the system continues to evolve.