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

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

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

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

[@avgenjy]

This is soo cute lol, also thank you for this

[@FigmaBites]

@@avgenjy thanks! Glad you enjoyed it

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

[@flaviaazvdo9333]

Cool, thanks!!

[@FigmaBites]

You bet!

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

[@tatsumo]

Very useful handsome guy.

[@FigmaBites]

Thanks!

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

[@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 :)

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

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

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