How I use Slot designs
Slot design is not a new concept, it’s been around for a while. Here is how I decide to use slot designs instead of variants inside of a component.
My favorite component to use slot designs is a card/widget header. A widget/card header is the top section of a widget that typically includes a title or label, and usually additional controls such as icons, buttons, or menus.
It serves as the primary identifier for the content or functionality of the widget, providing users with context and easy access to key actions related to the widget's purpose. The design of a widget header is often consistent across a platform or application to ensure a cohesive user experience.
Multiple variants
Problem with variants
Normally, I would think to use variants, but there are a few problems with this:
Not flexible — we need to be able to support multiple types of actions
Messy maintenance — for the system designer, I now have to take care of minimum of 9 variants
Not scalable — How do we make it more flexible in its current state? MORE variants?!
Even if we have exposed nested instances for each variant type, we still run into the same problems.
Welcome, slot design
Okay, so clearly having 9+ variants inside of this component was NOT going to work for me or any of the designers using it. Generating the combinations alone sounded like a nightmare, so how can I make this easier on myself (and others)?
Instead of having 9+ variants that I had to maintain, I broke out all the different kinds of actions into their own hidden component and nested them inside of the main Card Header.
Each ‘slot’ is renamed and represented by a ◼︎ for quick identification for both the builders and the designers. With exposed nested instances not supporting (yet) the ability to hide certain properties/components, I needed a way to quickly identify a slot position verses everything else.
This instantly dropped the 9+ variants down to 1 (+mobile responsive) AND now this component is easier to maintain 🔥. Based on what I found in production and user research with designers, I found that up to 4 different types actions/adornments can live inside these card/widget headers, thus why there are four slot positions. This also helps us maintain a maximum amount of actions in a card header so that we are not over bogging down its functionalities.
Splitting out the actions into their own hidden component makes it super easy to edit, remove, change without breaking changes! Since the parent component just have these invisible placeholders for XYZ action (a slot), all the major re-layering and configuring is done outside of the parent.
Slot design - builder architecture
Consumer side
Designers are incredibly busy and likely don’t care as much on HOW something is built as long as they can intuitively use it. In conjunction with user Figma guidelines and a little bit of education around ‘slot designs’, card headers are pretty easy to use!
With exposed nested instances, a designer can see open ‘Type’ of actions and choose from that list without even looking at layers. Whats super cool about slot design is that you can combine ANY combination that the use case needs with very little effort (with the right guidance).
I will say that the nested instances can get a little crazy long, but it’s much easier to use than double clicking into every layer or groups of layers.
How many different combinations do you think you can make with this ONE component?
Take a look, this is only using ONE of the slots (there are 4) and with one single card header, using slot design, I was able to generate 27 different versions within, let’s say 2 minutes or less.
Have I convinced you that this is super rad? I sure hope so.
