You'll never need to detach a Figma component again

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

Рет қаралды 17,235

Жыл бұрын

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/community/file/...
===
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.

Пікірлер: 27

@michaelschultze3595 8 ай бұрын

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

@midejumo 11 күн бұрын

Unrelated: Your facial air is so so fascinating!

@FigmaBites 11 күн бұрын

Thanks, I appreciate the comment

@shridharreddy1320 Жыл бұрын

Very useful. Thank you!

@RaphaelWeis-qt6jp 2 ай бұрын

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.

@tatsumo Ай бұрын

Very useful handsome guy.

@FigmaBites Ай бұрын

Thanks!

@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 3 ай бұрын

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 3 ай бұрын

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

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

@michaelschultze3595 8 ай бұрын

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

@FigmaBites 8 ай бұрын

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.

@michaelschultze3595 7 ай бұрын

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

@FigmaBites 7 ай бұрын

@@michaelschultze3595 happens to the best of us :)

@kaylablock1425 6 ай бұрын

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

@FigmaBites 6 ай бұрын

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

@codewithuzair 10 ай бұрын

How to Change Color of PNG/JPEG Image in Figma

@mrmaijd 2 ай бұрын

Use color "overlay plugin" for it. it is a free plugin

@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 11 күн бұрын

Jesus Saves, and He loves you all.

@FigmaBites 11 күн бұрын

Amen, brother