↵

How do you guys handle multiple variants of a component in a design system?

almost 5 years ago from Mo Baghdadi, I design stuff

  • Sander SmeekesSander Smeekes, almost 5 years ago

    We are currently setting up our component library (part of the design system) in Figma. We try to make 1 main component with all the variations of the element placed as flexible as possible. From this component we make Instances and start making the variations by hiding the elements. Those variations than sometimes become part of the library depending on the overall usage.

    So for example:

    Main component: Input field

    Placeholder text, Optional text, Label text, Clear icon, Validation/error icon, validation/error text

    Instance: Default state for input field

    Showing only the: Placeholder text + Label text

    Btw. What's up with the text colour of the comment section input field here at DN? It's like i'm typing in the placeholder text.

    Anyway hope this gives a clear idea about our workflow!

    4 points