You'll never need to detach a Figma component again | Figma Big Bite

Hey everyone! We hope you are all having an okay beginning to the year. We took January off and are excited to share our latest video with you. In this Big Bite, we cover a technique some are calling "Slot components". This technique lets us build flexible components that are setup for instance swapping internal pieces. This allows designers using components to make customization that aren't part of the main component while staying attached to the main component.

If you want to make a copy of the demo file, you can access it here:

===
ABOUT FIGMA BITES
===

Figma Bites is a video series that aims to teach you how to speed up your Figma workflow.

📺 Who is the Audience? 📺

Any UX Designer or person using Figma is the perfect audience for this series. These short videos will give you actionable tidbits of information that you can start using in your Figma workflow today.

👔 Why this format? 👔

We’re all busy working on making the world better for our users and making changes to our workflow can take us out of that focus. Our hope is that these short videos will be easily digestible when you’ve only got a few minutes to learn something new. The topics will be small enough to learn quickly and add to your workflow without trying to boil the ocean.

⏳ When do new videos come out? ⏳

We’re planning to release a new video every other week on Tuesdays. We can’t promise to hit this 100% of the time but will do our best to go no longer than 1 month between videos if things get busy.

[mischugo]

Due to my lack of English skills, I unfortunately have to watch the tutorail 3-5 times. BUT - it is by far one of the best tutorials ever. Step by step and also the descriptions around it ... NICE!!!

[avgenjy]

This is soo cute lol, also thank you for this

[maddiemaddocks]

I keep getting the message "Pasting inside the current selection is not possible" when trying to use the paste to replace (???)

[JoskaBorbely]

Great info! Quick question since I saw it happen at the beginning - when you picked that button to swap into the dialogue box it got distorted. Does this mean for components you already made (lets say somewhere else in the design system) you'd have to make a custom local component for this everytime?

[RaphaelWeis-qtjp]

But then don't we have a new component that we have to store and manage in the page, that has only one instance ? It feels weird to me, I wouldn't know what to do with it.

[midejumo]

Unrelated: Your facial air is so so fascinating!

[shridharreddy]

Do you have a link to the screen that explained the slot process to designers?

[HolographicKode]

Is it possible to drag and drop content or another component onto a slot/placeholder subcomponent of a component and have the swap happen automatically ?

[mischugo]

I'm still not sure what's going wrong. At 3:30 no "Create Swap ... " is displayed in the layer panel. 🤔

[tatsumo]

Very useful handsome guy. <3 Thanks!

[kaylablock]

But doesn't that mean that you need to own the component?

[MariaZenkevich]

Thank you. What's the purpose of copying the slot and pasting the new layout inside it (5:38)? Could I simply create my custom layout components and then just swap the slot with that directly?

[alexbramwell]

Awesome tut but this still feels super hacky 🥴