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

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

Основные понятия прокрутки в Figma

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

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

Ключевыми компонентами являются:

• Родительский фрейм (видимая область, например, 375×812 px — стандартный размер iPhone)
• Дочерний фрейм (контент, который превышает размеры родителя)
• Настройка прототипа с типом перехода «Scroll»
• Анимация через Smart Animate для плавного эффекта

Подготовка макета к прокрутке

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

Начните с создания основного фрейма — это будет ваш «экран». Например, для мобильного приложения выберите шаблон iPhone 14 (375×812 px). Затем создайте второй фрейм, который будет содержать весь контент: заголовки, карточки, изображения, кнопки. Его высота должна превышать высоту родительского фрейма — например, 2000 px.

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

Шаги подготовки

1. Создайте родительский фрейм с нужными размерами (например, 375×812 px).
2. Создайте дочерний фрейм с высотой больше родителя (например, 375×2000 px).
3. Перетащите дочерний фрейм внутрь родительского.
4. Включите опцию «Clip content» у родительского фрейма (значок ножниц в правой панели свойств).
5. Добавьте контент внутрь дочернего фрейма: текст, изображения, блоки.

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

Процесс настройки практически идентичен для обоих типов, но различается ориентацией контента.

Для вертикальной прокрутки:

• Высота дочернего фрейма > высоты родительского
• Ширина совпадает или меньше
• Прокрутка осуществляется движением вверх/вниз

Для горизонтальной прокрутки:

• Ширина дочернего фрейма > ширины родительского
• Высота совпадает или меньше
• Прокрутка осуществляется движением влево/вправо

Переключитесь в режим Prototype (вкладка сверху справа). Выделите родительский фрейм и добавьте новый переход. В качестве триггера выберите «Drag», направление — «Vertical» или «Horizontal». В качестве действия укажите «Scroll». Target (цель) — это дочерний фрейм. Убедитесь, что выбран именно он, а не весь родительский фрейм.

Пример: Горизонтальная карусель

Представьте, что вы создаёте слайдер с товарами. Ширина родительского фрейма — 375 px, а дочернего — 1500 px (5 карточек по 300 px). Настройте Drag → Horizontal → Scroll. Теперь при прототипировании можно будет «перелистывать» товары, как в настоящем приложении.

Настройка Smart Animate для плавной прокрутки

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

Чтобы включить Smart Animate:

• Убедитесь, что у вас есть хотя бы два экрана (или состояния) в прототипе.
• Создайте переход между ними с типом «Smart Animate».
• В настройках перехода выберите «Scroll» в разделе Animation.

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

Типы анимации прокрутки

Интерактивные элементы с прокруткой

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

Для этого:

• Создайте несколько экранов, каждый из которых представляет состояние прокрутки (например, начало, середина, конец).
• На каждом экране дочерний фрейм расположен на разной позиции Y (для вертикальной прокрутки).
• Настройте переходы между экранами через клик с анимацией Smart Animate → Scroll.

Такой подход позволяет моделировать:

• Переходы между секциями сайта
• Автоматическую прокрутку после загрузки
• Анимированные туры по интерфейсу

Пример: Прокрутка к форме

У вас есть длинная страница с формой внизу. Создайте второй экран, где дочерний фрейм смещён вниз (Y = -1200 px). Свяжите кнопку «Связаться» с этим экраном через клик и Smart Animate. Пользователь увидит, как экран плавно прокручивается к нужному блоку.

Частые ошибки и как их избежать

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

• Прокрутка не работает: Часто это происходит из-за того, что дочерний фрейм не вложен в родительский или отключена опция «Clip content». Проверьте иерархию и настройки фрейма.
• Контент обрезается неправильно: Убедитесь, что у родительского фрейма включён clipping. Если нет — контент будет выходить за границы, но не будет прокручиваться.
• Smart Animate не применяется: Имена фреймов должны совпадать. Если вы скопировали фрейм, Figma может присвоить ему новое имя (например, ‘Copy of Frame’), что нарушит анимацию.
• Горизонтальная прокрутка срабатывает как вертикальная: Проверьте направление в настройках Drag. Также убедитесь, что высота дочернего фрейма не превышает родительскую — иначе Figma может запутаться.
• Прокрутка «заедает» в прототипе: Это может быть связано с производительностью. Упростите макет: удалите лишние тени, маски, сложные фигуры.

Чек-лист готовности прокрутки

• Родительский фрейм создан и имеет нужные размеры
• Дочерний фрейм помещён внутрь родительского
• Включена опция «Clip content» у родительского фрейма
• Высота/ширина дочернего фрейма больше родительского
• Настроен переход с триггером Drag и действием Scroll
• Target — дочерний фрейм
• Имена фреймов совпадают при использовании Smart Animate

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

Екатерина Лебедева, старший продукт-дизайнер в компании «Нетология», делится своим опытом:

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

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

Заключение

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

• Прокрутка возможна только внутри фрейма с включённым clipping
• Для плавности используйте Smart Animate с типом Scroll
• Следите за именами и иерархией фреймов
• Протестируйте прототип на мобильном устройстве
• Используйте прокрутку осознанно — только где это необходимо