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

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

Зачем нужен горизонтальный скролл в Figma?

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

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

Как создать горизонтальный скролл в Figma: пошаговая инструкция

Создание горизонтального скролла в Figma — это не волшебство, а точная настройка свойств слоя. Вот как это делается:

1. Создайте новый фрейм (Frame) — он будет контейнером для скролла. Установите фиксированную ширину (например, 375px для мобильного) и высоту, которая соответствует вашему дизайну (например, 120px).
2. Внутри этого фрейма разместите элементы, которые должны прокручиваться: карточки товаров, иконки, изображения. Убедитесь, что их общая ширина превышает ширину контейнера — иначе скролл не сработает.
3. Выберите контейнерный фрейм и в панели свойств (Properties) найдите раздел «Overflow». Установите значение «Horizontal».
4. Проверьте результат: при наведении курсора на фрейм появится полоса прокрутки (в режиме Preview), а при перетаскивании — возможность двигать содержимое влево-вправо.

Не забудьте: скролл работает только в режиме Preview (Ctrl+P) и в режиме Prototype. В режиме Design он неактивен — это нормально. Главное, чтобы при тестировании интерфейса вы могли «прокрутить» его пальцем или мышкой.

Пример структуры слоёв

• Frame (Container) — шириной 375px, высотой 120px, Overflow: Horizontal
• — Card 1 (ширина 100px)
• — Card 2 (ширина 100px)
• — Card 3 (ширина 100px)
• — Card 4 (ширина 100px)
• — Card 5 (ширина 100px)

Общая ширина карт: 500px > 375px → скролл активен.

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

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

• Неправильный Overflow — установлено «Visible» или «Vertical». Результат: содержимое выходит за границы, но не прокручивается. Решение: всегда проверяйте, что в свойствах фрейма выбрано «Horizontal».
• Слишком маленькая высота контейнера — если высота меньше высоты элементов, они обрезаются по вертикали. Это не ошибка скролла, но ломает визуальное восприятие. Решение: убедитесь, что высота контейнера равна или чуть больше высоты самого большого элемента.
• Сквозные слои — когда элементы за пределами контейнера остаются активными для кликов. Решение: используйте «Mask to frame» (включено по умолчанию при Overflow: Horizontal), чтобы скрыть всё вне контейнера.
• Отсутствие визуальных маркеров — пользователь не понимает, что можно скроллить. Решение: добавьте полупрозрачные тени с краёв или стрелки-подсказки в статичном режиме.

Прототипирование: как сделать скролл интерактивным

Создать статичный скролл — это только половина дела. Чтобы показать, как пользователь будет взаимодействовать с лентой, нужно настроить прототип.

1. Перейдите в режим Prototype (правая панель).
2. Создайте соединение от фрейма с горизонтальным скроллом к самому себе (или к другому фрейму, если меняется контент).
3. В настройках соединения выберите «Scroll to» → «Fit to width» или «Fit to height».
4. Для плавного эффекта включите «Auto-Animate» — это сгладит переходы между состояниями.
5. В режиме Preview нажмите и удерживайте мышь внутри фрейма — вы сможете «прокручивать» ленту, как на реальном устройстве.

Также можно создать «кнопки-стрелки» (в виде иконок) и привязать их к переходам «Scroll to» с указанием позиции (например, «Scroll to: Left» или «Right»). Это особенно полезно для десктопных интерфейсов, где пользователи привыкли к навигации по кнопкам.

Использование компонентов для масштабируемости

Если вы проектируете не один, а десятки лент — ручная настройка каждого фрейма становится невыносимой. Решение — компоненты.

1. Создайте один фрейм с горизонтальным скроллом и элементами внутри.
2. Выделите весь фрейм и нажмите «Create Component» (Ctrl+Alt+K).
3. Теперь вы можете дублировать компонент — каждый экземпляр будет иметь свой скролл, но с одинаковыми свойствами.
4. Для разных лент используйте «Instance» и меняйте содержимое: заменяйте изображения, тексты, цвета — скролл сохраняется.

Такой подход позволяет команде из 5–10 дизайнеров работать над одним проектом без риска нарушить единый стиль скролла. Также это упрощает аудит: если нужно изменить ширину карточки — вы правите один компонент, а изменения применяются ко всем экземплярам.

Альтернативные методы и их ограничения

Некоторые дизайнеры пытаются обойти ограничения Figma с помощью нестандартных методов. Рассмотрим самые популярные:

Самый надёжный и масштабируемый способ — стандартный скролл с Overflow: Horizontal. Он работает везде, понятен разработчикам, легко передаётся в Figma Dev Mode и совместим с Figma’s new “Inspect” и “Design System”-функциями.

Экспертное мнение: как профессионалы используют горизонтальный скролл

Дмитрий подчёркивает: горизонтальный скролл — это не эстетика, а часть пользовательского сценария. Он влияет на скорость принятия решений, на то, как пользователь воспринимает объём контента. В его команде каждый компонент с горизонтальным скроллом сопровождается чек-листом:

• Ширина контейнера соответствует целевому устройству
• Количество элементов — не более 5–7 (по правилу «7±2»)
• Отступы между элементами — не менее 8px
• Визуальный индикатор скролла (даже если он неактивен в Figma)
• Прототип с Auto-Animate и 0.3s-анимацией

Эти правила — результат 3 лет экспериментов с A/B-тестами и анализом поведения пользователей.

Часто задаваемые вопросы

Заключение

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

• Горизонтальный скролл создаётся через Overflow: Horizontal в свойствах фрейма.
• Обязательно проверяйте, что содержимое шире контейнера — иначе скролл не активируется.
• Используйте компоненты для масштабируемости и согласованности в командах.
• Прототипируйте с Auto-Animate и «Scroll to» для реалистичного поведения.
• Не используйте повороты, плагины или внешние инструменты — они ломают поток работы.