Прокрутка в прототипе Figma: Overflow, fixed и sticky
Прототип без прокрутки выглядит как статичный макет: экран не помещается, а показать остальное нечем.
Настройка занимает три шага, но упирается в одно условие.
Три шага из документации
Документация формулирует прямо: чтобы использовать прокрутку, нужно
- подготовить фрейм — контент должен выходить за его размеры;
- задать фрейму поведение прокрутки: вертикально, горизонтально, в обе стороны или без прокрутки;
- задать поведение объектов внутри — они могут прокручиваться вместе с родителем, стоять на месте или «прилипать» к верху.
Практика: второй шаг без первого не даёт результата. Если содержимое помещается во фрейм, прокручивать нечего — прокрутка просто не включится.
Только фреймы
Документация: поведение прокрутки применяется только к фреймам.
Это касается и фреймов на холсте, и вложенных фреймов.
Практика: группа вместо фрейма — самая частая причина, почему настройка недоступна. Группа растягивается под содержимое, поэтому выхода за границы не возникает.
Где настраивается
- Выделите фрейм.
- Откройте вкладку Prototype в правой панели.
- Найдите раздел Scroll behavior.
- В выпадающем списке Overflow выберите вариант.
Варианты: no scrolling, horizontal, vertical, both directions.
Что выбрать
Vertical. Прокрутка вверх и вниз. Подходит для длинных страниц и лент.
Horizontal. Прокрутка влево и вправо с сохранением вертикальной позиции. Классика для карусели, галереи, списка карточек.
Both directions. Свободное перемещение в любую сторону — карты, увеличенные изображения.
Практика: чаще всего нужен вертикальный вариант, а горизонтальный добавляется вложенному фрейму внутри него.
Поведение объектов
Документация: у объектов внутри прокручиваемого фрейма есть три варианта — прокручиваться с родителем, стоять на месте или прилипать к верху.
Практика: шапка обычно делается фиксированной, чтобы оставаться на месте при прокрутке контента. Заголовок раздела — «липким», чтобы уезжать при прокрутке дальше.
Если у объекта не появляется выбор положения, проверьте, что у самого фрейма прокрутка включена: без неё варианты не имеют смысла.
Клип контента
Практика: чтобы содержимое не «вылезало» за пределы фрейма в режиме редактирования, включите Clip content.
Без этого макет выглядит так, будто ничего не обрезается, и легко не заметить, что реальная граница прокрутки проходит выше.
Вложенная прокрутка
Типичный сценарий: страница прокручивается вертикально, а внутри есть горизонтальная карусель.
- Внешний фрейм — Overflow vertical.
- Внутренний фрейм карусели — Overflow horizontal.
- Контент карусели шире её фрейма.
Практика: если карусель сделана группой, горизонтальная прокрутка не заработает. Только фрейм.
Почему прокрутка не работает
Группа вместо фрейма. Самый частый случай.
Контент помещается. Нет выхода за границы — нет прокрутки.
Не включён clip content при вложенности. Визуально всё выглядит иначе, чем в прототипе.
Проверка в режиме редактирования. Прокрутка работает только в режиме презентации.
Фрейм с «hug contents». Такой фрейм растягивается под содержимое, и выхода за границы не возникает.
Практика: для прокручиваемого фрейма нужна фиксированная высота или ширина, а не подгонка под содержимое.
Модальные окна
Документация про прокрутку прямо про модальные окна не говорит, но логика та же.
Практика: чтобы оверлей прокручивался, у его фрейма должна быть фиксированная высота и включённая прокрутка, а контент — быть выше фрейма. Если оверлей «подстраивается» под содержимое, он растёт вместе с ним и прокручивать нечего.
Проверка
Практика: запускайте прототип кнопкой Present и проверяйте прокрутку там.
В режиме редактирования прокрутка не воспроизводится, поэтому оценить её можно только в презентации.
Проверьте три вещи: контент прокручивается до конца, шапка стоит на месте, горизонтальная карусель не тянет за собой вертикальную прокрутку.
Влияние на вёрстку
Практика: прокрутка с фиксированной шапкой — это модель, которую разработчик поймёт без объяснений.
Но помните: Figma не создаёт CSS. Значения отступов и высот придётся переносить отдельно, поэтому в макете они должны быть ровными — например, выставленными через auto layout.
Прокрутка и smart animate
Практика: прокрутка и смена состояний — разные механизмы.
Если экран переключается на другой фрейм по клику, прокрутка сбрасывается. Это ожидаемо, но в прототипе выглядит как «прыжок» наверх.
Приём: для переходов внутри одного экрана используйте состояния одного фрейма и умную анимацию, тогда прокрутка сохранится.
Позиции элементов и отступы
Практика: фиксированная шапка требует, чтобы контент под ней не перекрывался.
Проще всего собрать страницу так: шапка отдельным слоем сверху, ниже — прокручиваемый фрейм с контентом. Тогда отступ сверху задаётся один раз и не зависит от высоты шапки.
Если шапка лежит внутри прокручиваемого фрейма, задавайте ей фиксированное положение, а первой карточке — верхний отступ, равный высоте шапки.
Демонстрация на защите
Практика: на показе прототипа прокрутка часто ломается из-за спешки.
Проверьте заранее на том устройстве, где будете показывать: размер окна презентации влияет на то, как фрейм вписывается в экран. Если фрейм шире окна, появится внешняя прокрутка, и она будет мешать внутренней.
Итог
Прокрутка в Figma — три условия: фрейм, переполнение, настройка Overflow.
Практика: фиксируйте размер фрейма, включайте clip content, проверяйте в презентации. И не забывайте, что группа никогда не заменит фрейм.
Что дальше
Разобравшись с прокруткой, переходите к состояниям экрана.
Практика: один фрейм с несколькими состояниями и умной анимацией ведёт себя предсказуемее, чем набор отдельных экранов, особенно если внутри есть прокрутка.
Ещё одна проверка
Практика: если прокрутка идёт «рывками» или останавливается раньше времени, посмотрите, нет ли внутри фрейма объектов, выходящих за его границы в неожиданном месте.
Иногда лишний слой с прозрачностью растягивает область контента, и прокрутка получается длиннее, чем нужно. Удаление такого слоя сразу возвращает нормальную длину.
FAQ
Почему вкладка Prototype не даёт выбрать прокрутку?
Скорее всего, выделена группа, а не фрейм.
Какой вариант выбрать для ленты?
Vertical.
Как сделать фиксированную шапку?
Внутри прокручиваемого фрейма задать объекту положение «fixed».
Где проверить прокрутку?
Только в режиме презентации.
Почему прокрутка не включается при «hug contents»?
Фрейм растягивается под содержимое, и выхода за границы не возникает.