How to build and maintain massive design systems

Martin Recke
Jun 2, 2018 · 5 min read

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.

Still Day One

Digital Transformation keeps transforming. We host ideas, plans, tools, point of views and all things of interest on the age that feels familiar, but has just begun today.

Martin Recke

Written by

Co-Founder @nextconf, book author, editor @sinnerschrader, PR guy, blogger, journalist, political scientist, theology, singer, father, landlord, roman-catholic.

Still Day One

Digital Transformation keeps transforming. We host ideas, plans, tools, point of views and all things of interest on the age that feels familiar, but has just begun today.

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