Анимация zoom in в Figma
В этом уроке мы научимся создавать zoom in анимацию в Figma, которая добавит глубины в ваш проект и сделает его интереснее.
Шаг 1
- Создаём новый фрейм.
- Вне фрейма создаём горизонтальные и вертикальные кривые.
- Размещаем их перпендикулярно друг к другу.
Шаг 2
- Выделяем горизонтальные кривые и запускаем плагин BlendingMe.
- Задаём количество копий и нажимаем Create.
Шаг 3
- Выделяем вертикальные кривые и также пропускаем их через плагин.
- В результате у нас должна получиться ассиметричная сетка.
- Добавляем градиент нашим линиям.
Шаг 4
- Группируем наши линии (Ctrl+G) и переносим их во фрейм.
- Добавляем элементы дизайна.
Шаг 5
- Создаём слайдер.
- Оборачиваем его во фрейм (Ctrl+Alt+G) и переносим в основной фрейм.
- Прячем слайдер за пределы фрейма.
Шаг 6
- Дублируем фрейм.
- У кнопки непрозрачность меняем на 0%.
- Группу с сеткой увеличиваем и сдвигаем влево.
Шаг 7
- Достаём слайдер.
- Уменьшаем фрейм со слайдером по размерам основного фрейма.
- Добавляем фрейму со слайдером Horizontal scrolling.
Шаг 8
Связываем фреймы (от кнопки к фрейму):
- On click
- Smart animate
- Slow — 1000ms.
Готово!
Крутая анимация для твоих проектов готова.
Рекомендуем ознакомиться:
Анимация эффекта волны в Figma
В этом уроке мы создадим эффект волны в Figma при помощи наложения нескольких теней.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
