As our design system matures, things move around. We’re trying to invest in ways that allow feature designers and engineers to locate where they are within a design system, and where to find what they need.

• Multiple design libraries can be hard to track and become confusing when designers and engineers aren’t aware of what does and doesn’t exist in each library.

• Every component and pattern has a varying degree of specificity from generic to a specific business context or content pattern and deciding what goes where is confusing.

• Theming in Figma is great, but... the current nature of variables can make managing multiple modes across multiple brands challenging.

Here’s how we’ve been trying to get our head around reducing complexity for our team and consumers

Figma file architecture

Having a clear plan for structuring your design system libraries is critical for folks to find stuff. Our early attempts at a highly modular system with numerous smaller libraries were too unwieldy. We’ve landed into a Tokens, Components, Patterns, and Features structure that streamlines the process for everyone. It was super cool to stumble on these Figma docs that deep dive into various strategies for organizing your files

Wayfinding elements

Once designers and engineers are in the files themselves, it's still easy to get lost. We’ve implemented consistent color-coded “file covers” distinguishing design system files from feature files, “getting started” pages outlining file dependencies, and consistent page naming conventions indicating iterations from elements that are ready for development. Thanks to Vitaly Friedman for the reference to Saurav Rastogi's post on Figma file organization which is packed with insights.

Multi-brand variables

Our team has worked hard to figure out the most intuitive way to allow for white-labeling our design system for custom theming. We currently leverage modes at multiple layers of the design system based on their specificity from global to semantic to component to pattern. Romina Kavcic has endless resources for teams who are looking to build out their token strategy.

Takeaways

Wayfinding within design systems is hard but a couple of things that help folks understand where they are and what they can do

• Partner with engineers on an architecture that maps somewhat to their mental model making things more intuitive

• Setup wayfinding documentation within your Figma files that orient users to where they are within the system

• Map your tokens and variables across your system so that it is clear how to layer modes to achieve custom themes