The Technical Side of Design Systems by Brad Frost

Sell

  • Reduce technical debt — less frontend spaghetti code.
  • 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

Plan

Design and build

Launch

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

Maintain

Summary

  • Your design system must live in the technologies your products use.
  • 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.

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Google is being tricked by a corporate war, regardless of the user’s best interest

How to Become a Vendor at TemplateMonster, ThemeForest and CreativeMarket Without Losing One’s…

Animating cloth physics in Marvelous Designer for Unreal Engine 5

Study Case: Food Subscription Service in Gojek (GoCatering)

Value Proposition Design Summary

6 Different Variants of Red and How to Wear Them

High End Beauty Retouching It makes a model look younger, healthier, slimmer, and glamorous by…

Challenge 1: Design Thinking

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

More from Medium

Curating UX London 2022

Why the Digital Society needs the Open Society

Crossing the Delaware

Design a Health Code System That Will Never Crash