КАК В ФИГМЕ СДЕЛАТЬ СВЕЧЕНИЕ
В Figma возможно создать свечение при помощи эффектов.
Для создания свечения, выберите элемент на панели слоев. Затем, откройте «Эффекты» в контекстном меню или в правой панели. В «Эффектах» нажмите кнопку «Добавить эффект», и выберите «Свечение» из списка.
Настройте свет, цвет и другие параметры для свечения в правой панели. Нажмите кнопку «Готово», когда закончите.
Вы можете скопировать и вставить этот эффект на другие элементы, если это необходимо. Измените свойства свечения с помощью функции «Редактировать эффект», если потребуется.
Применить эффект свечения к текстовому блоку можно, выбрав текстовый блок на панели слоев, выбрав эффект свечения из списка и настраивая нужные параметры.
Эффект Неоновое Стекло в Figma — Глас Морфизм в Фигма — Glass Neon Effects in Figma —
Видео-урок в Figma — Эффект подсветки фото — 7 минут урок
#21 Как создавать неоновые эффекты в Фигме. How to create neon effects in Figma.
Поясняю за кнопку
Задайте эллипсу Эффект layer blur. Отодвиньте его к краю, чтобы половина эллипса выходила за маску.
Выделите в слоях объект «Маска». Задайте ей эффект Drop Shadows с достаточной интенсивностью blur (примерно 50). У вас получится эффект такой, что бледное свечение эллипса виднор за пределами маски
Теперь вы знаете принцип затухающего свечения за пределами маски. Отлично, теперь давайте создадим кнопку с таким эффектом.
Делаем прямоугольник, два эллипса и текст кнопки. Расположение любое, главное чтобы границы эллипса лежали на поверхности прямоугольника одной частью и выступали за ее край другой частью.
Теперь, так же, как я показывал выше, упаковываем объекты в маску
В такой кнопке прямоугольник, который мы создаем для фона, должен быть по размеру маски, включая закругления или иные манипуляции, чтобы края прямоугольника и маски совпадали. (Для корректного внутреннего свечения по краю маски)
Прямоугольнику задаем стиль:
— Fill #$$$$$$ 1% (Любой цвет)
— Inner Shadow Blur 6 (по центру)
Также подкрашиваем наши эллипсы и задаем им эффект layer blur, и получаем такую кнопку
У самого слоя маски вы можете добавить 1 или 2 Drop Shadow, настройка по усмотрению, но я использую два слоя с blur со значением 8 и 3 (по центру).
Результат: У нас получилась святящаяся кнопка, у которой внутренние эффекты подсвечиваются снаружи, как бы создавая затухающее свечение.
Спасибо за то, что дочитали до конца, а еще лучше — проделали ради фана это всё в фигме!) Также можно настроить анимацию движения эллипсов при наведении, но это, если захотите, в другой серии. 🙂
Как сделать эффект неона в Figma
Приложение Figma не обязательно устанавливать на компьютер. Можно открыть веб-версию в браузере и работать в ней. В этом гайде мы покажем несколько простых шагов, с помощью которых можно создать эффект неоновой вывески.
Чтобы создать шаблон, на главном экране выберите Drafts → Значок + → New design file:
Научитесь создавать любой визуальный контент — от макетов сайта до полиграфии
На новом экране откроется пустое рабочее пространство:
Научитесь создавать любой визуальный контент — от макетов сайта до полиграфии
Для тренировки можно выбрать стандартную фигуру. Например, Shape tools → Star:
Изначально фигура будет черной, но цвет можно изменить в настройках справа, в блоке Stroke:
Для звезды давайте выберем желтый оттенок — #FFCF53. Чтобы создать эффект неоновой лампы, понадобится четыре копии этого объекта. У каждого и них будут свои настройки.
Как сделать визитку в Figma
Первые три фигуры будут имитировать свечение неоновой лампы, поэтому понадобится эффект размытия из настроек справа: Effects → Layer blur:
Можно выбрать такие параметры размытия:
- для первой звезды — 50;
- для второй — 25;
- для третьей — 10.
Последняя звезда будет имитировать каркас неоновой лампы, поэтому она должна быть максимально светлой. Например, подойдет светло-желтый оттенок #FBEECE:
Теперь эти четыре фигуры нужно наложить друг на друга. Снизу должен быть самый размытый слой, а впереди — светлый. Выровнять слои можно с помощью вспомогательных линий:
И в итоге мы получаем простую фигуру с эффектом неона:
Когда вы освоите простые эффекты, то со временем сможете делать более сложные и интересные проекты с неоновым эффектом:
За год количество вакансий в графическом дизайне увеличилось на 222%. Научитесь создавать любой визуальный контент на уровне middle — от макетов сайта до полиграфии.
Продвинутые эффекты в Figma: глитч, голограмма и неоновое свечение
Рассказываем, как разнообразить вёрстку с помощью стандартных средств графического редактора.
Иллюстрация: Оля Ежак для Skillbox Media
Если вы хотите добиться определённого настроения в вёрстке, стандартных теней и размытия может оказаться недостаточно. В этом вам помогут продвинутые эффекты, которые можно создать в Figma без дополнительных программ.
Рассказываем, как сделать эффекты глитча, голограммы и неоновую плашку. А ещё показываем плагин, который делает эффекты сам.
Глитч
Эффект глитча достигается за счёт смещения красного, синего и зелёного каналов RGB. Благодаря этому возникает ощущение, что картинка будто испорчена и её цвета исказились из-за программной ошибки.
В Figma этого эффекта можно добиться с помощью режимов наложения: Hue, Screen и Multiply.
Как сделать глитч
- Создайте фрейм и добавьте в него любую фигуру. Например, звезду.
- Внутри фрейма и поверх звезды добавьте прямоугольник. В настройках заливки укажите чёрный цвет, затем нажмите на иконку и укажите Hue.
- Скопируйте этот чёрный квадрат, в настройках заливки укажите красный цвет (FF0000), затем нажмите на иконку и укажите Screen.
- Создайте группу из двух квадратов и фигур и сделайте её копию.
- В копии группы у цветного слоя вместо красного цвета укажите сине-зелёный (00FFFF).
- У обеих групп в настройках Layer укажите Multiply.
- Сместите звёзды в каждой группе, чтобы возник эффект глитча.
Универсальный компонент
Чтобы не делать всё каждый раз заново, этот эффект можно превратить в компонент и использовать его с одинаковыми настройками во всём документе:
- Удалите звёзды в группах и вместо них добавьте квадраты — они должны быть больше основного фрейма и заранее смещены.
- Нажмите правой кнопкой мыши на фрейм и выберите Create component или нажмите сочетание клавиш Ctrl (⌘) + Alt (⌥) + K.
- Сделайте копию компонента и в настройках каждой фигуры в настройках заливки добавьте любое изображение — оно сразу получит эффект глитча. Смещение и интенсивность можно настроить в мастер-компоненте, который вы сделали на втором шаге.
Голограмма
Если у вас был компьютер или игровая приставка в середине нулевых, вы наверняка застали компакт-диски. Их обратная сторона переливалась от окружающего света, и за счёт этого поверхность выглядела красиво. Тот же эффект можно воспроизвести и в Figma с помощью градиентов и эффектов наложения Difference и Screen.
Этот эффект делается в два этапа: круг с цветным градиентом и дополнительные.
Круг с цветным градиентом
- Выпишите по очереди все цвета, которые будут внутри цветного круга. Например, вот эти:
2AD0CA,
E1F664,
EFB0FE,
ABB3FC,
5DF7A4,
58C4F8. - Создайте круг и в свойствах заливки вместо Solid укажите Radial. Над цветным полотном появится ещё одна цветная полоска — она отражает текущие цвета градиента и позволяет их редактировать.
- По очереди добавьте все цвета, которые вы выписали в документ. На цветной полоске они должны стоять равномерно. Чтобы добавить цвет на градиент, нажмите на любое свободное место между цветами внутри полоски.
- На самой фигуре есть образцы цветов и линия с белыми точками. Зажмите одну из точек и перетащите её на край фигуры — то же самое сделайте с другой. В результате линия должна стоять под углом примерно 45 градусов. При необходимости скорректируйте положение цветов прямо на фигуре.
Дополнительные фильтры
- В настройках заливки (Fill) нажмите на плюс и у появившегося слоя укажите непрозрачность в 100%.
- Нажмите на образец цвета и в появившемся окне вместо Linear выберите Angular.
- По очереди добавьте на градиент чёрные и белые цвета — их должно быть шесть. Все цвета должны располагаться на градиенте равномерно.
- Нажмите на иконку и укажите Difference.
- Выделите получившуюся чёрно-белую заливку. С помощью команд Ctrl (⌘) + C и Ctrl (⌘) + V и скопируйте её в ту же фигуру, чтобы у неё стало три заливки.
- Нажмите на образец цвета новой заливки, нажмите на иконку и укажите Screen. Эффект готов.
Чтобы каждый раз не делать всё это заново, создайте стиль из получившейся заливки — его можно использовать в других фигурах как заливку или обводку.
Неоновое свечение
Этот эффект используют довольно редко, так как в неправильных пропорциях он может превратить вашу вёрстку в один световой меч из «Звёздных войн». Если вы уверены, что вашу задачу может решить неон, то рекомендуем не делать его слишком насыщенным.
Этого эффекта в Figma можно добиться с помощью градиентов, и делается он в три этапа: плашка с рамкой, дополнительный свет и внешнее освещение.
Плашка с рамкой
- Создайте любую фигуру. Лучше всего для неоновой плашки подходит квадрат или прямоугольник со скруглёнными углами.
- Нажмите на образец цвета заливки этой фигуры и в появившемся окне вместо Solid выберите Linear.
- Настройте градиент: вместо первого цвета укажите 3A81BF с непрозрачностью 8%, а вместо второго — 261E33 с непрозрачностью 3%. Точки получившегося градиента перетащите на противоположные углы фигуры.
- В настройках обводки (Stroke) нажмите на плюс и укажите толщину обводки в 35 пикселей.
- Нажмите на образец цвета обводки и в появившемся окне вместо Solid выберите Linear.
- Равномерно расположите на градиенте следующие цвета и укажите их непрозрачность: FB37FF — 100%, 9B6FEE — 0%, 7B7FEA — 0%, 18B2DE — 100%.
- В блоке Effects нажмите на плюсик. У появившегося эффекта вместо Drop shadow укажите Layer blur. Нажмите на иконку и задайте размытие 6.
Дополнительный свет
- Скопируйте получившуюся фигуру.
- В новой фигуре удалите заливку фона, а в настройках Layer blur вместо 6 укажите 69.
- Скопируйте предыдущую фигуру и в настройках обводки укажите толщину в 11 пикселей.
- Нажмите на образец цвета обводки и в появившемся окне вместо всех цветов в градиенте укажите белый. Обратите внимание, что сам градиент удалять не надо, иначе у вас не получится добиться нужного эффекта.
- В блоке Effects в настройках Layer blur вместо 69 укажите 15.
Внешнее освещение
- В розовом углу получившейся плашки создайте круг и поместите его под эту плашку, чтобы он не перекрывал основной эффект.
- Нажмите на образец цвета заливки этого круга и в появившемся окне укажите цвет FB37FF, а его непрозрачность — 10%.
- В блоке Effects нажмите на плюсик. У появившегося эффекта вместо Drop shadow укажите Layer blur. Нажмите на иконку и укажите размытие на 500.
- Скопируйте получившийся круг, поместите его в противоположный синий угол и поменяйте цвет заливки на 18B2DE.
Плагин Morph
Если вы не хотите делать все эффекты самостоятельно, воспользуйтесь плагином Morph. С помощью него можно создавать отражения, глитчи, «стеклянные» плашки, делать градиенты и эффект неона.
Как пользоваться
- Скачайте плагин по ссылке.
- Создайте в Figma любую фигуру, нажмите на неё правой кнопкой мыши, перейдите в Plugins и наведите курсор на Morph.
- В выпадающем меню выберите подходящий эффект. Например, Neon.
- Плагин сразу добавит выбранный эффект на вашу фигуру и даст его отредактировать. В эффекте неона вы можете изменить его интенсивность и цвет. Настройки зависят от выбранного вами эффекта.
Больше о Figma
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.