Как создать неон в Figma

С помощью базовых инструментов создаём эффект неона к тексту и линиям. (В конце прилагается видео)

Как создать неон в Figma

Для начала создаём фрейм (В левом верхнем углу "Frame", горячая клавиша F). Далее добавляем текст (В левом верхнем углу "Text", горячая клавиша T), к которому будем создавать эффект неонового свечения (шрифт текста рекомендуется выбирать с более тонкими линиями). Фрейм окрашиваем в темный цвет в тон к будущей неоновой надписи. В моём случае цвет фрейма будет тёмно-синий (# 1A1B1D), а текст будет состоять из двух цветов тёмного (# 4C97A7) и светлого (# CCE7ED).

Как создать неон в Figma

1 слой самый нижний. Добавляем тексту цвет (справа вкладка "Fill" # 4C97A7). Применяем эффект размытия (справа вкладка "Effects", из выпадающего списка выбираем "Layer blur", Blur: 70).

2 слой. Копируем получившийся размытый текст и вставляем то же на место, где находится первый слой (горячие клавиши: Ctrl+C - копировать, Ctrl+V - вставить). Это второй слой, у которого меняем цвет на более светлый (справа вкладка "Fill" # CCE7ED ) и уменьшаем эффект размытия до 50 (Effects, Layer blur, Blur: 50).

3 слой. Копируем получившийся размытый текст и вставляем на то же место (Ctrl+C, Ctrl+V). Это третий слой,у которого цвет остаётся тот же, но уменьшаем эффект размытия до 20 (Effects, Layer blur, Blur: 20)

4 слой. Копируем получившийся размытый текст и вставляем на то же место (Ctrl+C, Ctrl+V). Это четвертый слой,у которого цвет остаётся тот же, но уменьшаем эффект размытия до 10 (Effects, Layer blur, Blur: 10).

5 слой самый верхний. Копируем получившийся размытый текст и вставляем на то же место (Ctrl+C, Ctrl+V). Это пятый самый верхний слой,у которого меняем цвет на белый и убираем эффект размытия(Effects, Layer blur, Blur: 0).

При создании эффекта неона у линии принцип тот же, но тут есть возможность поэкспериментировать с толщиной.

1 слой нижний. Настраиваем цвет (справа вкладка "Stroke" # E3FCFF ), толщина 15 (настраивается в той же вкладке "Stroke"), размытие 50 (Effects, Layer blur, Blur: 50).

2 слой. Толщина 5, размытие 25.

3 слой. Толщина 5, размытие 15.

4 слой. Толщина 5, размытие 10.

5 слой верхний. Меняем цвет на белый, толщина 5, размытие 0.

Это общий принцип создания неонового свечения в фигме. Изучая и экспериментируя можно создать множество необычных эффектов.

Telegram канал, в котором я делюсь своим опытом

5K5K показов
213213 открытия
1 комментарий

а кстати очень круто получается, я бы даже и не подумал что такой эффект можно сделать

Ответить