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

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

  • автор:

Как сделать слайдер в figma?

Всем привет! В общем имеется такая проблема, есть блок с отзывами, я хочу сделать слайдер в фигме, через прототипирование, но когда я связываю эти два блока между собой, а они одинаковые если смотреть по слоям, то при анимации меня перетаскивает на главный блок, с шапкой и баннером, но никак не к блоку с отзывами, которые находятся по середине, на скринах видно, что у меня продублирован макет. По режимам перехода, я и slider,push, move in пробовал, все равно не получается, при перемещении открывается тот же прототип только в самом верху, но не посередине. Надеюсь сможет, кто нибудь с этим помочь, ибо пока в изучении прототипирования:)

  • Вопрос задан более двух лет назад
  • 801 просмотр

Комментировать

Решения вопроса 0

Ответы на вопрос 1

Как вариант — обернуть каждую страницу во фрейм (в размер экрана) и в нем расположить на нужном уровне макет.

Ответ написан более двух лет назад

Комментировать

Нравится Комментировать

Как правильно анимировать слайдер в Figma?

Всем привет! Я только второй месяц изучаю веб-дизайн, поэтому очень долго подвисла на анимации слайдера в фигме. Делаю все по мануалам (несколько разных пробовала) и все равно полноценно не работает слайдер.
Иногда просто не скролит, иногда фрейм при скроле находится не в главном фрейме, а если его помещаю в главный фрейм, то слайдер не работает (по ссылке этот пример).
В общем понимаю, что пропускаю какой-то важный момент, помогите, пожалуйста. Ниже ссылка.
https://www.figma.com/file/Os5RLNPffgBbLcWwoYOnPg/.

  • Вопрос задан более года назад
  • 957 просмотров

2 комментария

Простой 2 комментария

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

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

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

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

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

Подготовка ползунка

  • Сделайте узкий прямоугольник светло-серого цвета и полностью закруглите его углы. Примерный размер фигуры — 276×20 пикселей.
  • Сделайте белый круг с размерами примерно 50×50 пикселей. Поставьте его в левый край прямоугольника. По желанию можно добавить тень. О том, как это делать правильно, мы рассказывали в этой статье.
  • Сделайте копию прямоугольника и перекрасьте его в яркий цвет — например, #8381FF. Затем нажмите на него правой кнопкой мыши и выберите Frame selection. У получившегося фрейма на боковой панели настроек в блоке Frame поставьте галочку около Clip content. Уменьшите длину получившегося фрейма так, чтобы он не выходил за пределы круга.
  • Добавьте текстовый слой и напишите в нём любые числа — например, от 0 до 400 с шагом 50. В боковой панели настроек в блоке Text укажите для него выравнивание по центру.
  • Нажмите на текстовый слой правой кнопкой мыши и выберите Frame selection. У получившегося фрейма на боковой панели настроек в блоке Frame поставьте галочку около Clip content. Уменьшите высоту получившегося фрейма так, чтобы в нём было видно только верхнее число.
  • Поставьте фрейм с текстом над прямоугольником посредине.

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

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

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

Больше коротких инструкций по Figma

  • Подсветка из градиентов
  • «Светящийся» градиент
  • Анимированный глитч
  • Эффект линзы
  • Анимированный фонарик
  • Как сделать эффект параллакса в Figma
  • Пересечение любых цветов
  • Анимированный чекбокс
  • «Пушистый» контур

Слайдер в прототипе Figma

Если речь идет о том, что в прототипе по нажатию на один объект (стрелка на слайдере), нужно сдвинуть другой объект (весь слайдер), то вам надо создать нужные вам фреймы со слайдером (в каждом фрейме со своим слайдом) и навесить на стрелки триггеры On click с переходом Swap With на нужные фреймы.

Слайдер в прототипе Figma

Событие привязано к стрелке, но меняется весь фрейм, в который эта стрелка вложена.

Видео работы

Помогла ли вам эта статья?

Нравится +1 Не нравится -2 Вы уже голосовали

Добавить комментарий Отменить ответ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *