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:
www.figma.com/...
===
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!!!

[@shridharreddy1320]

Very useful. Thank you!

[@flaviaazvdo9333]

Cool, thanks!!

[@FigmaBites]

You bet!

[@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?

[@FigmaBites]

@@JoskaBorbely what you saw there was just me showing a placeholder example of custom content. You should be able to fix any stretching by adjusting the auto layout settings and horizontal and vertical resizing settings. I believe that content was set to “fill” for both. You would only be making custom local components for content you are creating that isn’t already part of the design system. I hope that answers your question. If not, let me know.

[@JoskaBorbely]

@@FigmaBites Yes, thank you that works for buttons, the issue I'm running into is when I have a component set of logos that have different sizes, when the component swaps with the slot it is working as expected but when I toggle a variant it then distorts

[@FigmaBites]

@@JoskaBorbely hmmm, can you share the file with me? I’d be happy to take a look

[@RaphaelWeis-qt6jp]

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!

[@FigmaBites]

Thanks, I appreciate the comment

[@maddiemaddocks2482]

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

[@FigmaBites]

@@maddiemaddocks2482 you can’t paste into a component instance

[@maddiemaddocks2482]

@@FigmaBites Aaaah.... I thought we were supposed to select the text of the duplicated slot & paste to replace. I kept backing up to rewatch snippets but I guess I missed something.

[@shridharreddy1320]

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

[@FigmaBites]

Check the video description. I just added a link to the demo file hosted on Figma community.

[@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 ?

[@FigmaBites]

I don't think so but I haven't tried that specifically.

[@tatsumo]

Very useful handsome guy.

[@FigmaBites]

Thanks!

[@mischugo]

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

[@FigmaBites]

I'm renaming a layer in the lower portion of the layers panel to "🧩 Swap Me" and then I start setting up an instance swap property.

[@mischugo]

@@FigmaBites My mistake was that I tried it directly at the instance 🙈

[@FigmaBites]

@@mischugo happens to the best of us :)

[@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?

[@FigmaBites]

Yep, you could do that. I copy the slot so it has the right auto layout and such applied already. It isn't necessary. But when I was testing out this technique with some other designers that didn't know auto layout as well, there was some hang up getting their custom component to slot into place cleanly.

[@kaylablock1425]

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

[@FigmaBites]

Yes. If you have a different team making components, show them this technique. Or build your own and share it with them.

[@alexbramwell1870]

Awesome tut but this still feels super hacky 🥴

[@FigmaBites]

I feel you. When I first saw it I thought the same thing. And it does feel that way but since it’s using core features of Figma, I wouldn’t consider it a hack. It’s a technique an entire team needs to get behind or it doesn’t work as well. That’s the same with a lot of things in Figma and other tools since we can do the same things in so many different ways.

[@jakebarlow7431]

It seemed weird at first until I realized the power of it. It's totally not a hack, and it allows users of our design system to use our components and styles while designing with their data within the constraints that allow them to launch features more quickly with less time spent in approval rounds.

[@FigmaBites]

@@jakebarlow7431 Thanks for adding that :)

[@midejumo]

Jesus Saves, and He loves you all.

[@FigmaBites]

Amen, brother