В фигму завозят слоты! Теперь дизайнеры могут кастомизировать компоненты — меню, кнопки, иконки — без детача, и контент меняется, не нарушая структуру. 🔗 Статья на английском Полный текст статьи на русском Как прокачать дизайн-систему с помощью слотов Слоты дают возможность кастомизировать компоненты, не ломая систему. Команда Figma делится пятью проверенными советами от ранних пользователей — чтобы дать дизайнерам свободу, не теряя контроль. Дизайн-системы обещают консистентность в масштабе. Но по мере роста ограждения, защищающие бренд, начинают сковывать выражение — и команды ищут обходные пути. Библиотеки раздуваются. Вариантов становится всё больше. Инстансы отвязываются. Система, созданная для единообразия, превращается в систему, которую все обходят стороной. Именно здесь на помощь приходят слоты. Они делают дизайн-системы гибче и проще в масштабировании. Дизайнеры могут кастомизировать компоненты — меню, кнопки, иконки — без детача, и контент меняется, не нарушая структуру. Это отражает принцип построения компонентов в коде: разработчики динамически инжектируют контент внутрь стабильной структуры, не дублируя её. Перенос этой модели в дизайн делает компоненты ближе к тому, как они работают в продакшне — упрощает передачу в разработку и делает системы более понятными для автоматизации и AI. Что это даёт разным ролям: - Менеджерам дизайн-систем: меньше вариантов, меньше поддержки, лучший синк с продакшном - Дизайнерам: больше творческой свободы внутри системы, а не в обход неё - Разработчикам: предсказуемые структуры, которые напрямую маппятся на код Слоты были анонсированы на Schema 2025 и сейчас доступны в открытой бете. 1. Начни с самых используемых компонентов > Начни с компонентов, которые чаще всего детачат — там слоты дадут мгновенный эффект. Ранние пользователи фиксировали наибольший выигрыш там, где команды уже работали в обход системы. Чаще всего это базовые компоненты: диалоги, меню, модалки, карточки, панели. Два паттерна встречались снова и снова. Первый — слоты для компонентов с повторяющимися элементами: меню и списки часто содержат скрытые слои на все возможные варианты количества элементов. Нужен одиннадцатый пункт? Детач. Со слотами авторы включают только то, что нужно. Второй — управление компонентами с большим числом конфигураций: модалки и карточки — классические магниты для вариантов. Слоты позволяют сохранять структуру, заменяя или вставляя нужный контент. Приоритизируй компоненты, которые: - Часто встречаются на экранах - Дублируются по всей системе - Накопили избыточное количество вариантов - Должны поддерживать разные типы контента 2. Используй предзаполненные слоты для подсказок > Дефолтный контент добавляет контекст. Пустой слот сигнализирует о действии. Используй оба осознанно. Когда создаёшь слот, реши: нужен ли ему дефолтный контент? Это даёт дизайнерам ориентир и зачастую не требует правок вообще. Например, если иконка всегда в правом верхнем углу карточки — зачем заставлять людей вставлять её каждый раз? С другой стороны, пустой слот явно сигнализирует: нужно что-то добавить. Это отражает привычные паттерны в системах, где команды симулировали подобное поведение через instance swap. Как создать слот: - Начни с родительского компонента: слоты существуют только внутри главного компонента - Вставь фрейм: слоты создаются из фреймов, не из прямоугольников - Конвертируй фрейм в слот: правый клик → конвертировать, или шорткат Shift + Cmd + S *** 3. Сделай понятным, что идёт в каждый слот > Preferred instances добавляют направление открытым слотам — используй их по умолчанию. Без направления слот может казаться неоднозначным — это тормозит команды и ведёт к несогласованному использованию. Preferred instances — это не ограничения, а ориентиры. Они направляют использование, сохраняя гибкость. При создании компонента можно рекомендовать конкретные инстансы для слота через панель свойств — они появятся по умолчанию, когда дизайнер нажм