Как создать эффект матового стекла в Figma

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

Матовое стекло в Figma

Вот видеоверсия этого быстрого совета. Присоединяйтесь к нам на нашем канале Envato Tuts + YouTube:

Вот эффект, к которому мы стремимся:

1. Начните с изображения и прямоугольника

Добавьте изображение на холст, затем нарисуйте прямоугольник поверх.

Установите заливку прямоугольника на нужный вам цвет (я выберу белый #ffffff).

2. Добавление эффекта

Выделив прямоугольник, уменьшите его непрозрачность до 20% и затем добавьте эффект на панели свойств под ним. Сделайте эффект Размытие фона и, щелкнув диск слева от элемента управления эффектом, примените любое значение, которое вы хотите (100 на самом деле работает довольно хорошо).

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

Figma Frosting Complete!

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

• 
  Эскиз
  Эскиз за 60 секунд: создание эффекта матового фона
  Ади Пурдила
• 
  CSS
  Два способа создания эффекта матового стекла в CSS
  Ади Пурдила
• 
  Figma
  Краткое руководство по настройкам заливки изображения в Figma
  Ади Пурдила
• 
  Figma
  4 способа изменения размера элементов в Figma
  Ади Пурдила