Are you familiar with the concept of design (or digital) debt? It happens when you forego operational solutions that could catch up with your team later and contribute to the natural decay of a long-term project. Design debt might be inevitable, but there’s a way around it—design systems.
Unlike cobbling together design components like pattern libraries and style guides, a design system functions as “the official story of how an organization designs and builds products.” It includes ingredients, as design system expert and Atomic Design author Brad Frost says, like design principles, UI components, UX guidelines, code standards, processes, design toolkits, code repositories, resources, and more.
Design systems have the power to transform a typical organization into a powerful product design force. So we recently hosted a cozy fireside chat with design systems experts Brad Frost, Jina Anne, Marco Suarez, and Aarron Walter to unpack key insights—and answers to all your burning questions.
Understanding design systems
The first concept to grasp when it comes to a design system is that it’s much more than UI components.
“It’s the whole philosophy. It’s the design principles, the UX guidelines, the development guidelines, the implementation guidelines, the contribution guidelines, and peripherals—and everything else.”
–Brad Frost
Once all of these components come together, they build a bridge between designers and developers. As Jina Anne shared about her experience at Salesforce, “Now everyone is speaking the same language. They’re not just saying ‘60 pixels,’ they’re saying, ‘it’s our medium size.’” From there, she and her team built a solid CSS framework to move this shared language further to make sure the design team was supported in a way that would allow it to rapidly prototype.
So how do you build a design systems team? In Anne’s experience, hybrid, cross-functional design systems teams work best. On the contrary, splitting the group into specific roles such as visual, front-end, engineering, and so on eventually promotes a waterfall methodology that slows the process.
Marco Suarez, a former product designer at Etsy now building design systems at InVision, also supports the idea that a design system builds bridges between teams.
“Our problems were more easily understood because we had a shared language. One of my colleagues, Katie Sylor-Miller, would bounce between design and engineering and then use this shared language to understand both sides.”
–Marco Suarez
First-hand experiences creating design systems
Putting all the pieces together is just the first step. As the group mentions in the chat, every team will have a different experience putting this system into play. Getting buy-in, for example, isn’t always a smooth process.
During the conversation, Jina Anne shared that she and her team “went rogue” when it came time to push forward. Her first year and a half on the team was spent on putting together guiding principles.
At Etsy, Suarez’s team built a design system for a single feature—but once the design team caught wind of it, it spread. After all the designers in the organization had adopted this, engineers heard about it too, and eventually a formal design system team was born.
“You don’t need to be a designer to realize having 50 different button styles is a bad idea.”
In Frost’s experience working with different clients and teams, one of the most important steps is helping a team understand their exact problems. Then, he follows up on those conversations with an interface inventory audit to physically show design debt red flags.
Laying everything out on the table makes a big difference, too. “You don’t need to be a designer to realize having 50 different button styles is a bad idea. All these little issues represent time, money, and all of that,” he said.
Although the argument of providing a future-forward framework is pretty compelling, Frost advocates for getting buy-in for specific things, not just the giant concept of an entire design system.
Scaling design systems once they’re in place
This is the topic on every large team’s mind. Luckily, this panel had a few actionable takeaways to help you achieve some forward motion.
Anne and Suarez both recommend design tokens, or named components that house visual design attributes. These will be your ultimate shortcut in situations like redesigns. You can make changes without touching a line of CSS—it’s like an on-off switch that saves you from manual coding labor.
Check out the full recording to hear the experts’ other suggestions, including answers to questions like implementing and scaling a design system as a lone designer, and knowing which components from different teams to add in the first place. Then, make sure you’ve signed up for insider updates and sneak peeks to InVision’s Design System Manager—coming soon!
by Kaysie Garza
Kaysie is a content specialist at InVision. She's helped strategize and write launch campaigns across the company, including all DesignBetter.Co programs, The Design Genome Project, and more. You can find her devouring books, French fries, or hiking trails when she isn't working on words.
