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

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

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

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

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

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

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

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

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

Создание прототипа

Выделите все объекты ползунка и нажмите , чтобы сделать компонент. Затем сделайте вариант этого компонента.
У варианта компонента переместите круг в правый край. Фрейм с синим прямоугольником сделайте длиннее — чтобы он доходил до круга. Текст во фрейме переместите так, чтобы в нём было видно только последнее число.
Выделите круг в первом варианте и на правой панели настроек откройте Prototype. Затем наведите курсор на круг, зажмите появившийся кружок и перетащите его на второй вариант. Должна появиться стрелка.
В появившемся окне в блоке Animation вместо On click укажите On drag. Затем вместо Move in укажите Smart animation.
Сделайте то же самое в обратную сторону — от круга внутри второго варианта к первому варианту.
Добавьте на макет фрейм с размерами iPhone 14 и скопируйте на него первый вариант. При необходимости поменяйте цвета.

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

Анимация в фигме: как сделать анимацию слайдера со Smart animate

Анимация в фигме на практике с функцией «Smart animate». В этом уроке вы научитесь анимировать слайдер с отзывами и узнаете как сделать анимацию кнопки при наведении.

Пример анимации слайдера в Figma

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

Файл для практики создания анимации в фигме

Файл для практики. Анимация в фигме

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

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

Копирование кнопок для создания в них анимации при наведении

Чтобы сделать анимацию кнопок при наведении в фигме (Figma), нужно их дублировать.

Создание компонентов из кнопок слайдера

Затем выделите их и создайте из них компоненты с помощью надписи «Create multiple components».

Создание варинтов из кнопок в фигме

Объедините компоненты в варианты.

Дублирование кнопок в Figma

Копируйте кнопки с зажатой клавишей «Alt».

Изменение прозрачности кнопок при наведении в Figma

Измените прозрачность или цвет у копий. Задайте любое изменение, которое хотите видеть при наведении.

Создание анимации в кнопках в фигме

Перейдите в раздел «Prototype» и создайте связь между первой кнопкой и кнопкой при наведении. Поставьте следующие параметры анимации: «Mouse enter» и значение Animate «Instant».

https://amdy.su/wp-admin/options-general.php?page=ad-inserter.php#tab-8

Создание анимации в кнопках в фигме

Аналогичную операцию проделайте с прозрачной кнопкой. Поставьте значение «Mouse leave» и анимацию «Instant»

Создание анимации в кнопках в фигме

Ту же операцию сделайте с кнопкой, которая показывает вправо.

Копирование кнопок во фрейм в фигме

Копируйте 2 кнопки в нормальном состоянии во фрейм.

Анимация слайдера в фигме с функцией «Smart animate»

Создание анимации в слайдере

Чтобы создать анимацию в слайдере с помощью фунции «Smart animate» необходимо сделать 3 копии отзывов, как на примере выше и вставить туда фотографии (как это сделать смотрите в видео уроке).

Создаем связи в smart animate в Figma

Теперь создадим связи между фреймами, чтобы анимация работала. Для этого выберите стрелку направо, перейдите в раздел «Prototype» и свяжите стрелку с фреймом №2. В параметрах анимации поставьте следующие зданчения:

On click — означает, что анимация будет действовать при клике на элемент.
Smart animate — умная анимация. Перестраивает элементы на основании имени в слоях.