Комбинирование Auto Layout, Variants и Component Properties - Figma: От Атомарного Дизайна до Дизайн-Систем - Qpel.AI
QPEL.ai

Комбинирование Auto Layout, Variants и Component Properties

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

Вы уже освоили Auto Layout для адаптивных макетов, Variants для гибкости компонентов и Component Properties для их кастомизации. Теперь объединим эти инструменты, чтобы создавать динамичные и универсальные компоненты — основу вашей дизайн-системы.

Синергия Auto Layout, Variants и Component Properties

Когда эти три функции работают вместе, компоненты не просто меняют состояние. Они динамически подстраиваются под контент, размеры и настройки пользователя, оставаясь при этом легко управляемыми.

Представьте кнопку:

  • Auto Layout автоматически регулирует отступы под текст и иконки.
  • Variants позволяют задать состояния (активная, неактивная, наведенная), размеры (маленькая, средняя, большая) и типы (первичная, вторичная).
  • Component Properties делают текст редактируемым, а иконку — опциональной (булево свойство) или заменяемой (Instance Swap Property).

В итоге вы получаете не просто кнопку, а систему кнопок, которая покрывает все сценарии использования. При этом количество мастер-компонентов минимально.

Примеры комбинирования

Посмотрим, как это работает на практике.

1. Карточка товара с динамическим контентом

Создадим карточку товара.

  1. Auto Layout:
    • Основной фрейм карточки вертикально располагает элементы: изображение, название, цена, кнопка.
    • Название товара может иметь вложенный Auto Layout для автоматического переноса или обрезки текста.
    • Кнопка «Добавить в корзину» также использует Auto Layout для выравнивания текста и иконки.
  2. Variants:
    • Создайте варианты состояний: Состояние/По умолчанию, Состояние/В избранном, Состояние/Нет в наличии.
    • Добавьте варианты размеров: Размер/Маленький, Размер/Большой.
  3. Component Properties:
    • Text Property для заголовка, описания, цены.
    • Boolean Property для показа/скрытия иконки «В избранном» или лейбла «Нет в наличии».
    • Instance Swap Property для замены изображения товара или иконки «Добавить в корзину».

В результате у вас один мастер-компонент карточки. Настраивайте его под любые нужды, меняя свойства на правой панели Figma, вместо того чтобы переключаться между десятками вариантов.

2. Навигационное меню с адаптивными элементами

Создадим компонент навигационного меню.

  1. Auto Layout:
    • Горизонтальный Auto Layout для основного меню автоматически распределяет пункты.
    • Вложенные Auto Layout для каждого пункта меню выравнивают текст и иконку.
    • Используйте Wrap для пунктов меню, чтобы они переносились на новую строку на маленьких экранах.
  2. Variants:
    • Состояние/Активный, Состояние/Неактивный для пунктов меню.
    • Тип/С иконкой, Тип/Без иконки.
  3. Component Properties:
    • Text Property для текста каждого пункта меню.
    • Boolean Property для показа/скрытия иконки рядом с текстом.
    • Instance Swap Property для замены иконки.
    • Content Property (слот) для вставки выпадающего списка или подменю в определённый пункт навигации.

Это позволяет создать гибкое меню, которое адаптируется к разному количеству пунктов, их содержимому и размерам экрана, сохраняя при этом логику состояний и интерактивности.

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

Создайте компонент «Alert» (уведомление), используя все три инструмента:

  1. Auto Layout: Обеспечьте автоматическое изменение размеров уведомления в зависимости от длины текста и наличия кнопки закрытия.
  2. Variants: Создайте варианты для разных типов уведомлений: Тип/Успех, Тип/Ошибка, Тип/Предупреждение, Тип/Информация.
  3. Component Properties:
    • Text Property для заголовка уведомления.
    • Text Property для основного текста сообщения.
    • Boolean Property для показа/скрытия кнопки закрытия (крестик).
    • Instance Swap Property для замены иконки уведомления (например, галочка для успеха, крестик для ошибки).

Попробуйте создать несколько экземпляров вашего компонента «Alert» и настроить их с помощью свойств на панели справа. Увидите, насколько проще стало управлять разнообразием уведомлений!

Объединяя Auto Layout, Variants и Component Properties, вы открываете новый уровень гибкости и эффективности в Figma. Это основа для создания мощных и масштабируемых дизайн-систем. Но что, если нам нужно сделать наши элементы по-настоящему динамичными, чтобы они реагировали на действия пользователя? В следующем разделе мы углубимся в создание интерактивных компонентов, которые оживят ваши прототипы.