Использование Auto Layout для динамических списков и таблиц

Auto Layout — мощный инструмент Figma, который упрощает работу с динамическими списками и таблицами. С ним вы создадите гибкие структуры, которые сами подстроятся под изменения контента, добавление или удаление элементов.

Динамические списки: создаём и управляем

Динамический список — это набор однотипных элементов, расположенных вертикально или горизонтально. Auto Layout поможет легко управлять их расположением, отступами и поведением при изменении содержимого.

Шаг 1: Создайте элемент списка

Начните с одного элемента списка. Это может быть карточка товара, строка таблицы, пункт меню. Убедитесь, что все внутренние элементы этого компонента тоже используют Auto Layout — так вы обеспечите его гибкость.

Например, для элемента списка контактов:

1. Создайте текстовые слои для имени и телефона.
2. Добавьте круг для аватара.
3. Выделите все элементы и примените Auto Layout (Shift + A). Настройте отступы и выравнивание внутри.
4. Превратите элемент в компонент. Назовите его, например, List Item/Contact.

Шаг 2: Соберите список из элементов

Теперь, когда у вас есть компонент элемента списка, создайте из него динамический список:

1. Сделайте несколько экземпляров компонента List Item/Contact.
2. Выделите их и снова примените Auto Layout (Shift + A).
3. Настройте направление (вертикальное или горизонтальное) и отступы между элементами.
4. Установите для списка свойство Fill container по ширине. Он будет автоматически растягиваться или сжиматься в зависимости от родительского фрейма.
5. Для каждого элемента списка внутри родительского Auto Layout тоже установите Fill container по ширине, чтобы они адаптировались.

Совет: Используйте переменные для отступов. Это обеспечит единообразие и упростит изменения spacing в будущем. Особенно полезно для больших дизайн-систем.

Теперь, если вы добавите или удалите элемент из этого списка, или измените его содержимое, Auto Layout автоматически перестроит макет, сохраняя заданные отступы и выравнивание.

Гибкие таблицы с Auto Layout

Таблицы — более сложные структуры, состоящие из строк и столбцов. Auto Layout эффективно управляет ими, особенно в сочетании с вложенными Auto Layout.

Шаг 1: Создайте ячейку таблицы

Начните с базовой ячейки таблицы. Это может быть просто текстовый слой с Auto Layout, чтобы он мог расширяться по содержимому.

Шаг 2: Создайте строку таблицы

1. Сделайте несколько экземпляров ячейки таблицы.
2. Выделите их и примените Auto Layout, чтобы создать горизонтальную строку.
3. Установите Space between или фиксированные отступы между ячейками.
4. Превратите эту строку в компонент, например, Table Row/Default.

Шаг 3: Создайте заголовок таблицы

Создайте отдельный компонент для заголовка таблицы. Используйте тот же принцип, что и для строки, но с соответствующими стилями текста. Назовите его Table Row/Header.

Шаг 4: Соберите таблицу

1. Создайте экземпляр компонента Table Row/Header.
2. Создайте несколько экземпляров компонента Table Row/Default.
3. Выделите все эти строки (заголовок и данные) и примените Auto Layout, чтобы создать вертикальную структуру таблицы.
4. Настройте отступы между строками.

Важно: Чтобы столбцы в таблице выравнивались, убедитесь, что все ячейки в одной колонке имеют одинаковую ширину или используют Fill container в родительском Auto Layout. Для сложных таблиц с динамическим содержимым часто используют вложенные Auto Layout, где каждая колонка — отдельный Auto Layout фрейм, содержащий свои ячейки.

Пример: Динамическая таблица с Auto Layout

Представьте, что вам нужна таблица с тремя колонками: "Имя", "Email", "Телефон".

1. Ячейка: Создайте текстовый слой, примените Auto Layout (даже если он один), чтобы он вёл себя как блок.
2. Строка:
   • Создайте 3 экземпляра ячейки.
   • Выделите их, примените Auto Layout (горизонтальный).
   • Настройте Space between или Packed с фиксированными отступами.
   • Превратите в компонент Table Row/Default.
3. Заголовок: Аналогично создайте компонент Table Row/Header с жирным текстом.
4. Таблица:
   • Разместите Table Row/Header и несколько Table Row/Default друг под другом.
   • Выделите их и примените Auto Layout (вертикальный).
   • Теперь, если вы измените ширину одной из ячеек в мастер-компоненте Table Row/Default, это изменение отразится во всех строках, и таблица автоматически перестроится.

Использование Auto Layout для списков и таблиц значительно ускоряет работу и делает ваши макеты более устойчивыми к изменениям. Это основа для создания гибких и масштабируемых дизайн-систем.

В следующем разделе мы углубимся в то, как комбинировать Auto Layout с Variants и Component Properties, чтобы создавать по-настоящему динамические и универсальные компоненты.