...

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




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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


🪣 Выбираем самые полезные плагины

По теме: