Hop around: 00:00 - Getting started 00:23 - Card header component 01:50 - Card footer component 03:28 - Card component 04:23 - What to do with card body? The common way 05:21 - The slot way, let’s make one! 07:00 - Replacing slot with a local component 09:00 - What if we still detach? 10:18 - Let’s review what we have 10:40 - Adding text variant to card component 12:03 - Adding table variant to card component 14:18 - Let’s clean up 15:30 - Let’s the component by recreating examples
Your video is the first sensible approach to Figma slots that I've come across, and it mimics how web developers actually use them! Many videos show the body area having multiple slots... unfortunately, when users see multiple slots they naturally have a 1-to-1 component swap mindset, which becomes inflexible and limiting. But container components like modals and cards can have an infinite amount of UI scenarios inside the body area that won't work with the 1-to-1 component swap. But by having just 1 slot, hopefully users start thinking deeper and realize to wrap their varied content as a private component and slot that in. With all that said, do you use slots like this? Or do you just detach still? Seems more intuitive for users to detach, I don't know if users can make the jump in their head to create a component ahead of clicking on the slot drop zone. It also just feels a little strange/untidy to have the guts of the master content component hanging outside of the modal.
hey, thank you so much! :) yeah having multiple component slots seems useful in theory and rarely applicable in practice… And I use slots this slot approach about 40% of the time, especially if I know that a less experienced designer will be working with my files later on. I think detaching is okay-ish as long as there are sub components (modal header/footer)
Ever since I saw Nathan Curtis' talk (and his Medium article) on Subcomponents, I've been really curious about how far we might be able to take the slotting method (while still keeping it intuitive for end-users of components). I wish there were some tutorials on building more complicated user-configurable components (like cards) with this slot idea. Lots of potential, but it doesn't seem like many people are doing it yet.
Ah Nathan Curtis! His work is so insightful :) Agree, it could be hard to find the balance between pushing the limits of slots while still keeping them usable. I feel though that Figma has been excellent at improving component capabilities without making them overly complicated (like component props). I'm just hoping that soon we'll see some adaptation of the slot idea in Figma's core functionality.
Hop around:
00:00 - Getting started
00:23 - Card header component
01:50 - Card footer component
03:28 - Card component
04:23 - What to do with card body? The common way
05:21 - The slot way, let’s make one!
07:00 - Replacing slot with a local component
09:00 - What if we still detach?
10:18 - Let’s review what we have
10:40 - Adding text variant to card component
12:03 - Adding table variant to card component
14:18 - Let’s clean up
15:30 - Let’s the component by recreating examples
Your video is the first sensible approach to Figma slots that I've come across, and it mimics how web developers actually use them! Many videos show the body area having multiple slots... unfortunately, when users see multiple slots they naturally have a 1-to-1 component swap mindset, which becomes inflexible and limiting. But container components like modals and cards can have an infinite amount of UI scenarios inside the body area that won't work with the 1-to-1 component swap. But by having just 1 slot, hopefully users start thinking deeper and realize to wrap their varied content as a private component and slot that in.
With all that said, do you use slots like this? Or do you just detach still? Seems more intuitive for users to detach, I don't know if users can make the jump in their head to create a component ahead of clicking on the slot drop zone. It also just feels a little strange/untidy to have the guts of the master content component hanging outside of the modal.
hey, thank you so much! :) yeah having multiple component slots seems useful in theory and rarely applicable in practice…
And I use slots this slot approach about 40% of the time, especially if I know that a less experienced designer will be working with my files later on. I think detaching is okay-ish as long as there are sub components (modal header/footer)
Ever since I saw Nathan Curtis' talk (and his Medium article) on Subcomponents, I've been really curious about how far we might be able to take the slotting method (while still keeping it intuitive for end-users of components). I wish there were some tutorials on building more complicated user-configurable components (like cards) with this slot idea. Lots of potential, but it doesn't seem like many people are doing it yet.
Ah Nathan Curtis! His work is so insightful :)
Agree, it could be hard to find the balance between pushing the limits of slots while still keeping them usable.
I feel though that Figma has been excellent at improving component capabilities without making them overly complicated (like component props). I'm just hoping that soon we'll see some adaptation of the slot idea in Figma's core functionality.
I wonder what happened to the Digital body 🤨
looks like a tiny bug to me 🐞