Elyse Holladay

A Working Theory of Components

Design Systems are our current model of making sense of the intersection of front-end code and design. With the tools we have today, what is our working model of a component? How do we define them, create them, and ensure they work at scale? In this talk we’ll discuss how our tools affect our understanding, create a checklist of factors that make a component a component, and how to implement the theory of components with the tools you have at hand.

slides 1

slides 2

slides 3

slides 4

slides 5

slides 6

slides 7

slides 8

Overview

Over the past 15 years, our understanding of the world of front end development has changed. We have been iterating constantly on our working theory of how to design and code for the web.

We’ve used the tools we have not just to create solutions to the problems we face, but also to create new tools. These tools aren’t just helping us do our job; they are changing the way we can even conceptualize our work. We’re building on what we learned previously, filling in the gaps and unknowns. We are coming to a new understanding, with these new tools, of how to create the front end at scale: Design Systems.

We want isolated components that we can reuse, styles that don’t conflict, and an easy authoring experience.

At a high level, we know that a component needs to be three things:

  1. — easy to reason about
  2. — context agnostic
  3. — independent and isolated

Our theory of components should be mostly applicable regardless of our tools. What works for one project may not work for another. But when you find things that don’t work, gaps in our knowledge, that doesn’t mean the whole theory is broken.

We are experimenting with this theory of design systems every day as we work. What we learn will add to the theory, help us move forward, and create even better tools to improve our work. Searching for new solutions might even propel us forward so far we have as many new questions as answers. As we work together today and tomorrow and in the months and years to come, keep thinking beyond today’s understanding of the world, and on to tomorrow’s.

Notes

Did you take notes during this talk? Share them with me and I’ll share them here!

Resources

Books

These books inspired the science story in my talk. Black Holes Blues especially is the best book I have read in a long time. I highly recommend it!

Science Links

Tech Links

Credits

Slide design, color palette, and illustrations by the talented and lovely Ainsley Wagoner.

The beautiful typeface is Klim Foundry’s Tiempos Text and Headline.