Как сделать эффект фонарика в Figma
В этом уроке мы поэтапно разберёмся, как создать свечение от фонарика у текста при ховере.
Шаг 1
- Создаём фрейм с тёмным цветом #212121.
- Добавляем элементы дизайна.
Шаг 2
- Вне фрейма пишем главный текст.
- Заливаем текст линейным градиентом #212121 – #2F2F2F.
- Дублируем слой с текстом (Ctrl+D) и нажимаем Use as mask (Сtrl+Alt+M).
- Переносим текст и группу с маской во фрейм.
Шаг 3
- Вне фрейма создаём эллипс и добавляем ему Layer blur ~100.
- Дублируем эллипс и меняем у него непрозрачность на 0%.
Шаг 4
Выделяем оба эллипса и создаём компонентную группу. Связываем компоненты со следующими настройками:
- While hovering
- Smart animate
- Linear 100ms.
Шаг 5
- Копируем первый вариант эллипса и дублируем его (Ctrl+D) создаём сетку по размерам нашего текста.
- Переносим получившуюся сетку во фрейм, внутрь маски.
Готово!
Теперь ты умеешь создавать эффект фонарика в Figma. Данная анимация отлично подойдёт для первых экранов, её можно реализовать как при ховере, так и автоматически, заменив настройки анимации на After delay.
Рекомендуем ознакомиться:
Анимация появления элементов в Figma
В этом уроке мы научимся создавать анимацию появления элементов, используя только функции Figma.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
