Дизайн-системы создаются для порядка и масштабируемости. Но со временем они начинают работать против самих дизайнеров

Появляется всё больше вариантов компонентов Карточки размножаются десятками Модалки становятся огромными наборами свойств

В итоге дизайнеры делают то, чего система должна была избежать — detaching компонентов

Новая функция Slots в Figma решает именно эту проблему

Slots позволяют добавлять и менять содержимое компонентов без потери связи с основным компонентом

Что такое Slots

Slot — это область внутри компонента, куда можно вставлять любой контент

Текст иконки изображения другие компоненты или целые блоки интерфейса

При этом структура компонента остаётся неизменной

Хорошая аналогия — рамка для фотографии

Рамка задаёт форму и стиль А фотография внутри может быть любой

Slots работают примерно так же

Как работают Slots

Slots создаются внутри основного компонента

Процесс выглядит примерно так: — Создаём компонент — Добавляем внутри него frame — Превращаем этот frame в Slot

Теперь любой instance этого компонента может принимать новый контент внутри slot-области

При этом: — компонент остаётся связанным с библиотекой — обновления продолжают приходить — layout остаётся контролируемым.

Где Slots раскрываются лучше всего

Slots особенно полезны для компонентов, где структура остаётся одинаковой, а контент часто меняется

Например:

Карточки — разные изображения — разный текст — разные кнопки

Модальные окна — разные формы — разные списки — разные сообщения

Списки — разное количество элементов

Такие компоненты обычно превращаются в variant-монстров

Slots позволяют сохранить один компонент и менять только содержимое

Почему Slots могут изменить дизайн-системы

Главная проблема зрелых дизайн-систем — избыточная сложность

Появляются: — десятки variants — скрытые слои — placeholder-фреймы — swap-компоненты

Slots заменяют большинство этих паттернов нативным инструментом

Это даёт несколько преимуществ:

1️⃣ Меньше вариантов Компонент может принимать разные типы контента.

2️⃣ Меньше detach Дизайнеры не ломают связь с системой.

3️⃣ Чище библиотеки Меньше дублирования компонентов.

Маленький совет при внедрении

Не стоит добавлять Slots во все компоненты сразу

Лучше начать с тех, которые: — используются чаще всего — имеют много вариантов — часто кастомизируются

Например: — Card — Modal — Panel — Container

Это даст максимальный эффект с минимальными изменениями

Итог

Slots — это небольшой апдейт, который может сильно изменить работу с дизайн-системами

Они дают баланс между:

контролем системы и гибкостью для дизайнеров

Меньше вариантов Меньше хака с placeholder Больше гибкости внутри компонентов

И, возможно, наконец-то меньше detaching!

Немного обо мне 💡

Я UX/UI-дизайнер с продуктовым подходом. Фокусируюсь на понятной UX-логике и том, как дизайн влияет на продуктовые метрики: конверсию, ошибки пользователей и удержание

Сейчас открыта к новым продуктовым задачам и интересным командам