Great post once again. Learning a lot about design systems due to your talks! I had a couple questions related to design system.
Can consistency and flexibility co-exist?
How/when do you draw the line between flexibility VS consistency?
What would be an example of too much flexibility in a design system?
For example, there is a lib called, styled-system, which makes it possible to expose marginRight, marginLeft, ..., paddingLeft, paddingRight, ... to the "consumer" of the design system, but I'm not sure if that's such a good idea. It feels wrong, but I can't really express why and I might be wrong about it.
Thank you for everything you do!
Kind regards,
Kevin
You can absolutely maintain consistency with flexibility; it's all about providing boundaries for said flexibility. For example, allow teams to customize the theme/color palette for different products. So they won't be able to go rogue and add random colors, but they have flexibility to choose options within our bounds.
Too much flexibility is letting developers add custom/rogue values for things :).
What about how a component acts on it's surroundings. Like the padding or margin of an icon. Would you expose marginRight, etc or preferably a prop called "dense", which either makes the spacing tight or "normal" rather than giving straight access to modify the internal margin's.
You can create a spacing mixin/partial if using Sass to allow developers to add specific values for padding/margin. We use a multiple of 4 and have defined variables to help with this :)
Hi Emma,
Great post once again. Learning a lot about design systems due to your talks! I had a couple questions related to design system.
For example, there is a lib called,
styled-system, which makes it possible to expose marginRight, marginLeft, ..., paddingLeft, paddingRight, ... to the "consumer" of the design system, but I'm not sure if that's such a good idea. It feels wrong, but I can't really express why and I might be wrong about it.Thank you for everything you do!
Kind regards,
Kevin
Hey Kevin!
You can absolutely maintain consistency with flexibility; it's all about providing boundaries for said flexibility. For example, allow teams to customize the theme/color palette for different products. So they won't be able to go rogue and add random colors, but they have flexibility to choose options within our bounds.
Too much flexibility is letting developers add custom/rogue values for things :).
What about how a component acts on it's surroundings. Like the padding or margin of an icon. Would you expose marginRight, etc or preferably a prop called "dense", which either makes the spacing tight or "normal" rather than giving straight access to modify the internal margin's.
You can create a spacing mixin/partial if using Sass to allow developers to add specific values for padding/margin. We use a multiple of 4 and have defined variables to help with this :)
That helps! Thank you! :)