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

Создание вертикального скролла в Figma — это базовый, но критически важный навык для проектирования прототипов с длинным содержимым: лендингов, мобильных экранов, списков и форм. Реализуется он через механизм «Smart Animate» и правильную настройку фреймов с прокруткой. Главное — задать контейнеру фиксированную высоту и активировать опцию вертикальной прокрутки.

Основы прокрутки в Figma: как работает скролл

Figma не является полноценным браузером, поэтому прокрутка реализована условно — через анимацию перехода между состояниями фрейма. Это означает, что вы не получаете настоящего «скролла», как в браузере, а имитируете его поведение при помощи механизма прототипирования. Ключевой элемент — фрейм с ограниченными размерами, внутри которого размещается более длинный контент.

Когда пользователь взаимодействует с этим фреймом (например, жестом свайпа или кликом), Figma плавно перемещает внутреннее содержимое, создавая эффект прокрутки. Это возможно благодаря функции Smart Animate, которая интерполирует изменения положения объектов между двумя кадрами. Для вертикального скролла важно, чтобы внешний фрейм имел фиксированную высоту, а внутренний контент — большую высоту.

Прокрутка может быть вертикальной, горизонтальной, диагональной или даже бесконечной — всё зависит от настроек фрейма и типа триггера. В макетах чаще всего используется именно вертикальная прокрутка, особенно при проектировании мобильных интерфейсов, где контент вытянут по высоте. Она помогает протестировать восприятие информации, расположение кнопок и поведение интерфейса при скроллинге.

Пошагово создаём вертикальный скролл

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

1. Создайте основной фрейм — используйте инструмент Frame (F) и задайте ему нужные размеры. Например, 375×812 px — стандартный размер для iPhone 14.
2. Добавьте контент внутри фрейма — разместите текст, карточки, изображения и другие элементы. Убедитесь, что общий размер контента по высоте превышает высоту фрейма. Например, если фрейм 812 px, контент должен быть хотя бы 1200–1500 px.
3. Активируйте прокрутку — в правой панели Inspector найдите раздел Prototype → Scroll. Выберите опцию Vertical. Появится синяя полоса — это зона прокрутки.
4. Проверьте обрезание контента — убедитесь, что свойство «Clips content» включено (иконка ножниц). Это гарантирует, что контент за пределами фрейма не будет виден.
5. Настройте начальную позицию — по умолчанию скролл начинается с верха. Если нужно, можно задать начальное смещение, переместив контент вниз вручную.

Проверка работоспособности

После настройки необходимо проверить, как работает скролл. Перейдите в режим Preview (Ctrl/Cmd + P) и попробуйте потянуть содержимое вниз. Если всё сделано правильно, вы увидите плавную анимацию прокрутки. Обратите внимание на поведение границ: контент не должен выходить за края фрейма.

Если скролл не работает, проверьте:

• Включен ли Scroll в Prototype;
• Достаточна ли высота контента;
• Не перекрывает ли другой слой зону прокрутки;
• Активировано ли обрезание (Clips content).

Настройка прототипа и Smart Animate

Прокрутка в Figma — это не просто поведение фрейма, а часть прототипа. Чтобы она работала плавно и реалистично, важно правильно настроить соединения и использовать Smart Animate.

Начните с того, что создайте два состояния: начальное (верхняя часть контента) и конечное (нижняя часть). Это не обязательно, если вы используете автоматическую прокрутку, но полезно для точного контроля. Соедините фрейм с самим собой через триггер «Drag» и действие «Navigate to». В настройках анимации выберите «Smart Animate» с длительностью 300–500 мс.

Smart Animate анализирует изменения положения объектов между кадрами и создаёт плавную анимацию. При этом он автоматически определяет, что нужно анимировать вертикальное смещение. Важно, чтобы идентификаторы (ID) объектов совпадали — Figma должна понимать, что это одни и те же элементы.

Триггеры для прокрутки

В Figma доступны разные способы запуска прокрутки:

• Drag — имитирует жест пальцем, наиболее реалистичный вариант;
• On Click / Tap — позволяет прокручивать по клику на стрелку или кнопку;
• While Hovering — подходит для веб-прототипов с автопрокруткой.

Для мобильных интерфейсов рекомендуется использовать Drag — он лучше всего передаёт ощущение естественного скроллинга. При этом можно комбинировать с On Click для дополнительных элементов управления, например, кнопки «Наверх».

Распространённые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при настройке скролла. Ниже — самые частые проблемы и способы их устранения.

Скролл не работает вообще

Причина чаще всего в одном из следующих:

• Фрейм не имеет фиксированной высоты — измените размеры на Fixed;
• Контент не превышает высоту фрейма — увеличьте контент или уменьшите фрейм;
• Отключено обрезание — включите Clips content;
• Прокрутка задана не на том слое — убедитесь, что Scroll настроен на контейнере, а не на вложенных объектах.

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

Это происходит, когда:

• Используются разные фреймы вместо одного — всегда используйте один фрейм с изменением позиции;
• Объекты переименованы или удалены — Figma теряет связь между кадрами;
• Включена анимация Opacity или Visibility — это мешает Smart Animate.

Интерактивный пример использования

Представьте, что вы проектируете мобильное приложение для новостей. На главном экране — список статей, занимающий более 2000 px по высоте. Вам нужно показать заказчику, как пользователь будет прокручивать ленту.

Создайте фрейм 375×812 px, вложите в него Auto Layout-контейнер с карточками статей. Высота контейнера — 2200 px. Активируйте Vertical Scroll, включите Clips content. В Prototype задайте триггер Drag с действием Navigate to этого же фрейма, анимация — Smart Animate, 400 мс.

Теперь при тестировании в Preview вы сможете провести пальцем вниз и увидеть, как лента плавно прокручивается. Можно добавить эффекты: размытие шапки, изменение прозрачности кнопки «Наверх» при прокрутке — всё это усилит реализм прототипа.

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

Он также отмечает, что многие команды игнорируют скролл, считая его «лишней анимацией», но на практике он помогает выявить:

• Проблемы с видимостью CTA-кнопок;
• Перегруженность контентом;
• Неудобные переходы между секциями.

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

Заключение

Вертикальный скролл в Figma — это не просто анимация, а мощный инструмент для создания реалистичных прототипов. Он позволяет протестировать поведение интерфейса, оценить удобство навигации и заранее выявить проблемы с юзабилити. Главное — соблюдать базовые правила: фиксированная высота фрейма, превышение контента, включённое обрезание и правильное использование Smart Animate.

• Всегда используйте фрейм с фиксированной высотой и включённым Vertical Scroll.
• Активируйте Clips content, чтобы скрыть лишнее.
• Применяйте Smart Animate для плавной анимации.
• Тестируйте в режиме Preview, а не в редакторе.
• Используйте Drag как основной триггер для мобильных прототипов.