Hello!
My team is working on a design system and we’ve been discussing the best way to make our components both modular and easy for new designers to use correctly.
We’ve concluded that nesting components (each with their own set of Variants) saves immense amounts of time because each individual UI element has a central definition that can be easily updated no matter how many other components use that element.
But there is one issue that’s been coming up when there are so many components and variants nested: how to make sure that designers use the components correctly even when they’re not intimately familiar with how they were built.
For example, let’s say we’ve designed a dialog box component. We want to create a Variant where the dialog is in an error state so the user can’t close it until they fix the issue. Let’s say that we want indicate this condition by creating a disabled Variant for the submit button and a validation warning for the text input. Then we create a Variant for the whole dialog component where we set the button and the text input to display their “error” Variants.
So then let’s say a designer drags the dialog into their workspace. They see the dialog has two Variants: Default and Error, and they select Error. The button and the text input automatically switch over to their “error” states, which is expected. But then the designer thinks “eh… personally I don’t see why the button needs to be disabled” and just clicks into the layers panel and swaps the disabled button for its default active state. Now we have a text input with an error validation message, and an active Submit button - two states that were never intended to be active at the same time together.
The issue is there seems to be nothing in Figma right now that lets you discourage this kind of ad hoc modification to component definitions. Though my days as a Sketch user are rapidly becoming a distant foggy memory, I do recall that you could specify which Symbol options you wanted available at the component level - in effect, creating usage rules for Symbols in your Sketch Library.
I suppose you could solve this with extensive written documentation (ie "don’t ever change the button and text field Variants independently…”) but that seems labor intensive and relies on careful reading by engineers and other designers.
Has anyone wondered about this, or run into the issue, or better yet, figured out a way to handle it? Thank you!!
