Как сделать эффект стекла в Figma

Краткая и исчерпывающая инструкция по созданию эффекта матового стекла в Figma.

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

Нам понадобятся

Background blur – как использовать

Как добавить шум в Figma [Плагин]

Итак, сделаем иконку с бэкграундом.

Шаг 1. Добавляем фрейм, в котором будет размещаться всё остальное.

Сделаем его темным, чтобы наше стекло лучше смотрелось. Я добавил фрейм 512 на 512, залил его #1A1818 и назвал Body.

Шаг 2. Фрейм дива иконки.

Добавим фрейм, который в верстке будет div’ом для нашей иконки. Я добавил фрейм 256 на 256, вложенный в Body и разместил его посередине. Назовем его Div.

Шаг 3. Создаем слой с Background Blur

На этом этапе мы наконец переходим к сути: добавляем шейп, закрывающий всю площадь фрейма Div во фрейм Div. Этот слой будет размывать за собой элементы для создания «мутного» эффекта. Назовем его Back Blur.

Шаг 4. Добавляем к этому слою эффект Background Blur

Выделяем наш квадрат Back Blur и в боковой панели в разделе Effects жмем на плюс, после чего в появившемся дропдауне выбираем Background Blur. На данном этапе визуально ничего не изменилось, так как наш Back Blur имеет 100% заливку. Поэтому —

Шаг 5. Делаем непрозрачность заливки Back Blur ниже 100%

Внимание: надо указать прозрачность именно для поля Fill, а не Layer, иначе эффект будет применяться некорректно.

Шаг 6. Выставляем Blur для эффекта Background Blur

Выделяем квадрат Back Blur, кликаем на иконку с лампочкой рядом с эффектом Background Blur и в открывшемся окне выставляем Blur где-нибудь на 150 (экспериментируйте для достижения художественного эффекта).

Шаг 7. Добавляем элементы под слой Back Blur

Я добавил эллипс с цветом #B0CAF0. Обратите внимание, что Ellipse находится в том же фрейме, что и Back Blur, но находится ниже в древе слоев.

Я добавил еще один эллипс с цветом #CCB0F0 рядом с Ellpise для получения более интересного градиента.

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

Шаг 7. Добавим шум

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

Полученный слой называем Noise и размещаем в наш фрейм Div над Back Blur. Таким образом Noise не будет размытым.

Шаг 8. Устанавливаем непрозрачность слоя Noise на 10% / Normal.

Шаг 9. Быстренько добавляем иконку в Div

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

Шаг 10. Сделаем округление для фрейма Div

Данные манипуляции по вашему вкусу, но в любом случае убедитесь, что выставлен чекбокс Clip Content для фрейма Div — содержимое за пределами фрейма не отображается.