How to build and maintain massive design systems

Design systems have changed the world of digital product design for the better. Now we simply need the right tools to create better design systems.

From the very beginning, web design and development was plagued by a certain schism between designers and engineers. For the lack of better instruments, the former had to use static tools like Photoshop — that was invented to edit photos in the first place — to design interactive web applications. And the latter needed a lot of guesswork to translate the resulting static images of interactive applications into working code.

Things got even worse with the dawn of the mobile age and the resulting needs to respond to different screen sizes and new user interfaces. While there was still a click as an interaction element on the smartphone, multitouch interfaces also introduced new gestures that couldn’t be performed with a mouse. The resulting fragmentation made the work of both designers and engineers even harder, and the lack of appropriate tools even more obvious.

In hindsight, we got away with using static design tools for a while because we did not use the full power of the web — that changed with the advent of the smartphone. Adapting entire digital interfaces to the user’s context made the complexity and cost of interfaces skyrocket, so we had to invent the means to get more efficient — the reusable component comes into play.

In 2013, Brad Frost came up with Atomic Design. He drove pre-existing ideas for a responsive design workflow even further, fostering a farewell to the paradigm of designing pages. Atomic Design and its sibling design systems replaced the page as the defining unit of digital interaction design with the component, spawning the need for tools that could handle those components. (In Atomic Design, there are still pages, but the smallest unit is, you guess it, the atom.)

As design is scaling and gaining in importance, increasing complexity and the need to truly understand each others’ work regardless of specialisation (most importantly product design and product engineering, but product management as well) fosters the meteoric rise of design systems. At SinnerSchrader, we love to work in cross-functional teams to create truly transformational products. Design systems have become an important part of our daily work, for designers as well as engineers.

But how to create better design systems?

We build and maintain massive design systems for our clients every day. Therefore, we need a tool that can cater to a very wide range of different products and helps our designers and engineers to connect. And because such a tool didn’t exist, we set out to build our own.

Enter patternplate. It’s a tool and a platform that helps you to create a design system in a consistent, structured format. It allows you to

  • see and reason about components in isolation,
  • put components into broader context (e.g. principles described via text),
  • share your work with others and
  • view work of others without doing developer voodoo.

Let’s dig deeper into the concept of components for a moment. React defines components as independent, reusable pieces that can be thought about in isolation. Theses pieces can and must both be designed by designers (hence Component Based Design) and coded by engineers.

Like books in a public library, we collect these pieces of design and code in component libraries for further use and reference. These libraries also solve the style guide problem. In short, style guides tend to fall out of sync unless you make them an integral part of your development process. Therefore, patternplate does and is two things:

  • a dev environment for the creation of design systems and
  • a web application for the presentation and documentation of design systems (i.e. a Living Style Guide).

In its current iteration, patternplate now works with everything that works on the web, including React. It even supports multiple technologies in one design system. What’s unique about patternplate is that it is a tool for designers as well as engineers.

While it can and should be used by designers to document design systems, it isn’t a design tool in the Photoshop or Sketch sense of the word. If you are looking for a decent and suitable design tool, have a look at Alva (caution: alpha version). It works in combination with patternplate.

A tool worthy of your best work

patternplate builds on our experience with massive, production-grade component libraries worked on by dozens of designers and engineers to build products that serve millions of users every day. Their diverse needs went into the design of the feature set of patternplate — we like to think that after years of refining, we hit a sweet spot between expert-level tool and approachability.

  • Super-powered search system: A search that does both fuzzy search and structured search queries helps you to find what you are looking for quickly and reliably.
  • Theme patternplate your way: Configure all colors, fonts, logos and icons in patternplate to match your design requirements.
  • Real-time updates: You’ll never have to reload your browser — just edit files in your text editor and save, everything in your design system will update automatically.
  • Give context with Markdown docs: Write documentation both for overarching principles and related directly to your components in the well-known Markdown format.
  • Stay flexible with labels: Instead of pressing components and documentation into an inflexible hierarchy of directories, patternplate provides a labeling system — combined with virtual folders based on our search engine you can create lists and item trees for every conceivable use case very quickly.
  • Inline demos: Embed interactive component demos directly into your documentation to make your point and let the reader experience it with an example.
  • Isolated component workbench: Develop and test your components isolated from patternplate and other parts of your design system.

Your system, your technologies

If it works on the web, it works with patternplate. By fundamentally using just HTML, CSS and JavaScript, patternplate can accept any input that may be rendered or built into the common web technologies. This includes popular rendering libraries like React, Angular and Vue.js, transpilers likes Babel or TypeScript and preprocessors like SASS, PostCSS or less.js. You can even mix your tools and decide to use different technologies for different components in the same design system.

All open, zero lock-in

patternplate is built with open source and standard technologies from the ground up. Leveraging the Node.js ecosystem and web standards it ensures you always can take full control if you need to. Licensed under the MIT license, nothing bars you from forking and adapting patternplate to your needs.

For more information, check out the website, Github and drop us a line. Want to join the mission? We’re hiring.

Like what you read? Give Martin Recke a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.