Пошаговый гайд со скринами

Привет! В этом небольшом гайде я покажу, как сделать такой эффект в Figma за пару минут. Эффект стекла круто применять для оформления соцсетей, в иконках и на сайтах... Да вы и сами разберетесь, где вам это пригодится! Поехали!

Сделаем фрейм необходимого вам размера. В примере я выбрал размеры 1920х1080 рх. Заполним его цветным градиентом для наглядности.

Теперь разместим на фоне фотографию, чтобы наш эффект стекла был более заметен. Для этого создадим прямоугольник со скруглёнными углами, разместим его во фрейме и поместим в него фотографию из плагина Unsplash:

Поверх нашего бэкграунда создаем еще один прямоугольник со скругленными углами. Он и будет нашим «стеклом». Размещаем его в любом месте на макете:

Теперь нам нужно поменять в нем заливку со сплошного цвета на радиальный градиент. Для этого в поле Fill нажимаем на квадрат с цветом и меняем Solid на Radial:

Получится нечто подобное:

Ползунки с цветом, которые отобразились на макете, нужно передвинуть. Расположим их так:

Готово. Можем закрыть вкладку с заливкой.

Выберем нашу плашку и в поле Effects создадим эффект Background blur. Для этого нажмем на «+», и затем в выпадающем списке выберем соответствующий эффект. Теперь, нажав на «солнышко», мы можем выставить значения размытия. Установим, например, 44.

Получим вот такой результат:

Изменяя параметр размытия, в эффекте Background blur, вы сможете регулировать степень того, насколько ваше «стекло» искажает изображение, находящееся сзади него.

Нашему стеклу нужно добавить объём, сделаем это с помощью обводки. В поле Stroke нажмем на «+» и создадим новую обводку. Здесь нам нужно её настроить: поменяем стиль заливки обводки со сплошного цвета на радиальный градиент, а так же выберем нужный нам цвет.

Нажав на черный квадрат, откроется меню с настройками. Меняем тип заливки точно так же, как в случае с плашкой: вместо Solid выбираем Radial

Теперь поменяем цвет блика. У нас есть две точки на градиенте: одна со 100% непрозрачности, а вторая полностью прозрачная. Эти точки находятся в верхней панели настройки градиента:

Выберем левую полностью непрозрачную точку, и поменяем в ней цвет с чёрного на светло-красный:

Теперь правую полностью прозрачную точку уведем в белый цвет:

После этого расположим наши точки градиента на плашке вот таким образом:

Завершим настройки нашей обводки. Положение изменим с Inside на Outside, и зададим толщину в 2-4 пикселя на свой вкус.

Применим настройки и получим нечто подобное:

У нас появился блик света в левом верхнем углу стеклянной плашки, который постепенно сходит на нет.

Если у вас блик отображается не очень явно, то в настройках градиента обводки сделайте полностью залитую точку более светлой.

Теперь создадим рефлекс света в правом нижнем углу. Для этого повторим все описанные выше действия с обводкой, поменяв две переменные. Вместо красного цвета используем синий, и расположим градиент зеркально.

1. Создаем обводку Stroke, нажав на "+"

2. Меняем стиль заливки с Solid на Radial

3. Полностью непрозрачный цвет в градиенте делаем светло голубым

4. Полностью прозрачный цвет делаем белым

5. Располагаем градиент на плашке так, как это показано на скриншоте

Интенсивность обеих обводок настроим с помощью непрозрачности:

Нажмем правой кнопкой мыши на нашу плашку, и выберем Plugins -> Find more plugins

В появившемся окне пишем Noise и запускаем этот плагин:

Откроется окно настроек шума. Выберем размер поля побольше, чем значения по умолчанию, а ползунками настроим шум так, как нам нравится. В конце нажмем на «+», чтобы добавить шум. Затем плагин можно закрыть.

Теперь в поле Fill у нашего прямоугольника появился еще один параметр заливки — шум. Поменяем у него режим наложения со стандартного на Overlay, и установим непрозрачность в районе 10-13%:

Готово!

Теперь передвиньте ваш стеклянный элемент в любое место на макете и добавьте текст! А еще напишите в комментариях, всё ли в статье было понятно. Спасибо за прочтение!