The Technical Side of Design Systems at CSS Day in Amsterdam

I had a fantastic time traveling to Amsterdam to speak at CSS Day (I was part of the + UI Special day). It was an absolutely phenomenal event and I learned a ton from all the amazing speakers.

In my talk, I discuss a bunch of topics around the technical aspects of creating and maintaining design systems. Since the organizers are so awesome, they turned around and published the videos of the conference pretty much immediately! Which means you can check out my talk:

Here are some of the topics I hit on in my talk:

  • Your Sketch library is not a design system – the heart and soul of a successful design system is a collection of reusable code components that build real software applications
  • There are many technical benefits of design systems: reducing technical debt, faster and higher-quality development, reduces QA effort, potentially makes adopting new technologies faster, it’s a useful reference, and it’s a future-friendly foundation to build and iterate over for years to come
  • A design system has to be compatible with whatever technologies are used at the organization. That means creating and managing a technology-agnostic design system.
  • A design system needs to power real software applications. That means using pilot projects to ensure your design system is actually handling real-world scenarios rather than being an off-to-the-side exercise.
  • Create the design system’s UI code in a frontend workshop environment in order to quickly articulate many product scenario UI without having to build the functionality for real.
  • Create a CSS architecture for your design system that is portable and
  • Use atomic design to connect the design system components to your actual product screens
  • Components are like tools in the basement. Over time, the system should provide a healthy chunk of solutions for your products, meaning you don’t have to expend a bunch of time, energy, and effort on brand new stuff all the time.
  • With directly consumable components, you can bake in best practices into the components. That means you can build in accessibility best practices like requiring alt text for images and automatically generating the necessary id attributes.
  • Understanding how to release and deploy a design systems is critical. I highly recommend Nathan Curtis’s 6-part series on the topic.

I hope you enjoyed the talk, and be sure to check out the rest of the videos as well. It truly was an incredible event.