Design Systems: How to Keep in Sync with Code — SF Design Week 2019

As part of San Francisco Design Week 2019, Diez co-hosted an event called “Design Systems: How to Keep in Sync with Code.” This post provides a recap of the event plus videos of the speakers & panelists.

The event featured expert panelists, Kaelig Deloumeau-Prigent, Sarah Federman, and Joe Preston — who have pioneered some of the world’s best design systems and design system approaches at companies such as Shopify, Atlassian, Intuit & Quickbooks, Salesforce, Adobe, the Guardian, the BBC, & LinkedIn. The panel was moderated by our very own Taylor Poe.

Haiku’s founder and CEO, Zack, kicked off the event with an introductory talk about design systems: the problems that they solve, why they exist, and some of the challenges teams face in adopting and maintaining them.

He also gave a live demo of Diez, a soon-to-be-released cross-platform design system framework. Here’s a video of his talk:

After a short break, the panel began, followed by a round of Q&A.

“We would look at what people were searching for, to try to understand what was their intent.”

One of the first topics to be addressed was documentation in Design Systems. About this, Sarah Federman said “I would love to be able to meet people where they are, so if it means delivering the documentation in the design tools or in the code via VSCode plugins, that I think is where the next frontier for documentation will be” referring to the importance of not only serving consistent and coherent documentation for the success in the implementation of Design Systems, but also making this information available where the users need it, to facilitate the process and make it more effective.

Joe Preston took it one step forward, talking about the approach his team takes when addressing this issue: “We would look at what people were searching for, to try to understand what was their intent”. He then described how his team discovered through research which parts of the design system were most used, and how they optimized the system accordingly.

The importance of doing research to understand and better serve the users of the design systems came up more than once. On this topic, Kaelig said: “We did a lot of research and we found out that our designers and our developers were really unsure how to get an icon from an idea to production”. He then explained how his team sat down to find a solution to make this process more seamless and clear, and how that evolved into a robust solution, which they later open-sourced.

“There’s always this internal struggle in design systems, how flexible you want to be versus how consistent you wanna be, and what constraints you want to introduce.” — Sarah Federman

Later in the evening, our panelists talked about one of the most common struggles they and their teams face when building a Design System. Sarah Federman mentioned that “there’s always this internal struggle in design systems, how flexible you want to be versus how consistent you wanna be, and what constraints you want to introduce”. Kaelig pointed out that even though research has shown that people want more composability and flexibility, they impose certain constraints in the system. He explained how this is a very conscious decision made taking into account the technical overhead that this kind of flexibility would add, or how he phrased it, the “maintenance tax” that would derive from it.

In short, sometimes designers and developers want to be able to create components or variants of an existing component to address very specific use cases that may not be very common. However, this, in the long run, can cause serious issues when it comes to maintaining the system. Joe made a great point that this is why it’s very important to test the success of such components to be able to make informed decisions.

As you can see, our expert panelists covered a lot of ground. They discussed everything from the definition of a design system, to the impact research can have on its making and maintenance. If you were there and want to go over everything again, or if you missed the chance to attend, you can still watch the recording in the Diez YouTube channel.

We want to thank everyone who took some time out of their Saturday night to attend. We hope that you enjoyed it as much as we did!