Figma как сделать скролл

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

Основы скролла в Figma: что нужно понимать

Figma — это векторный редактор, а не среда исполнения кода. Поэтому он не может воспроизводить скролл в классическом смысле. Вместо этого используется механизм прототипирования, где прокрутка имитируется с помощью переполнения контента внутри фрейма. Это достигается за счёт свойства overflow, доступного в режиме Auto Layout.

Чтобы создать скролл, необходимо:

• Создать фрейм с включённым Auto Layout.
• Разместить внутри него контент, превышающий высоту (или ширину) фрейма.
• Активировать overflow: scroll в настройках фрейма.
• Настроить прототип так, чтобы при взаимодействии пользователь мог «пролистывать» содержимое.

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

Auto Layout — ключевой инструмент. Без него невозможно корректно настроить overflow. Фрейм должен быть не просто контейнером, а структурой с определёнными направлениями роста: вертикальным или горизонтальным.

Как работает overflow в Figma

Overflow — это свойство, позволяющее скрывать часть контента за границами фрейма и давать возможность его просматривать. Есть три режима:

• None — контент обрезается, прокрутка недоступна.
• Scroll — появляется полоса прокрутки, контент можно листать.
• Pinned — некоторые элементы остаются на месте при прокрутке (например, шапка).

Для создания скролла выбирается режим Scroll. При этом Figma автоматически добавляет полосу прокрутки в режиме предварительного просмотра прототипа.

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

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

1. Создайте новый фрейм с нужной шириной (например, 375 px для мобильного экрана).
2. Включите Auto Layout (значок ➕ в правой панели или Ctrl+L / Cmd+L).
3. Установите направление «Vertical» и выравнивание по центру или слева.
4. Добавьте контент: текстовые блоки, карточки, изображения. Убедитесь, что их общая высота превышает высоту фрейма.
5. В настройках фрейма найдите раздел «Overflow» и выберите «Scroll».
6. Задайте фиксированную высоту фрейму, например, 600 px, чтобы контент явно выходил за границы.

Теперь, когда вы перейдёте в режим прототипа и запустите просмотр, вы сможете прокручивать содержимое фрейма с помощью мыши или тачпада.

Настройка прототипа для скролла

Хотя overflow даёт визуальный скролл, для полноценной интерактивности нужно правильно настроить связи в прототипе.

• Перейдите на вкладку Prototype.
• Выделите фрейм со скроллом.
• Нажмите на «+» рядом с «Interactions» и выберите триггер While Hovering (для десктопа) или On Click (для мобильных).
• В качестве действия выберите Scroll To.
• Укажите целевой элемент — например, нижнюю карточку или весь контент-блок.

Теперь при наведении курсора (или клике) фрейм будет прокручиваться. Однако важно понимать: это не настоящий скролл, а анимация перехода к определённому положению.

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

Горизонтальный скролл часто используется в каруселях, галереях, табах и свайп-интерфейсах. Его настройка аналогична вертикальному, но с важными нюансами.

1. Создайте фрейм с фиксированной шириной и включённым Auto Layout.
2. Выберите направление Horizontal.
3. Добавьте несколько элементов (например, карточек), чтобы их суммарная ширина превышала фрейм.
4. Активируйте overflow: scroll в настройках фрейма.
5. Настройте прототип: используйте триггер Drag Horizontal для реалистичного свайпа.

Для более естественного поведения рекомендуется использовать Smart Animate с настройкой «Push» или «Slide in», чтобы элементы плавно перемещались при перетаскивании.

Интерактивные элементы и триггеры

Триггеры — это то, что запускает скролл. В Figma доступны различные типы, и выбор зависит от целевой платформы и типа взаимодействия.

• While Hovering — подходит для десктопных прототипов. Прокрутка активируется при наведении мыши.
• On Click — простое нажатие запускает анимацию прокрутки до указанного элемента.
• Drag — позволяет перетаскивать контент вручную. Используется для свайпов и каруселей.
• After Delay — автоматическая прокрутка через заданное время (например, для слайд-шоу).

Для максимальной реалистичности сочетайте триггеры. Например, используйте Drag Horizontal для основного взаимодействия и On Click для кнопок «Вперёд/Назад».

Как настроить Drag-скролл

1. Выделите фрейм с горизонтальным Auto Layout.
2. Перейдите в Prototype.
3. Нажмите «+», выберите триггер Drag.
4. Установите направление Horizontal.
5. В действии выберите Move и укажите, какой элемент должен двигаться (обычно это сам фрейм).
6. Включите Constraints — «Free», чтобы движение было плавным.

Теперь при перетаскивании контент будет двигаться вместе с курсором, имитируя настоящий скролл.

Ошибки, которые нельзя допускать

Даже опытные дизайнеры иногда делают ошибки при настройке скролла. Вот самые распространённые:

• Отсутствие Auto Layout. Без него невозможно включить overflow. Это базовое требование.
• Неправильные размеры фрейма. Если фрейм растягивается по контенту, скролла не будет. Нужна фиксированная высота или ширина.
• Использование обычных групп вместо фреймов. Группы не поддерживают overflow и Auto Layout.
• Забытый Smart Animate. Без анимации переходы будут резкими. Всегда включайте Smart Animate при настройке Scroll To.
• Несовместимость триггеров. Например, While Hovering не работает на мобильных устройствах.

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

Чтобы прототип выглядел максимально реалистично, следуйте этим рекомендациям.

• Используйте реальные данные. Длинные тексты, изображения, карточки — всё это помогает оценить поведение скролла.
• Добавьте индикаторы прокрутки. В макете можно нарисовать полосу прокрутки, чтобы показать прогресс.
• Тестируйте на разных устройствах. Проверяйте, как скролл работает на iPhone, Android, планшетах.
• Настройте плавность анимации. В Smart Animate установите duration 300–500 ms и easing «Ease In Out».
• Используйте компоненты для повторяющихся элементов, чтобы быстро масштабировать контент.

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

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

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

Она также советует использовать плагины вроде »Sticky Scroll» или »Advanced Scroll», которые расширяют возможности скролла. Однако подчёркивает: «Плагины — это помощь, а не замена основам. Сначала освойте native-инструменты.»

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

Заключение

Создание скролла в Figma — это не магия, а последовательное применение инструментов: Auto Layout, overflow и прототипные триггеры. Понимание этих механизмов позволяет строить реалистичные, интерактивные прототипы, которые точно передают поведение будущего продукта.

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

• Скролл в Figma работает только в Auto Layout-фреймах с overflow: scroll.
• Используйте While Hovering для десктопа и Drag/On Click для мобильных.
• Фрейм должен иметь фиксированные размеры, чтобы контент переполнял его.
• Тестируйте прототип на разных устройствах и платформах.
• Для сложных сценариев применяйте плагины, но сначала освойте native-инструменты.