Как сделать скроллинг в фигме

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

Основы скроллинга в Figma

Figma поддерживает два типа прокрутки: вертикальную и горизонтальную. Реализуются они через специальные настройки фреймов. Для работы со скроллингом используется комбинация Auto Layout и свойства Scroll Behavior. Это позволяет создавать прототипы, которые ведут себя как настоящие приложения — пользователь может «прокручивать» контент внутри ограниченной области.
Ключевое понятие — это фрейм-контейнер. Он должен иметь фиксированную высоту или ширину, в зависимости от направления прокрутки. Внутри него располагается дочерний фрейм с Auto Layout, который по высоте или ширине превышает родительский. Именно этот переполненный контент становится доступным для прокрутки.
Scroll Behavior активируется в правой панели инспектора свойств. После включения опции «Scrolling» можно выбрать тип: Vertical Scrolling или Horizontal Scrolling. При этом важно понимать, что скроллинг работает только в режиме прототипа, а не в режиме дизайна.

Какие компоненты участвуют в скроллинге

• Родительский фрейм — ограничивает видимую область. Его размеры задают «окно» прокрутки.
• Дочерний фрейм с Auto Layout — содержит весь контент, который будет прокручиваться. Должен быть больше родительского по соответствующей оси.
• Scroll Behavior — параметр, включаемый в свойствах родительского фрейма.
• Прототипный режим — единственный способ протестировать работу скролла.

Шаг за шагом: настройка вертикального скролла

Создание вертикального скроллинга — один из самых частых сценариев. Он применяется при проектировании лендингов, новостных лент, списков задач или профилей пользователей. Ниже приведён пошаговый алгоритм.

1. Создайте фрейм нужного размера (например, 375×812 px для мобильного экрана).
2. Внутри этого фрейма создайте новый фрейм и включите для него Auto Layout. Направление — Vertical.
3. Добавьте контент: заголовки, изображения, карточки. Убедитесь, что общий размер по высоте превышает высоту внешнего фрейма.
4. Выделите внешний (родительский) фрейм и в правой панели найдите раздел «Constraints» и «Scroll Behavior».
5. Активируйте «Vertical Scrolling». Появится полоса прокрутки в режиме прототипа.

Настройка границ и отступов

Правильные отступы между элементами внутри Auto Layout критически важны. Используйте параметры «Gap» для равномерного распределения. Не используйте фиксированные отступы в виде пустых прямоугольников — это усложняет редактирование.
Также обратите внимание на Constraints внешнего фрейма. Лучше установить «Top-left» или «Top», чтобы при изменении макета он не смещался. Это особенно важно при работе с компонентами и вариантами.

Тестирование скролла

• Перейдите в режим прототипа (кнопка Present).
• Используйте мышь или трекпад для прокрутки. На тач-устройствах работает жест свайпа.
• Убедитесь, что контент прокручивается плавно и не обрезается.
• Проверьте, как выглядит скролл на разных устройствах, если используете constraints.

Горизонтальный скроллинг и карусели

Горизонтальный скроллинг часто используется для каруселей продуктов, рекомендаций, галерей изображений или табов. Принцип настройки аналогичен вертикальному, но с одной особенностью — направление Auto Layout должно быть Horizontal.

1. Создайте фрейм с фиксированной шириной (например, 300 px).
2. Внутри добавьте фрейм с Auto Layout, выберите направление «Horizontal».
3. Разместите несколько элементов (карточек, аватаров, слайдов). Общая ширина должна превышать 300 px.
4. Выделите внешний фрейм и включите «Horizontal Scrolling».
5. Запустите прототип и проверьте свайп влево-вправо.

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

• Добавьте стрелки навигации или индикаторы положения (точки), чтобы пользователь понимал, где находится.
• Оставьте часть следующего элемента видимой — это сигнал, что контент продолжается.
• Не делайте карусель слишком широкой — ограничьте количество видимых элементов до 3–4.

Ошибки и как их избежать

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

Ошибка 1: Скроллинг не работает

Частая причина — отсутствие переполнения. Если внутренний фрейм меньше или равен внешнему, Figma не активирует прокрутку. Убедитесь, что суммарная высота (или ширина) контента превышает размеры контейнера.
Ещё одна возможная причина — неправильно выбранный тип скролла. Например, включён горизонтальный, а контент переполняет по вертикали.

Ошибка 2: Контент «подпрыгивает» или смещается

Это происходит, когда у внутреннего фрейма стоят неподходящие constraints. Например, «Center» вместо «Top» или «Left». Всегда выравнивайте внутренний фрейм по начальному краю.
Также проверьте, не включён ли автоматический ресайз у родительского фрейма. Он может мешать корректной работе прокрутки.

Ошибка 3: Скроллинг работает, но не показывает всё содержимое

Убедитесь, что все элементы находятся внутри фрейма с Auto Layout. Иногда дизайнеры случайно оставляют элементы вне фрейма, и они не участвуют в прокрутке.
Также проверьте, нет ли обрезанных слоёв. Figma может «обрезать» контент, если он выходит за пределы холста, хотя на функциональность это не влияет.

Интерактивные примеры и применение на проекте

Скроллинг в Figma — не просто техническая возможность, а инструмент для создания реалистичных прототипов. Вот несколько практических кейсов.

Кейс 1: Мобильное приложение с лентой новостей

• Создайте фрейм 375×812 px.
• Внутри — вертикальный Auto Layout с карточками новостей.
• Высота каждой карточки — 120 px, общее количество — 10. Итоговая высота: 1200 px.
• Включите Vertical Scrolling на внешнем фрейме.
• Добавьте pull-to-refresh через переход с действиями, если нужно.

Кейс 2: Горизонтальная карусель на главном экране

• Фрейм шириной 320 px, высотой 200 px.
• Внутри — горизонтальный Auto Layout с 6 карточками по 150 px шириной.
• Общая ширина: 900 px + отступы. Контент явно переполняет.
• Включите Horizontal Scrolling.
• Добавьте стрелки навигации с помощью hotspot-областей.

Кейс 3: Десктопный сайт с параллакс-эффектом

Хотя Figma не поддерживает параллакс напрямую, можно имитировать эффект с помощью нескольких слоёв с разной скоростью прокрутки. Для этого:

• Создайте несколько фреймов с Vertical Scrolling.
• Разместите их друг над другом.
• В прототипе настройте разные скорости переходов (через easing).
• Используйте плагины, например, «Parallax Scroll», для более точного контроля.

Экспертное мнение

По её словам, дизайнеры часто сосредотачиваются на технической стороне, забывая о поведенческом аспекте. Например, первые 300 пикселей должны содержать самую важную информацию — это «золотая зона» внимания.
Также она советует использовать микроанимации при прокрутке: появление элементов с задержкой, плавное затухание фона. Это можно реализовать через плагины или вручную, настраивая появление слоёв в прототипе.

Вопросы и ответы

Заключение

Скроллинг в Figma — мощный инструмент для создания живых, интерактивных прототипов. Он позволяет точнее передать поведение интерфейса, улучшить презентацию и снизить количество вопросов от разработчиков. Главное — понимать принцип: фрейм-контейнер с фиксированными размерами и внутренний Auto Layout, превышающий его.
Настройка требует внимания к деталям: правильные constraints, достаточное переполнение и тестирование в прототипе. Горизонтальный и вертикальный скролл решают разные задачи — от лент контента до каруселей и табов. Используйте их осознанно, чтобы не перегружать интерфейс.

• Скроллинг в Figma работает только в прототипе, а не в дизайне.
• Используйте Auto Layout и Scroll Behavior для настройки.
• Горизонтальный и вертикальный скролл решают разные задачи.
• Тестируйте поведение на разных устройствах и с разными жестами.
• Избегайте вложенных скролов без необходимости — они могут запутать пользователя.