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

Agustina Feijóo
Jul 8, 2019 · 4 min read

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:

Image for post
Image for post

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

Image for post
Image for post

“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.

Image for post
Image for post

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.

Image for post
Image for post

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!

The Diez Blog

The Design Token Framework: Diez makes it easy to adopt a…

Agustina Feijóo

Written by

UX Designer currently based in Argentina, working remotely for the world. - www.uxagustina.com

The Diez Blog

The Design Token Framework: Diez makes it easy to adopt a unified design language across platforms, codebases, and teams.

Agustina Feijóo

Written by

UX Designer currently based in Argentina, working remotely for the world. - www.uxagustina.com

The Diez Blog

The Design Token Framework: Diez makes it easy to adopt a unified design language across platforms, codebases, and teams.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store