Как повторить популярные эффекты в Figma

FigmaUX/UIВеб-дизайнПолезностиПопулярные эффекты 27.09.2021

Как повторить популярные эффекты в Figma

Привет! Сейчас тренды быстро меняются, поэтому мы решили запечатлеть самые популярные эффекты в Figma за 2021 год и собрать все туториалы по ним в одном месте! Листай и повторяй 👇

 

Градиент

Виды градиентов в figma

 

  1. Создаем фигуру, выделяем её и в правой панели напротив надписи «Fill» нажимаем на цвет.
  2. Вместо значения «Solid» ставим одно из следующих значений:
  • Linear — линейный градиент
  • Radial — радиальный градиент
  • Angular — угловой градиент
  • Diamand — градиент в виде кристалла

 

меню в фигма в разделе fill

 

В меню градиента можно настраивать цвета, прозрачность и тип градиента.

Меню цвета и прозрачности градиента

 

 

Эффект стекла

Изображение с эффектом стекла

 

  1. Создаем любой фрейм и заливаем его каким угодно цветом.
  2. Далее рисуем любую фигуру любого размера, из неё и будем делать наше прозрачное стекло.
  3. На фигуру накладываем эффект «Background blur» (размытие заднего фона).
  4. Нажав на «солнышко», выставляем значение силы размытия 15.
  5. Чтобы появился эффект матового или полуматового стекла, нужно просто изменить прозрачность заливки цвета слоя: выделяем наш квадрат и «Fill» (заливку) и уменьшаем со 100% на 30% (значение для примера, можешь регулировать на свой вкус).  

 

Неоновый текст

Картинка с неоновым эффектом

Просто используй плагин «TextNeon», и будет тебе счастье 🙂

 

Неоновые элементы

А вот тут можно использовать плагин «Morph» (для создания неонового текста он тоже подойдет). 

  1. Выбери элемент.
  2. Запусти плагин через меню/быстрый поиск.
  3. Выбери один из эффектов и нажми Apply.

Изображение неонового элемента

 

Текст по кругу

Изображение с текстом по кругу

  1. Сначала скачай плагин «to Path».
  2. Теперь на рабочем поле создай фигуру «Круг» и текст, который потом будет располагаться внутри этого круга.
  3. Открой плагин, выдели текст, круг и нажми кнопку «Link»
  4. Все, теперь твой текст отображается по кругу. Если нужно его растянуть, можешь просто отрегулировать расстояние между символами или размер шрифта.

Изображение плагина для текста по кругу

 

Ну что, всё получилось? Умничка 🙂

А на наших курсах мы и не такому учимся. Кроме умения воссоздавать такие же эффекты в Figma, ты освоишь эту программу на все 100%, научишься самостоятельно генерировать крутые идеи, воплощать их в жизнь и многому другому!

Хочешь попасть на них? — Скорее записывайся вот здесь.

Хотите быть в курсе событий?

Подпишись на e-mail рассылку! Там всё только по делу-)

    Email