Super-primitives in design systems.
Hey there, so I am guilty of overusing Primitives in my design systems. Primitives are super-components — component patterns that can be reused inside other components. I call mine the <SuperPrimitive>
My <SuperPrimitive> Figma component — It’s the Swiss army knife of components: This bad boy can cover 80% of your design system needs. With a few choice props it can form many, many, many atomic components. It’s like a lever, pointing to the moon. The Toolbar on the right contains a stack of icons for general use, but it can be switched to any other component you might need.
Props
I use six props:
Stacked or inline,
Show/Hide Icon left,
Show or hide all the texts,
Show/Hide the Primary text,
Show/Hide the Support Text (second line),
Show/Hide the Controls (an icon stack).
With the SuperPrimitive I can cover 80% of my atomic level component needs by creating a component from this primitive, styling it and changing the primitive props.
The beauty (and the danger) of this is that I can easily update ALL the components that use the primitive across the board: update the padding, add features, remove them, etc. and all the children of this primitive will be updated.
The danger is that some updates to the primitive will upend the overrides in the children - so we need to be careful.
“With great power comes great responsibility.”
Swap the icon left for a Logo; More icons in the Toolbar right-side; Add styling and away you go…
