Where to put components in a design system?
How to determine whether the front end or design system is the best place to add a feature?
Hannah:Turns out fuzzy felts are the perfect analogy for this.
img
img
A component is an individual element such as a button that can be combined with other elements to create larger components.
If components are represented as fuzzy felts I can create any combination of designsusing the fuzzy felts on my desk. Anyone can come by and see my creations however I can't pick up my desk and show it to anyone (ie the internet) because they’ll all fall off. The desk is the perfect place to preview and try things out though however.
If I then add in the dedicated fuzzy felt board I can create infinite combinations with those fuzzy felts. I can also pick up that board and show them proudly to anyone (the internet) without them falling off.
The ability for the fuzzy felts to stick to the desk can be (very abstractly!) interpreted as data. When the fuzzy felts are on my desk they don’t stick because they don’t have any data. What they display is just example data. However when we put the fuzzy felts on to the fuzzy felt board they're held there by the data that is passed through to them from the front end. That data pins them in place.
Anything that involves CSS and styling will live in the design system. Even structural things such as a container (see MaxWidthContainer) live in the design system. The frontend just takes all the components and puts them together with the data. The design system has no ability to talk to the CMS to gather data. Anything that is in there will be example data. (exception being the postcode API - it knows this exists)
Created on: 28th October, 2022
Last updated: 28th October, 2022
Tagged With: