DEV Community

loading...

Discussion on: Design Systems (Part II: Design Language)

Collapse
venikx profile image
Kevin Rangel

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.

  1. Can consistency and flexibility co-exist?
  2. How/when do you draw the line between flexibility VS consistency?
  3. 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

Collapse
emmabostian profile image
Emma Bostian ✨ Author

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 :).

Collapse
venikx profile image
Kevin Rangel

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.

Thread Thread
emmabostian profile image
Emma Bostian ✨ Author

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 :)

Thread Thread
venikx profile image
Kevin Rangel

That helps! Thank you! :)