Как сделать крутую анимацию в Figma с помощью плагина Parallax

Делимся способами создания необычной анимации в Figma. В этой статье рассмотрим плагин Parallax, разработанного нашей командой DAVV.

Parallax - это плагин для Figma, который позволяет создавать красивые параллакс-эффекты. В плагине можно очень быстро настроить параллакс по движению мыши, скроллу и зуму.

Эффект параллакса обычно ассоциируется с анимацией, приведенной ниже: снег, цветы, горы.

Хотим поделиться несколькими идеями, как можно по-другому использовать этот инструмент.

Интересная анимация получается, если скопировать слой с текстом и вставить его несколько раз. Попробуйте поэкспериментировать с цветом, чтобы создать более выразительную анимацию. Например, можно использовать градиентные цвета, чтобы создать плавный переход.

Функция 3D в Parallax придает глубины и объемности. Например, можно создать эффект вращения, который добавит вашему элементу дополнительное движение и интерактивность.

Parallax также совместим с плагином SVG motion. Сначала линии можно анимировать в SVG motion, как мы описывали в этой статье, а затем в Parallax добавить функцию 3D.

Здорово выглядит наложение Difference для двух паттернов. Плагин Parallax добавляет жизни такому бэкграунду и притягивает внимание, анимация получается активной, даже дерзкой.

Демонстрация наложения паттернов. Эта анимация создана в другом нашем плагине Shape move, о котором есть отдельная статья.

Ограничения плагина Parallax:

Поддерживается только вертикальный параллакс по скроллу, горизонтальный сделать не получится.
Нельзя настроить параллакс так, чтобы один слой двигался в одну сторону, а другой - в противоположную.
Нет настройки расстояния для конкретного слоя. При увеличении параметра Parallax расстояние увеличивается равномерно для всех слоев. Увеличить это расстояние можно вручную, добавив ложные слои.
Анимация будет проигрываться в Prototype, если вы добавите ее в макет в формате GIF или видео-формате (для pro-аккаунтов Figma).
В бесплатной версии плагина доступна анимация по движению мыши. Параллакс по скроллу, зуму, 3D, библиотека с шаблонами и экспорт анимации доступны для про-аккаунта.

Экспорт доступен в форматах HTML, SVG, GIF и WEBM. Есть возможность задать сценарий анимации (по прямоугольнику, кругу или знаку бесконечности) или записать движение самостоятельно, а также скрыть или показать курсор мыши.

Как сделать крутую анимацию в Figma с помощью плагина Parallax

В заключение плагин Parallax позволяет создавать необычную анимацию в самой Figma, добавляя жизнь вашим проектам и привлекая внимание пользователей. С помощью функции 3D и совместимости с SVG motion, экспериментируя со слоями и их наложением вы можете создавать еще более сложные и интерактивные эффекты.