Дизайн
#Руководства

Продвинутые эффекты в Figma: глитч, голограмма и неоновое свечение

Рассказываем, как разнообразить вёрстку с помощью стандартных средств графического редактора.

Иллюстрация: Оля Ежак для Skillbox Media

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

Рассказываем, как сделать эффекты глитча, голограммы и неоновую плашку. А ещё показываем плагин, который делает эффекты сам.

Глитч

Эффект глитча достигается за счёт смещения красного, синего и зелёного каналов RGB. Благодаря этому возникает ощущение, что картинка будто испорчена и её цвета исказились из-за программной ошибки.

В Figma этого эффекта можно добиться с помощью режимов наложения: Hue, Screen и Multiply.

Как сделать глитч

  1. Создайте фрейм и добавьте в него любую фигуру. Например, звезду.
  2. Внутри фрейма и поверх звезды добавьте прямоугольник. В настройках заливки укажите чёрный цвет, затем нажмите на иконку  и укажите Hue.
  3. Скопируйте этот чёрный квадрат, в настройках заливки укажите красный цвет (FF0000), затем нажмите на иконку  и укажите Screen.
  4. Создайте группу из двух квадратов и фигур и сделайте её копию.
  5. В копии группы у цветного слоя вместо красного цвета укажите сине-зелёный (00FFFF).
  6. У обеих групп в настройках Layer укажите Multiply.
  7. Сместите звёзды в каждой группе, чтобы возник эффект глитча.

Универсальный компонент

Чтобы не делать всё каждый раз заново, этот эффект можно превратить в компонент и использовать его с одинаковыми настройками во всём документе:

  1. Удалите звёзды в группах и вместо них добавьте квадраты — они должны быть больше основного фрейма и заранее смещены.
  2. Нажмите правой кнопкой мыши на фрейм и выберите Create component или нажмите сочетание клавиш Ctrl (⌘) + Alt (⌥) + K.
  3. Сделайте копию компонента и в настройках каждой фигуры в настройках заливки добавьте любое изображение — оно сразу получит эффект глитча. Смещение и интенсивность можно настроить в мастер-компоненте, который вы сделали на втором шаге.

Голограмма

Если у вас был компьютер или игровая приставка в середине нулевых, вы наверняка застали компакт-диски. Их обратная сторона переливалась от окружающего света, и за счёт этого поверхность выглядела красиво. Тот же эффект можно воспроизвести и в Figma с помощью градиентов и эффектов наложения Difference и Screen.

Этот эффект делается в два этапа: круг с цветным градиентом и дополнительные.

Круг с цветным градиентом

  1. Выпишите по очереди все цвета, которые будут внутри цветного круга. Например, вот эти:
    2AD0CA,
    E1F664,
    EFB0FE,
    ABB3FC,
    5DF7A4,
    58C4F8.
  2. Создайте круг и в свойствах заливки вместо Solid укажите Radial. Над цветным полотном появится ещё одна цветная полоска — она отражает текущие цвета градиента и позволяет их редактировать.
  3. По очереди добавьте все цвета, которые вы выписали в документ. На цветной полоске они должны стоять равномерно. Чтобы добавить цвет на градиент, нажмите на любое свободное место между цветами внутри полоски.
  4. На самой фигуре есть образцы цветов и линия с белыми точками. Зажмите одну из точек и перетащите её на край фигуры — то же самое сделайте с другой. В результате линия должна стоять под углом примерно 45 градусов. При необходимости скорректируйте положение цветов прямо на фигуре.

Дополнительные фильтры

  1. В настройках заливки (Fill) нажмите на плюс и у появившегося слоя укажите непрозрачность в 100%.
  2. Нажмите на образец цвета и в появившемся окне вместо Linear выберите Angular.
  3. По очереди добавьте на градиент чёрные и белые цвета — их должно быть шесть. Все цвета должны располагаться на градиенте равномерно.
  4. Нажмите на иконку  и укажите Difference.
  5. Выделите получившуюся чёрно-белую заливку. С помощью команд Ctrl (⌘) + C и Ctrl (⌘) + V и скопируйте её в ту же фигуру, чтобы у неё стало три заливки.
  6. Нажмите на образец цвета новой заливки, нажмите на иконку  и укажите Screen. Эффект готов.

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

Неоновое свечение

Этот эффект используют довольно редко, так как в неправильных пропорциях он может превратить вашу вёрстку в один световой меч из «Звёздных войн». Если вы уверены, что вашу задачу может решить неон, то рекомендуем не делать его слишком насыщенным.

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

Плашка с рамкой

  1. Создайте любую фигуру. Лучше всего для неоновой плашки подходит квадрат или прямоугольник со скруглёнными углами.
  2. Нажмите на образец цвета заливки этой фигуры и в появившемся окне вместо Solid выберите Linear.
  3. Настройте градиент: вместо первого цвета укажите 3A81BF с непрозрачностью 8%, а вместо второго — 261E33 с непрозрачностью 3%. Точки получившегося градиента перетащите на противоположные углы фигуры.
  4. В настройках обводки (Stroke) нажмите на плюс и укажите толщину обводки в 35 пикселей.
  5. Нажмите на образец цвета обводки и в появившемся окне вместо Solid выберите Linear.
  6. Равномерно расположите на градиенте следующие цвета и укажите их непрозрачность: FB37FF — 100%, 9B6FEE — 0%, 7B7FEA — 0%, 18B2DE — 100%.
  7. В блоке Effects нажмите на плюсик. У появившегося эффекта вместо Drop shadow укажите Layer blur. Нажмите на иконку  и задайте размытие 6.

Дополнительный свет

  1. Скопируйте получившуюся фигуру.
  2. В новой фигуре удалите заливку фона, а в настройках Layer blur вместо 6 укажите 69.
  3. Скопируйте предыдущую фигуру и в настройках обводки укажите толщину в 11 пикселей.
  4. Нажмите на образец цвета обводки и в появившемся окне вместо всех цветов в градиенте укажите белый. Обратите внимание, что сам градиент удалять не надо, иначе у вас не получится добиться нужного эффекта.
  5. В блоке Effects в настройках Layer blur вместо 69 укажите 15.

Внешнее освещение

  1. В розовом углу получившейся плашки создайте круг и поместите его под эту плашку, чтобы он не перекрывал основной эффект.
  2. Нажмите на образец цвета заливки этого круга и в появившемся окне укажите цвет FB37FF, а его непрозрачность — 10%.
  3. В блоке Effects нажмите на плюсик. У появившегося эффекта вместо Drop shadow укажите Layer blur. Нажмите на иконку  и укажите размытие на 500.
  4. Скопируйте получившийся круг, поместите его в противоположный синий угол и поменяйте цвет заливки на 18B2DE.

Плагин Morph

Если вы не хотите делать все эффекты самостоятельно, воспользуйтесь плагином Morph. С помощью него можно создавать отражения, глитчи, «стеклянные» плашки, делать градиенты и эффект неона.

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Создайте в Figma любую фигуру, нажмите на неё правой кнопкой мыши, перейдите в Plugins и наведите курсор на Morph.
  3. В выпадающем меню выберите подходящий эффект. Например, Neon.
  4. Плагин сразу добавит выбранный эффект на вашу фигуру и даст его отредактировать. В эффекте неона вы можете изменить его интенсивность и цвет. Настройки зависят от выбранного вами эффекта.

Самоучитель по Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать

Курс

Figma с нуля до PRO

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

Узнать про курс
Обучение: Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована