Цель курса
Научиться точно и быстро выравнивать элементы в Figma, использовать встроенные инструменты, смарт-гайды, а также плагины, которые ускоряют работу с выравниванием и сеткой.
Этап 1. Основы выравнивания в Figma
Цель: понять базовые механизмы позиционирования и выравнивания.
-
📘 Панель выравнивания (Align Panel)
🔗 Документация: https://help.figma.com/hc/en-us/articles/360040451373-
Горизонтальное и вертикальное выравнивание.
-
Распределение объектов по равным промежуткам.
-
Выравнивание относительно фрейма или выделения.
-
-
📏 Smart Guides (умные направляющие)
-
Как Figma автоматически показывает выравнивание при перетаскивании.
-
Как включать/выключать: View → Smart guides.
-
Практика: выровняй три кнопки вручную без панели.
-
-
🧱 Snap to Geometry (привязка к сетке)
-
Привязка к сетке и соседним элементам.
-
Опция View → Snap to Geometry.
-
Проверка на практике: двигай элементы и наблюдай подсказки.
-
Этап 2. Работа с фреймами и сеткой
Цель: научиться выравнивать элементы в рамках макета.
-
🧰 Frames vs Groups — разница при выравнивании
🔗 Документация: https://help.figma.com/hc/en-us/articles/360039958594-
Почему фрейм — основной контейнер.
-
Как работают auto layout, padding, spacing.
-
-
📐 Layout Grids (сетки)
🔗 Документация: https://help.figma.com/hc/en-us/articles/360040450313-
Добавление и настройка сетки.
-
Колонки, строки, маргины, гаттеры.
-
Применение сетки для pixel-perfect выравнивания.
-
-
⚙️ Auto Layout
🔗 Документация: https://help.figma.com/hc/en-us/articles/5731485798295-
Автоматическое выравнивание и распределение элементов.
-
Отступы между элементами (Spacing).
-
Как делать кнопки и карточки, которые растягиваются.
-
Этап 3. Полезные плагины для выравнивания
Цель: ускорить работу с выравниванием и автоматизацией.
-
🧭 «Autoflow»
🔗 https://www.figma.com/community/plugin/733902567457592893/Autoflow-
Создаёт автоматические стрелки между элементами.
-
Упрощает выравнивание потоков (UX flow diagrams).
-
-
📏 «Guide Mate»
🔗 https://www.figma.com/community/plugin/747985164116705323/GuideMate-
Автоматически добавляет направляющие.
-
Выравнивает объекты по центрам и краям.
-
-
🧮 «Tidy Up» (встроенный инструмент)
-
Встроенная функция (не плагин): Shift + Tidy Up
-
Распределяет элементы с равными промежутками.
-
Очень полезно при работе с карточками или иконками.
-
-
⚡ «Pixel Perfect»
🔗 https://www.figma.com/community/plugin/747622640154665858/Pixel-Perfect-
Проверяет и исправляет несовпадения пикселей.
-
Идеально для финальной подготовки макета к верстке.
-
-
📐 «Layout Grid Generator»
🔗 https://www.figma.com/community/plugin/829778089963593426/Layout-Grid-Generator-
Создаёт адаптивные сетки по вашим параметрам.
-
Позволяет быстро генерировать 12-колоночные системы.
-
Этап 4. Практика и закрепление
Цель: отработать навык выравнивания на реальных задачах.
-
Создай фрейм для лендинга: шапка, блок с карточками, подвал.
-
Используй Layout Grid для колонок.
-
Выровняй элементы вручную и с помощью Auto Layout.
-
Проверь аккуратность с Pixel Perfect.
-
Используй Guide Mate для направляющих.
Этап 5. Итоговый проект
Задача: сверстать макет страницы в Figma с идеальным выравниванием.
Что включить:
-
Header (лого, меню, CTA).
-
Hero block (заголовок, текст, кнопка).
-
Cards section (3–4 карточки в сетке).
-
Footer.
Цель:
Всё должно быть выровнено и визуально сбалансировано: одинаковые отступы, чёткие сетки, аккуратные расстояния.