Variable-based Design System to support infinite brands or styles

Problem Statement

Our consulting organization works with a variety of clients across all industries. Each with their own brand guidelines and styles. When we onboard a client, their Design System can be in any level of fidelity or not exist at all which slows design turnaround time and blocks engineering.

Objectives & Goals

Flexible system that can be modified to support any brand
Product led - only design what we know we'll need

Output

Myself and a fellow designer saw a significant opportunity to expedite our internal design process after experiencing multiple client engagements with varying levels of Design System (DS) fidelity.

With the launch of Figma Variables, we set out to create an internal DS that utilized these variables to customize an existing library. Easily matching whatever client with which we were working.

We started with common components that are frequently used (buttons, inputs, etc) and continually update as we encounter more complex components or patterns being repeatedly required. This involved version control, branching strategies and constant communication with our internal engineering team to ensure what was built was aligned with the designs.