Figma tip: Scoped slot components

Slot components aren't a new concept within Figma design systems, but they can often mean we still need to maintain a lot of duplicate components for presentation or composition purposes.

With this technique, we can "outsource" the component composition to a main component, whilst still allowing for completely flexible content within.

Note: Use auto layout everywhere! Swapping components like this only really works if we go all in with auto layout.

____________________________________________________
____________________________________________________
Find us on ⬇️
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

[AlicePackard]

i am a huge proponent of this technique! cards! modals! drawers! basically any styled container whose contents you want full flexibility of can and should take advantage of this approach. good demo Luis!

[LaughingBull]

I'm still trying to understand the problem we're solving with slot components, duplication of the modals and the overlay + modals. What are we simplifying here that combined as variant didn't allow you to do already?

[ThaOrg]

2:59 I really hate this auto layout problem, makes it not useable for our components.

[cillianp]

The slot concept is great but in practice I find that I run into a lot of issues when instance swapping. The sizing or styling of the component that gets swapped in is never respected.

[JayFlaxman]

I tried this week in Figma to create different parent components that display achievement badges at different scales using this method, but all referring to one size of badge design. However, the instance swap breaks the scaling once the placeholder instance has been swapped and the strokes appear at the original thickness and not the scaled thickness. It would be great to talk to you more about this as I've seen it raised in multiple places in the Figma Community.

[zalodias]

I'm finding this method is not only great for design teams, but also for dev handoff – slot components are a very familiar concept to React, Vue & other frameworks.

[hellshpilka]

I think this functionality is similar to "combine as variants", isn't it?

[djashawe]

Thanks for your scoped slots video. I'm unclear about the added benefits of slots over a simple instance swap, given that the need for creating a set of variants remains the same. Can you explain the efficiency advantages of scoped slots?

[okishan]

Not sure if we need each form to be a component. File would get too heavy too. I think as long as basic things like Title Section, Form inputs, Buttons are built it should be fine. I like the idea of slot wrapper though, will try to incorporate it without having variants. Thanks!

[shreyaskulkarni]

I have a question here, why did we take a component and a screen approach instead of a open overlay approach. Is there any limitations in the overlay approach in modals, drawers or similar usecases?

[laachi]

Are you planning to make this a native feature to have slots built in? I use the same work-around in my projects, but it would be nice if an autolayout could have the feature

[STalvacchia]

The problem I have run into is if the design system grows large, the file can become very laggy. And large here is measured more in the layering of components rather than the plain number of components. I'm now deconstructing layered components and going back to detaching and documenting more to try to get my file working as fast as possible.

[omariclam]

It's super easy thanks for sharing.🙌

[playbak]

Nice demo of slot component. If you have the scrim as a separate component that you toggle show/hide then it kind of negates any advantage. Having Modals variant AND Overlays as shown seems like an unnecessary duplicate to begin with.

[PratyushTewari]

What I don't understand is why a slot content needs to be a component? Why can't you just copy and paste a frame (non-component) into a slot area in the parent component. That would be a true web-component slot extension. Instead, now I have to convert all the slot contents into a component which is not always desired.

[Alaguapatos]

Isn't this 90% similar to what the first solution was?

[clevermissfox]

Can you link a copy of this file in the description or as a pinned comment?

[Aespin]

When i instance swap i can't see the variant types

[Mographics]

This is too much work on a simple component, what Figma needs to do is add support to Duplicating a Nested Component! Meaning If I created a Form Component that has one Text Field Component nested in it I should have feature where I can set the property of that nested Component to allow me to duplicate it and since we have auto layout on everything will just look good. I hope this feature gets added in our Component Properties panel to select

[ShivaanshSharma-xz]

There is one major problem with this approach, if you want the nested properties of the new component to reflect you can't have them in the property panel.