Дизайн
#Руководства

Как работают sticky-элементы в Figma

Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.

Иллюстрация: Оля Ежак для Skillbox Media

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

Основной файл

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

Все дальнейшие действия мы будем делать в нашем файле.

Прототипирование

  • Выделите фреймы с меню — в нашем файле на панели слоёв они называются Status Bar и Navigation Bar.
  • На правой панели настроек откройте Prototype и в блоке Scroll behavior в пункте Position вместо Scroll with parent выберите Fixed.
  • Выделите фреймы с заголовками — в нашем файле на панели слоёв они называются Nike и Adidas.
  • На правой панели настроек откройте Prototype и в блоке Scroll behavior в пункте Position вместо Scroll with parent выберите Sticky.
  • Нажмите кнопку Play и проверьте результат.

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

Возможные ошибки: порядок слоёв и высота блока

При работе со Sticky Figma ориентируется на порядок слоёв. Поэтому они должны стоять в правильном порядке:

  • Слои со Sticky должны быть в самом верху на панели слоёв, если вы не хотите, чтобы блоки внутри страницы их перекрывали.
  • Слои должны располагаться в обратном порядке — первый на макете → последний в слоях. Если это не так, то Sticky не будет работать корректно.

Все sticky-элементы «упираются» в край экрана и не учитывают окружающие их блоки. Например, в нашем файле есть фиксированный Status Bar и «остров» от iPhone — если Sticky равен или меньше высоты этих элементов, то его просто скроет:

Самоучитель по Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Запишите ребёнка на бесплатный урок в Skillbox Kids ➞
Учим детей программированию, веб-дизайну и разработке игр. Преподаватель — IT-эксперт — подберёт курс по интересам ребёнка. Подробности — по клику.
Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована