Как сделать эффект фонарика в 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

Замечали, как современные дизайнеры мастерски добавляют нотку хардкора, создавая эффектные дизайны с глитч эффектом? Хотите добавить такой в свои проекты?