At Ubank, I maintained our design system by creating variants of existing components or creating new components where I would document component properties (padding, font styling, etc) as well as best practices. Using variants and boolean properties enables you to create versatile components and easily turn particular elements on or off.
‘Feature intro’ component properties
‘Action tile’ component properties
Below are examples of my component documentation for a new dynamic sign up page that could show either animation or video:
.svg)
As I matured as a designer, so did my documentation of components:
