Учебное пособие по Figma: Автоматическая верстка | Освоите автоматическую верстку за 15 минут

YOUTUBE · 28.11.2025 04:08

Ключевые темы и таймкоды

Автоматическая верстка в Figma

0:00

Видео обсуждает одну из лучших функций Figma - автоматическую верстку, которая позволяет создавать адаптивные элементы.
В последнем обновлении Figma эта функция стала мощнее и интереснее.

Настройка автоматической верстки

1:23

В автоматической верстке есть много свойств, таких как направление, интервал, горизонтальное и вертикальное заполнение, выравнивание и расширенные настройки макета.
После добавления автоматической верстки, нужно определить направление движения элементов.
Можно настроить расстояние между элементами, отступы по горизонтали и вертикали, а также выравнивание.

Расширенные настройки автоматической верстки

4:23

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

Создание адаптивной открытки

9:37

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

Создание открытки

10:28

Создание двух дочерних элементов: фотография и кадр 13.
Установка интервала между элементами равным 26 и изменение размера кадра на "hog", чтобы он занимал всю доступную ширину.

Размещение элементов

11:39

Изменение интервала между кнопкой "купить сейчас" и ценой на "между".
Изменение размера кадра на "поле-контейнер" для автоматического расположения элементов.

Абсолютное положение

13:19

Использование абсолютного положения для размещения значка за углом.
Установка отступов сверху и справа на 16 пикселей.

Адаптивность

14:40

Изменение размера фотографии с фиксированной ширины на размер контейнера для полей.
Установка ширины карточки на 290 пикселей и перенос значка корзины.
Изменение выравнивания кадра по центру.