Анимация в фигме на практике с функцией «Smart animate». В этом уроке вы научитесь анимировать слайдер с отзывами и узнаете как сделать анимацию кнопки при наведении.
Пример анимации слайдера в Figma
Выше пример слайдера, который вы сможете сделать в этом уроке. Покликайте на кнопки внизу и посмотрете как он работает.
Файл для практики создания анимации в фигме
![Файл для практики. Анимация в фигме](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-02-1024x486.png)
Специально для этого урока я подготовил файл для практики, который вы можете дублировать по этой ссылке. Сверху нажмите на кнопку «Duplicate», чтобы создать копию.
Как сделать анимацию кнопок в фигме при наведении
![Копирование кнопок для создания в них анимации при наведении](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-06-1024x580.png)
Чтобы сделать анимацию кнопок при наведении в фигме (Figma), нужно их дублировать.
![Создание компонентов из кнопок слайдера](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-07-1024x580.png)
Затем выделите их и создайте из них компоненты с помощью надписи «Create multiple components».
![Создание варинтов из кнопок в фигме](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-08-1024x580.png)
Объедините компоненты в варианты.
![Дублирование кнопок в Figma](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-10-1024x580.png)
Копируйте кнопки с зажатой клавишей «Alt».
![Изменение прозрачности кнопок при наведении в Figma](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-11-1024x579.png)
Измените прозрачность или цвет у копий. Задайте любое изменение, которое хотите видеть при наведении.
![Создание анимации в кнопках в фигме](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-12-1024x579.png)
Перейдите в раздел «Prototype» и создайте связь между первой кнопкой и кнопкой при наведении. Поставьте следующие параметры анимации: «Mouse enter» и значение Animate «Instant».
![Создание анимации в кнопках в фигме](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-13-1024x577.png)
Аналогичную операцию проделайте с прозрачной кнопкой. Поставьте значение «Mouse leave» и анимацию «Instant»
![Создание анимации в кнопках в фигме](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-14-1024x577.png)
Ту же операцию сделайте с кнопкой, которая показывает вправо.
![Копирование кнопок во фрейм в фигме](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-15-1024x581.png)
Копируйте 2 кнопки в нормальном состоянии во фрейм.
Анимация слайдера в фигме с функцией «Smart animate»
![Создание анимации в слайдере](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-16-1024x579.png)
Чтобы создать анимацию в слайдере с помощью фунции «Smart animate» необходимо сделать 3 копии отзывов, как на примере выше и вставить туда фотографии (как это сделать смотрите в видео уроке).
![Создаем связи в smart animate в Figma](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-17-1024x580.png)
Теперь создадим связи между фреймами, чтобы анимация работала. Для этого выберите стрелку направо, перейдите в раздел «Prototype» и свяжите стрелку с фреймом №2. В параметрах анимации поставьте следующие зданчения:
- On click — означает, что анимация будет действовать при клике на элемент.
- Smart animate — умная анимация. Перестраивает элементы на основании имени в слоях.
![Связь между фреймами в прототипе фигма. Smart animate](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-18-1024x580.png)
Создаем связь в прототипе между стрелкой во втором фреме с третим фремом, как показано выше.
![Связь между фреймами в прототипе фигма. Smart animate](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-19-1024x580.png)
Стрелка вправо в третьем фрейме будет связана с первым фреймом.
![Связь между фреймами в прототипе фигма. Smart animate](https://web-design.center/wp-content/uploads/2021/10/image-1024x580.png)
Левая стрелка в третьем фреме связывается со вторым фреймом.
![Связь между фреймами в прототипе фигма. Smart animate](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-21-1024x582.png)
Во втором фрейме левую стрелку необходимо связать с первым фреймом.
![Связь между фреймами в прототипе фигма. Smart animate](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-22-1024x578.png)
Левую стрелку в первом фрейме, свяжите с третьим.
![Проверка анимации в режиме просмотра](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-23-1024x562.png)
Если посмотреть анимацию, то сейчас отзывы не перемещаются. Для того, чтобы они перемещались, необходимо определенным образом назвать слои.
![Выделение отзывов для переименования слоев, чтобы анимация smart animate работала](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-24-1024x579.png)
Сделаю отзывы по бокам прозрачностью 20%. Затем выберу в трех фреймах отзывы с одинаковыми фотографиями.
![Массовое переименование слоёв в Figma](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-25-1024x580.png)
Чтобы массово их переименовать нажму на комбинацию 2 клавиш «Ctrl» + «R». Назовем эти слои «otziv1». Таким образом при анимации figma поймет, что это одни элементы и будет их перемещать.
![Выделение отзывов для переименования слоев, чтобы анимация smart animate работала](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-26-1024x581.png)
Переименовываем отзывы с женщиной. Выделяем их, как показано выше на скриншоте.
![Массовое переименование слоёв в Figma](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-27-1024x580.png)
Переименовываем слои на «otziv2».
![Выделение отзывов для переименования слоев, чтобы анимация smart animate работала](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-28-1024x580.png)
Ту же операцию проделываем с отзывами с мужчиной. Выделяем их с зажатой клавишей «Shift» и кликаем правой клавишей мыши.
![Массовое переименование слоёв в Figma](https://web-design.center/wp-content/uploads/2021/10/animacziya-v-figme-29-1024x579.png)
Переименовываем слои на «otziv3». Включаем режим презентации и проверяем нашу анимацию.
Если вам, что-то было непонятно из статьи, то лучше посмотрите видео выше и все станет на свои места.
Заключение
Итак, вы этом видео вы узнали как сделать анимацию в фигме.
P.S. Кстати, я взял этот раздел с отзывами из своего бесплатного комплекта для прототипирования и создания дизайна Laning Page «Sirius». Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке. На практике мы создадим дизайн макеты быстро и легко.
Автор статьи: Владимир Чернышов
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).