Создание гибких компонентов с помощью слотов (Content Property) - Figma: От Атомарного Дизайна до Дизайн-Систем - Qpel.AI
QPEL.ai

Создание гибких компонентов с помощью слотов (Content Property)

Курс: Figma: От Атомарного Дизайна до Дизайн-Систем12+

Вы уже освоили текстовые, булевы свойства и замену экземпляров, чтобы сделать компоненты гибче и сократить число вариантов. Но что, если нужно вставить в компонент что-то совершенно другое? Например, иконку, изображение или даже целый блок с другим компонентом? Для таких случаев в Figma есть мощное свойство Content Property, которое часто называют «слотами».

Что такое Content Property (слоты) и зачем они нужны?

Content Property (свойство содержимого) позволяет создать в мастер-компоненте специальную область — слот. В него можно вставить любой контент или компонент, когда вы используете экземпляр. Это делает компоненты невероятно гибкими и универсальными. Вы создаёте сложные структуры, не плодя кучу вариантов.

Представьте компонент «Карточка». Внутри неё может быть:

  • Изображение
  • Видео
  • Другой компонент (кнопка, тег)
  • Произвольный текст или группа элементов

Вместо того чтобы делать варианты для каждого сценария (Card/Image, Card/Video, Card/Button), вы создаёте один слот. Пользователь экземпляра сам решит, что туда поместить.

Важно: Content Property работает только с Auto Layout. Элемент, который вы хотите превратить в слот, должен быть внутри фрейма с Auto Layout.

Как создать компонент со слотом

Давайте сделаем простой компонент «Медиа-объект», который может содержать изображение или видео, используя Content Property.

  1. Создайте базовую структуру:

    • Нарисуйте прямоугольник или фрейм, например, 300x200px.
    • Превратите его во фрейм, если это не так (правой кнопкой мыши > Frame Selection или Shift + Command/Ctrl + G).
    • Примените Auto Layout (Shift + A).
    • Назовите фрейм Media Object.

  2. Добавьте элемент-заполнитель для слота:

    • Внутри Media Object создайте ещё один фрейм или прямоугольник. Это будет ваш «слот».
    • Назовите его Content Slot.
    • Залейте его нейтральным цветом или градиентом, чтобы было видно, что это заполнитель.
    • Добавьте к Content Slot Auto Layout.
    • Установите Resizing на Fill container по горизонтали и вертикали. Так он займёт всё доступное пространство внутри родительского фрейма Media Object.

  3. Превратите Content Slot в Content Property:

    • Выберите фрейм Content Slot.
    • В правой боковой панели, в разделе Layer (где имя слоя), наведите курсор на имя Content Slot.
    • Появится иконка «плюс» (+). Нажмите её.
    • В списке выберите Content.
    • Figma предложит создать новое свойство. Назовите его, например, contentSlot.

  4. Создайте мастер-компонент:

    • Выберите фрейм Media Object.
    • Превратите его в компонент (Command/Ctrl + Alt + K).

Ваш мастер-компонент Media Object готов!

Использование компонентов со слотами

  1. Создайте экземпляр:

    • Перетащите экземпляр компонента Media Object из панели Assets на холст. Вы увидите ваш «слот» внутри.

  2. Вставьте контент в слот:

    • Выберите экземпляр Media Object.
    • В правой боковой панели, в разделе Content (или там, где свойства компонента), вы увидите свойство contentSlot.
    • Рядом будет иконка + или Swap Instance (если уже что-то вставили). Нажмите её.
    • Вы можете:
      • Перетащить любой элемент (изображение, иконку, другой компонент, фрейм) прямо на этот слот в экземпляре.
      • Выбрать элемент на холсте и, удерживая Option/Alt, перетащить его на слот в экземпляре.
      • Кликнуть на иконку + или Swap Instance и выбрать элемент из списка или вставить из буфера обмена.

    Совет: Чтобы вставить изображение, просто скопируйте его (Command/Ctrl + C), выберите экземпляр компонента и вставьте (Command/Ctrl + V) прямо в слот. Figma автоматически заменит заполнитель.

Преимущества Content Property

  • Максимальная гибкость: Компоненты адаптируются к любому содержимому: текст, изображения, иконки, другие компоненты.
  • Меньше вариантов: Вместо кучи вариантов для каждого типа содержимого — один мастер-компонент со слотом.
  • Простота для дизайнеров: Пользователям дизайн-системы не нужно гадать, какой вариант использовать. Они просто перетаскивают контент в слот.
  • Чистая дизайн-система: Меньше компонентов в библиотеке, легче поддерживать.

Практическое задание

Создайте компонент «Карточка пользователя» (User Card). Он должен содержать:

  1. Аватар пользователя (круглая область).
  2. Имя пользователя (текст).
  3. Дополнительную информацию (текст).
  4. Слот для произвольного элемента: кнопки, иконки или тега. Назовите это свойство actionSlot.

Попробуйте создать несколько экземпляров User Card и вставить в actionSlot разные элементы:

  • Кнопку «Добавить в друзья».
  • Иконку «Сообщение».
  • Группу тегов.

Это задание поможет вам закрепить понимание слотов и увидеть их практическую ценность. Удачи!

В следующем разделе мы перейдём к совершенно новой и мощной функции Figma — Переменным (Variables). Она позволит управлять дизайном на новом уровне, создавая динамические стили и адаптивные макеты.