What’s new on DesignSystems.com: June roundup

We set out to make DesignSystems.com the go-to destination on the web for design systems creators, designers, developers and managers to learn about the process of designing, building and maintaining design systems. The community responded in a huge way and the enthusiasm and contributions have led to some really incredible articles being published in the last month. Many of you have reached out with ideas you want to contribute to the site and we are so excited to work with the community to get more of these ideas and learnings out there.

Here is a look at what we added in June.

The complete guide to iconography

We were lucky enough that Bonnie Kate Wolf was one of the people who reached out wanting to contribute. Bonnie is an illustrator and iconography designer, currently at OpenTable and previously at Square. She wrote a detailed guide covering everything you need to know to create, organize and implement iconography in your design system. This guide goes deep, covering everything from strokes and fills to how to use Boolean operations when creating your icons to how to prep your icons for developer handoff. In Bonnie’s words, “there aren't many people who love to design icons and even fewer who are great at it. I wrote this guide to help you become one of those people.” Whether you are just getting started or are a seasoned pro, we think you will learn something new in this guide.

Why we create design systems: An agency’s perspective

Instrument is a digital brand and experience innovation company. They work with companies like Nike, Google, Airbnb, Sonos, and LinkedIn on product design, new tech innovation, branding, marketing, strategy — the works. They care deeply about delivering a complete design system, rather than a one-off solve, and also value creating reusable functional components that can be used across myriad applications and at scale. But of course, getting to a shared place of understanding with the client on what that means and what that looks like takes a high degree of collaboration. Instrument takes us through their process and gives us a look behind the scenes at how they approach developing design systems with their clients. You can read all about it here.

React containers, some assembly required

Zendesk’s open-sourced design system, Garden, has always prioritized accessibility. Garden uses a pattern they named “containers” to share common keyboard and accessibility logic between react components. The container pattern renders no UI, handles keyboard and mouse interaction, and supports RTL layouts. Improving on this pattern, the Zendesk Design Systems team recently released react-containers — a new open source library. Rather than require the user to bring down a package – styling included – just to use the no-UI containers, these patterns are now in their own repo. They’ve also re-written them to be smaller, smarter and adhere more closely to the WAI-ARIA Authoring Practices 1.1. Learn more about how you can leverage this new pattern here.

White-labeling: Putting the design system in users' hands

When the Dawn Labs team were given the challenge to create a system that could be both customizable by third party users, but also constrained enough to keep the app feeling consistent. So they turned to styled-components, styled-system, and a GraphQL backend to make it happen. On top of that, they also needed a styling escape hatch so that end-users could customize whatever they wanted without their client’s intervention. They solved this in a clever way, using global CSS injection with CSS variables. In his post, Mike Fix from Dawn Labs walks us through their approach step-by-step.

Thank you to the talented contributors who shared their insight and knowledge this month. Sign up for updates to stay on top of the latest in Design Systems.