Let’s Make A Design System! Live Coding at Smashing Conf

I had a great time at Smashing Conf San Francisco, where my session involved live-coding a design system on stage. It was the first time I’ve ever live-coded on stage before and was terribly nervous about the whole thing. Thankfully, it went well, especially because we got to build Yahoo Horoscopes and a few other hilarious Yahoo pages. I’d be happy to do this type of thing again in the future, which is good because I’ll be doing just that at other Smashing Confs this year.

Here’s a video of my talk, and some links to concepts and resources I shared in it:

• I talked about the importance of creating a design system’s UI components in a frontend workshop environment. These components ultimately get displayed in a storefront environment that is the website style guide
• I talk about how tools like Pattern Lab and Storybook can serve as helpful frontend workshop environments, allowing teams to build not just components, but actual entire UI screens using those components. This lets you to stress test designs & play out real product scenarios.
• I showed how creating a design system through the lens of design system pilot projects is a great way of making sure your design system serves real user/product needs.
• Of course I talked about atomic design as a helpful way of thinking about a design system as an interconnected, hierarchical set of components that come together to build real templates and pages.
• I talked about the virtuous cycle between system work and product work. “The Design System informs our Product Design. Our Product Design informs the Design System.” as Jina said so well.
• I also shared my Pattern Lab vanilla starter kit and React starter kit that I use to start a new design system project.

So yeah! I’m happy I had the chance to show more or less how I’ve been building websites (and design systems for those websites) over the last 6 years.