The Technical Side of Design Systems by Brad Frost

Sell

He begins with selling in a design system. That can start with an interface inventory. This surfaces visual differences. But even if you have, say, buttons that look the same, the underlying code might not be consistent. Each one of those buttons represents time and effort. A design system gives you a number of technical benefits:

  • Faster production — less time coding common UI components and more time building real features.
  • Higher-quality production — bake in and enforce best practices.
  • Reduce QA efforts — centralise some QA tasks.
  • Potentially adopt new technologies faster — a design system can help make additional frameworks more managable.
  • Useful reference — an essential resource hub for development best practices.
  • Future-friendly foundation — modify, extend, and improve over time.

Kick off

Brad asks “What’s yer tech stack?” There are often a lot of tech stacks. And you know what? Users don’t care. What they see is one brand. That’s the promise of a design system: a unified interface.

Plan

Where to build the design system? The tech stack under the surface is often an order of magnitude greater than the UI code — think of node modules, for example. That’s why Brad advocates locking off that area and focusing on what he calls a frontend workshop environment. Think of the components as interactive comps. There are many tools for this frontend workshop environment: Pattern Lab, Storybook, Fractal, Basalt.

Design and build

Brad likes to break things down using his atomic design vocabulary. He echoes what Mina said earlier:

Launch

What does it mean to “launch” a design system?

  1. Front-end reference code.
  2. Most integrated: consumable compents.

Maintain

Now we’ve entered a new mental space. We’ve gone from “Let’s build a website” to “Let’s maintain a product which other products use as a dependency.” You need to start thinking about things like semantic versioning. A version number is a promise.

Summary

This is hard.

  • Look at your product roadmaps for design system pilot project opportunities.
  • Establish code conventions and use tooling and process to enforce them.
  • Build your design system and pilot project UI screens in a frontend workshop environment.
  • Bake best practices into reusable components & make them as rigid or flexible as you need them to be.
  • Use semantic versioning to manage ongoing design system product work.
  • Use design tokens to feed common design properties into different platforms.

--

--

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
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com