Все большую популярность набирает эффект матового стекла - Frosted glass Effect, который можно реализовать в Figma буквально за 5 шагов.
Шаг 1
Создай прямоугольник произвольной формы c заливкой(Fill) FFFFFF (чистый белый цвет).
Шаг 2
Измени прозрачность у прямоугольника и сделай ее 1%, также добавь размытие фона(Background blur) со значением 100.
Шаг 3
Добавь последовательно шесть теней(Inner shadow) к прямоугольнику:
- Тень 1: x=0, y=1, Blur=40, Spread=0, цвет=E3DEFF, прозрачность=20%
- Тень 2: x=0, y=4, Blur=18, Spread=0, цвет=9A92D2, прозрачность=30%
- Тень 3: x=0, y=98, Blur=100, Spread=-48, цвет=CAACFF, прозрачность=30%
- Тень 4: x=0, y=-82, Blur=68, Spread=-64, цвет=604490, прозрачность=30%
- Тень 5: x=0, y=7, Blur=11, Spread=-4, цвет=FFFFFF, прозрачность=100%
- Тень 6: x=0, y=39, Blur=56, Spread=-36, цвет=FFFFFF, прозрачность=50%
Шаг 4
Теперь добавь обводку(Stroke) c прозрачностью 70%, толщиной 4px и радиальной(Radial) заливкой. Для заливки первый центральный цвет будет 9845FE полностью непрозрачный, а вторым цветом будет FFF9F9 полностью прозрачный.
Шаг 5
Теперь для усиления матовости наложи сверху на прямоугольник новый слой с картинкой белого шума. И теперь примени к этому слою наложение Overlay и сделай непрозрачность 30%
На этом завершили создание элемента с Эффектом матового стекла в Figma :)
#figma #figmadesign #uxdesign #uxui #uiux #figmaeffect #webdesign #вебдизайн #фигма #матовоестекло