Building flexible components using the 'slot' method

We often find ourselves creating lots of different variations of similar components, this can be tedious and difficult to maintain.

Using a technique called "slots" (shoutout to @Rogie), we can swap out components very easily from a single component.

This gives our teams flexibility to create new designs whilst still using the guidelines from our design system.

[mordor]

okay so I watched it twice now but I still have no idea what that was about

[hglbrg]

This is a GREAT showcase if you already know how this works. It's really not any good as a tutorial for showing how it is done, though.

[erikbriones]

This is very useful indeed. I used the same process when I was creating a mobile app for our news website.

I just placed the “slots” ... and then created different component types e.g. 5 article components, 6 articles, subscription box, ads, or other types. Then just replaced each slot with them. 🙂

[BenMurga]

I like this idea, but I do see a problem. Apologies for the long explanation, but it is a hard issue to explain without visual examples:

I do something similar with navbars; I have 12 blank tabs and I can show/hide any amount. For example, I can use the first 5 tabs and give them all unique labels like Profile, Documents, Meetings, Notes, and Settings. The problem comes from when a prototype has this navbar linked to other pages. If I want to change the order of the tabs, like swap Documents and Meetings, for instance, I have to either retype the label and re-link all prototype links, or detach the component, and then it is easy for me to reorder the layers without disrupting the prototype. However, now it's not a component and won't receive future component updates.

I think you could encounter a similar problem with this example in the video above that I come across in my navbar. If you had your first 5 slots filled and wanted to add another slot above that, you'd either have to manually re-slot everything, copy/paste all the content and re-link any broken prototype links, or detach the component and reorder a new empty slot above the initial 5, which would be easier, but ultimately defeats the purpose of the component.


This is a complex issue I haven't found a solution to yet. Would love to see some community examples of how to solve this!

[eltonbehari]

Always showing great tips Luis. Thanks for sharing

[CuttingEdgeSchool]

Oh I JUST made these last week for our own Feed Posting at zuddl! I was super excited to show it to the team hahaha

[AndreiValentim]

Figma should do an option in the software with the option "slot" and make it more friendly. The idea is good, but the way is being done is a "gambiarra", like we brazilians say.

[Gabesgraphic]

Thanks mate. This will be very helpful for what I'm doing right now. Great presentation btw.

[rickdeeks]

i can see how YOU do it, but can you tell me how i can do it

[mobesters]

Why 0.01 px? Maybe zero-height trick can help to keep pixel-perect size of blocks?

[MFPRODUCTIONSCHANNEL]

I think it would take even less time to accomplish the same thing without the slot technique?

[morethanpixls]

My issue with slots is the needless layers that you have to turn on and off. It can also become unusable if you need more slots.

[gmaps]

You’re presenting a really useful technique here, but I found it hard to follow, and I already use this technique! You might want to try explaining everything more clearly (e.g. the term “slot” might be familiar to someone familiar with VueJS, but it’s not a term that appears anywhere in Figma).

[secession]

I've had a two months break from Figma and now I have a feeling that most of your tutorials are outdated... It's so hard to get back to Figma while so many new features arrived.

[robwinteruk]

It looks like your slot instances are set to fixed height, yet when you swap them for another component they change to hug contents. When I try this my slots remain at 0.01px height, which doesn't really work for users!

[saloni]

Seriously, I didn't understand what he said, and what he wants to say.10/3 for explanation

[matscode]

I was thinking this is a new slot feature.

But this is just the component swap instance feature being leverage I believe.

- Create an empty component
- use it to compose an actual component to reserve spaces for other possible child component called slot
- Now swap/replace/hide the empty component with other smaller component when creating a variation of the actual component

This is correct, yes?

[georget]

Seems super hacky, really should be a feature that needs to be properly considered, it's a common pattern, but having a bunch of empty placeholder slots like this feels wrong. Also though, quick tip, nest your slots into another group, so that if you want to do a caret placement hack for a popover you have the benefit of auto layout for the inner components but not have the caret occupy additional space in that layout.

[cortjezter]

Certainly a competent demonstration, but judging by the comments, perhaps a bit too quickly paced for a nested, abstract kind of component building process.

[nikhilverma]

You zipped through the whole thing, but I did not understand anything