Как сделать эффект неона в Figma

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

Пошаговая инструкция

Чтобы создать шаблон, на главном экране выберите Drafts → Значок + → New design file:

На новом экране откроется пустое рабочее пространство:

Для тренировки можно выбрать стандартную фигуру. Например, Shape tools → Star:

Изначально фигура будет черной, но цвет можно изменить в настройках справа, в блоке Stroke:

Для звезды давайте выберем желтый оттенок — #FFCF53. Чтобы создать эффект неоновой лампы, понадобится четыре копии этого объекта. У каждого и них будут свои настройки.

Читайте также:

Как сделать визитку в Figma

Первые три фигуры будут имитировать свечение неоновой лампы, поэтому понадобится эффект размытия из настроек справа: Effects → Layer blur:

Можно выбрать такие параметры размытия:

• для первой звезды — 50;
• для второй — 25;
• для третьей — 10.

Последняя звезда будет имитировать каркас неоновой лампы, поэтому она должна быть максимально светлой. Например, подойдет светло-желтый оттенок #FBEECE:

Теперь эти четыре фигуры нужно наложить друг на друга. Снизу должен быть самый размытый слой, а впереди — светлый. Выровнять слои можно с помощью вспомогательных линий:

И в итоге мы получаем простую фигуру с эффектом неона:

Когда вы освоите простые эффекты, то со временем сможете делать более сложные и интересные проекты с неоновым эффектом: