Тёмный

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

Figma Bites
Подписаться 3,4 тыс.
Просмотров 14 тыс.
50% 1

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.

Опубликовано:

 

12 фев 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 23   
@michaelschultze3595
@michaelschultze3595 6 месяцев назад
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
@shridharreddy1320 Год назад
Very useful. Thank you!
@RaphaelWeis-qt6jp
@RaphaelWeis-qt6jp 21 день назад
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
@tatsumo 10 дней назад
Very useful handsome guy.
@FigmaBites
@FigmaBites 10 дней назад
Thanks!
@shridharreddy1320
@shridharreddy1320 Год назад
Do you have a link to the screen that explained the slot process to designers?
@FigmaBites
@FigmaBites Год назад
Check the video description. I just added a link to the demo file hosted on Figma community.
@HolographicKode
@HolographicKode 2 месяца назад
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
@FigmaBites 2 месяца назад
I don't think so but I haven't tried that specifically.
@michaelschultze3595
@michaelschultze3595 6 месяцев назад
I'm still not sure what's going wrong. At 3:30 no "Create Swap ... " is displayed in the layer panel. 🤔
@FigmaBites
@FigmaBites 6 месяцев назад
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
@michaelschultze3595 6 месяцев назад
@@FigmaBites My mistake was that I tried it directly at the instance 🙈
@FigmaBites
@FigmaBites 6 месяцев назад
@@michaelschultze3595 happens to the best of us :)
@MariaZenkevich
@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
@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
@kaylablock1425 5 месяцев назад
But doesn't that mean that you need to own the component?
@FigmaBites
@FigmaBites 5 месяцев назад
Yes. If you have a different team making components, show them this technique. Or build your own and share it with them.
@codewithuzair
@codewithuzair 9 месяцев назад
How to Change Color of PNG/JPEG Image in Figma
@mrmaijd
@mrmaijd 26 дней назад
Use color "overlay plugin" for it. it is a free plugin
@alexbramwell1870
@alexbramwell1870 Год назад
Awesome tut but this still feels super hacky 🥴
@FigmaBites
@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
@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
@FigmaBites Год назад
@@jakebarlow7431 Thanks for adding that :)
Далее
Treat your design files like a product | Figma Bites
4:36
Remove side stitch !! 😱😱
00:29
Просмотров 13 млн
🇮🇩Let’s go! Bali in Indonesia! 5GX Bali
00:44
Lesson 3: Libraries
15:01
Просмотров 15 тыс.
Figma tutorial: Interactive components
8:45
Просмотров 519 тыс.
How to Swap Icons in Figma
11:28
Просмотров 36 тыс.