Создаем эффект неона и анимируем его в Figma

Эффект неона — это яркое свечение, которое придаёт дизайну некую атмосферу футуризма. Часто он ассоциируется с уличными вывесками, клубами, ретро-эстетикой 80-х и даже киберпанком. Поэтому подойдет не всем цифровым продуктам. Например, на сайте, посвященном детским товарам он вряд ли будет уместен. Но вот для проектов, связанных с технологиями, музыкой или игровой индустрией — подойдет идеально.

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

Шаг 1: Создаем линию

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

• Выбираем инструмент Line.
• Создаем линию длиной 1920px и толщиной 6.
• Выбираем ей цвет. Я буду использовать яркий красный #F6474B.

Мой совет: при выборе палитры выбирайте яркие цвета для создания эффекта неона. Так сам эффект будет ярче и лучше заметен.

Шаг 2: Копируем линию

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

• Добавляем нашей линии Layer blur. Значение блюра пока не важно, его настроим немного позже.
• С этой линии создаем ещё две копии, с помощью горячих клавиш Ctrl (Cmd) + D.
• Выделяем все три линии и создаем им группу с помощью горячих клавиш Ctrl (Cmd) + G.

Шаг 3: Настраиваем блюр для линий

Почему до копирования мы сразу добавили Layer blur самой первой линии? Чтобы сейчас не добавлять его каждой. Остается только установить значения.

• В слоях слева выбираем нижнюю линию и в Layer blur устанавливаем 40.
• Выбираем среднюю линию и в Layer blur устанавливаем 30.
• Для верхней в Layer blur устанавливаем от 2 до 4.
• Для нижней и средней линии выбираем режим наложения Hard light.

Наш эффект неона для линий готов. Но согласитесь, что просто на фигуру смотреть не очень интересно. Сразу хочется его вписать в какой-то дизайн. Поэтому переходим к созданию первого экрана.

Шаг 4: Создаем фрейм

• Создаем фрейм 1920*1080px.
• Добавляем в Figma два фото. Свои я специально создавал в Midjourney, чтобы девушка была та же. Но для первого фото выбрано более спокойные цвета, а для второго более яркие, прям слегка неоновые.

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

Шаг 5: Подготовка фото

Фото, которые мы добавили, будут нашим фоном и меняться при анимации. Поэтому их нужно правильно доработать и вставить во фрейм.

• Накладываем фото, которое у вас будет меняться при анимации наверх. Четко выравниваем по первому (для удобства делаем их одного размера).
• Вставляем во фрейм и подстраиваем под его размер (обрезаем фото, где это нужно).
• Скрываем верхнее фото с помощью Clip content.

Конечно это ещё не все манипуляции с фотографиями, чтобы сказать, что они полностью готовы. Но для этого этапа больше с ними делать ничего не нужно.

Шаг 6: Добавляем контент для экрана

Теперь нужно добавить в наш фрейм другие элементы интерфейса. Это могут быть: хедер, кнопки, иконки, тексты, иллюстрации и т.д. Важно: всё это должно быть в слоях слева над всеми другими элементами. Кнопку обязательно создаем компонентом, ведь в конце настроим ей анимацию ховера.

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

• Создаем прямоугольник с заливкой #0A090C.
• Делаем из заливки градиент и настраиваем, чтобы край был более темным, а контент лишь слегка.

• Копируем его и меняем расположение в настройках градиента, чтобы был второй прямоугольник для правой стороны экрана.
• Добавляем во фрейм.

Шаг 7: Добавляем неоновых линий

Добавим побольше неона в дизайн? А то что мы создали одну линию и она грустно дожидается своего дебюта.

• Из неоновой линии создаем 4 копии. Для этого нам нужно нажать на неё и воспользоваться четыре раза горячими клавишами Ctrl (Cmd) + D. Ту, с которой мы делали копию оставляем, она ещё пригодится.
• Две линии делаем горизонтальными, а две вертикальными.

Шаг 8: Подстраиваем линии по контенту

А вот и ответ зачем мы создали две горизонтальные и две вертикальные линии: в двух точках они будут пересекаться.

• Добавляем все четыре линии во фрейм.
• Выравниваем по контенту.

• Аккуратно перетягивая, выносим за края фрейма.
• Проверяем, чтобы их не было видно.

Теперь, когда мы будем настраиваться анимацию, мы сможем добавить нашим линиям больше динамики с вылетами за границ фрейма.

Шаг 9: Делим фрейм на 4 части

Мне хочется добавить ещё больше неона и динамики, поэтому теперь мы поработаем с верхним фото, которое скрывали до этого.

• Возвращаем видимость верхнего фото.
• Делим фрейм на четыре равные части по высоте. Поскольку высота у нас 1080 px, то это по 270 px. Для удобства советую добавить линии с линейки, чтобы четко было видно четыре равные части.

Шаг 10: Создаём копии верхнего фото

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

• Делаем ещё три копии верхнего фото с помощью горячих клавиш Ctrl (Cmd) + D.
• Обрезаем каждое фото поочерёдно, обязательно с зажатым Ctrl (Cmd) на клавиатуре. Так, чтобы соединив все четыре кусочка у нас всё равно получалось одно фото (но мы то знаем, что оно имеет несколько фрагментов, прямо как элементы интерфейса в системе Atomic design).

Шаг 11: Добавляем неона фрагментам фото

Помните мы оставляли неоновую линию и я говорил, что она нам ещё пригодится? Так вот сейчас самое время её использовать.

• Создаем ещё семь копий линии с помощью горячих клавиш Ctrl (Cmd) + D.

• Добавляем по две на края наших фрагментов с фото. Это можно быстро сделать сложив линии изначально: чтобы две крайние были по одной, а внутри одна линия накладывалась на другую.
• После перенести во фрейм под прямоугольники, которые мы использовали как дополнительное затемнение.

Обязательно проверьте, чтобы линии были именно по краям фрагментов и ничего не перекрывали важного.

Шаг 12: Группируем линии и фрагменты фото

• Выделяем фрагмент фото и его две линии по краям.
• Создаем из них группу с помощью горячих клавиш Ctrl (Cmd) + G.

• Делаем это со всеми фрагментами.
• Группируем и другие элементы, даем им логичные названия.

Шаг 13: Скрываем фрагменты фото

Чтобы добавить на фрагменты анимацию вылета кусочков фотографии поочерёдно, нам нужно их переместить за край фрейма. А быстрее это можно сделать, если установить нужное значение для каждого по X.

• Для первого и третьего фрагмента устанавливаем по Х 1920.
• А для второго и четвертого — Х-1920.

Шаг 14: Добавляем кнопке вариант

Вы все сделали её в компоненте, да? Вот теперь мы можем добавить ей варианты и настроить анимацию ховера.

• Добавляем кнопке вариант компонента.
• При ховере она будет иметь эффект свечения, поэтому мне нужно добавить второму варианту два Drop shadow.

Шаг 15: Анимация ховера для кнопки

Теперь у нас есть два варианта и мы можем настроить анимацию ховера между ними.

• Перейдите в режим Prototype, в правой панеле.
• Между вариантами настройте анимацию While hovering со Smart animate. Я указал скорость 300ms.

Шаг 16: Создаем из фрейма компонент

Чтобы быстро настроить связь для анимации и редактировать их в случаи необходимости, нужно создать компонент фрейма с вариантами.

• Создаем с фрейма компонент.
• Создаем вариант этого фрейма в компоненте.

Шаг 17: Подготовка к анимации

А вот теперь пора поочередно выносить фрагменты фото (которое мы делили на четыре).

• В первом варианте компонента возвращаем на место первый и третий фрагменты.
• Делаем копию этого варианта, и новой копии возвращаем второй и четвертый фрагменты.

Шаг 18: Последние штрихи

Вспомните о четырех линиях, которые мы добавляли на начале и выносили за края фрейма. Теперь нужно их добавить в последний вариант.

• Копируем последний вариант (всё в том же компоненте) и выделяем во всех фрагментах фото неоновые линии.
• Перетаскиваем их влево за край фрейма, чтобы их не было видно.

• Возвращаем четыре неоновые линии во фрейм (те две горизонтальные и вертикальные) и выравниваем по контенту.

Шаг 19: Добавляем анимацию

Осталось настроить анимацию между вариантами и добавить оптимальную скорость.

• Между первыми слайдами добавляем анимацию через кнопку.
• Устанавливаем On click с помощью Smart animate, скорость 300ms.

• Между другими вариантами настраиваем анимацию After delay.
• Где Delay 1ms. Со Smart animate 300ms.

Шаг 20: Создаем новый фрейм

Создаем новый фрейм, чтобы проверить результаты нашей работы.

• Создаем новый фрейм, размером 1920*1080.
• Добавляем в него копию первого варианта.
• И включаем Present.

Наш эффект неона с анимацией готов

Теперь мы можем оценить результаты нашей работы. И главное, уверенно сказать самому себе: «Да, теперь я умею создавать неон в Figma, да ещё и круто анимировать его».