Hey guys, this is Ana with other Figma tip.
So today, I want to talk about how you can use component properties
to build a pseudo slot components.
In this example, I'm going to be building a card component with some
slots that I then want to switch out with some other components.
So here is the slot placeholder that I have.
And then these are the components that I want to switch it out
with to start building my card.
I'm going to create a frame.
Let's drop in an instance of the slot placeholder.
And let's apply auto layout, and then I'm going to put in
just five slot placeholders.
Then I'll turn it into a component.
And then for each slot, I'm going to click on it.
And first I'm going to create a instant swap property.
So that I can switch this out with other components.
I'll just name this slot one and I'm going to number each one.
So it's easy for me to keep track of which slot I'm editing.
Then I can now set preferred values.
So the ones that are showing up here are already grouped together with
the slot placeholder in this frame.
But what's really nice about component properties is that I also
have the option to swap out this placeholder with components in other
libraries that I have access to.
But for the sake of the demo, I'm just going to stick to the components
that I have in the same file.
So I'm going to select all the ones that I want to switch it out with.
Click create property.
And then I'm also going to go to layer.
And create a boolean property because I want to be able to choose
which slots I want to show or hide.
To change the number of items that I have in my card component.
Create property.
And yeah, basically I'll follow that step or every single slot.
But for the sake of time, let's just fast forward.
And this is what it's gonna look like.
Once I do that, so.
Here you can see, we have our instance swap properties for all
five slots, as well as the ability to show or hide each of the five slots.
Now something else that's really important is for some of these components that
I want to switch my slot placeholder with is that they each have their own
corresponding component properties.
So for example, this body texts that I have is a text component property.
Same thing with the header.
And then also for this button component I have a.
Property setup that allows me to switch out, which icon is being used.
To show her hide the icon and then also to edit the label, text of the button.
So in order to surface those properties, what I'm going to do is
I'll click on the main card component.
Click this plus button by properties and then choose to expose nest instances.
And because I have five slots.
I'm just going to select for all five.
Cool.
And now let's see how this works.
So I'm going to just drag in an instance of my card component and to switch
out the components using the slots.
I can either edit it from this properties panel here.
So yeah, let's add like a header.
And a divider, but I could also do this at the level of the slot.
So I could click on the slot layer itself.
And switched from there as well.
It just kind of depends on what your own personal preference is.
So yeah, and let's add some text and then let's add.
Maybe action button here.
Cool.
So, this is how you can switch them.
And then also, because I created boolean properties,
I'm also able to show and hide.
The different slots.
And you can also see that when I toggle on off.
The view to be able to switch it out disappears because it's not
applicable since you can't see it, you can't switch it out with
another component till it's visible.
Again.
I can also edit the number of slots I have just by pressing delete.
And then you can see here, it's showing that slot five is hidden.
Something else to point out is that, so since we do have some components that are
switched out with the slot placeholder that have their own properties, Is they're
going to show up as I'm adding them.
So here I can see for the header text, I can.
Edit the title here.
Just from the properties panel.
And then I can also change things about the button as well.
So maybe I want to hide the icon.
And yeah.
If I hide slot five, You can see that the buttons no longer visible.
And so the action button component properties.
Are hidden.
Yeah, that's how you use a component properties to
create pseudo slot components.
And I hope you enjoyed this.