Анимация 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.

Готово!

Крутая анимация для твоих проектов готова.