Replace "Variants" with "Presets" to enhance prop combinations for editing/previewing components

I suggest that Variants be “dropped” in favor of “Presets”. (Or “Presets” should be offered in addition.)

I love the experience of Variants (how very easily you can define them, see how they look instantly, and preview them separately in the preview mode.)

However, I find variants too simple. It’s just a single prop. I find it useful only in simple components (e.g. a button), but not anywhere else. In 90% of situations I have to use props and dynamic code conditions to steer logic.

For example, let’s say I have a EventList component that accepts events: Event[]. It should look differently in the following three scenarios:
• 0 events
• 1-3 events
• 4+ events
Furthermore, maybe there’s another prop saying editMode: boolean. It may impact how the “1-3 events” and “4+ events” scenarios look like.

Currently I can do it all, but to see how it works in reality, I either have to click through my app (like in e2e tests) to see how this component works in all scenarios.
Or, I have to change the “Preview value” of the props there-and-back (which is a manual, tedious and error-prone process, especially in props that accept complex array/object jsons as the value).

Instead, it’d be great if I could say that I’d like to have presets of my EventList component, that have following prop combinations:
• “0 events” - events: []
• “2 events” - events: [1,2]
• “4 events” - events: [1,2,3,4]
• “2 events, edit mode” - events: [1,2], editMode: true
And while editing/previewing the component, I could control which preset is currently used for the props preview values.

I already saw it in action in one front-end no-code framework. Unfortunately it was internally built and used in my previous company, so I can’t show how it worked exactly - but I gave you the idea above.

Hi, I understand your point, but as you said variants are a good experience, some details that I don’t know if you know but you can use dynamic values to active specific variants, also you can create custom arenas that you can add your own components and add props in specific ways, with this you can have a better visualization of your component for some specific cases.

But your idea of presets it’s good, because even with both things that I mentioned it’s still not clear in the own component UI how things look with different format of data, maybe we should have this kind of presets, by only allow the preview values that you can set for your variables/props to be different per artboard.

you can create custom arenas that you can add your own components and add props in specific ways
Hmm I’ll try that - thanks for the idea