UI/UX Создание эффекта стекла в Figma⁠⁠

Здравствуйте уважаемые пользователи пикабу, как быстро и легко создать эффект стекла в инструменте Figma

Если вам лень читать, то полностью проиллюстрированный пост есть у меня в инстаграме

И так начнёмс:

1. Нарисуйте фигуру

Создайте прямоугольник, зажав клавишу "R" и растянув его по нужной площади, а после  закруглите у него края, как желаете

2. Создание градиента

Создаём градиент, нажимаем на наш цвет и в появившемся окне вверху слева выбираем вместо "Solid" "Linear", а после ставим параметры как внизу

Цвет 1: FFFFFF (прозрачность 40%)

Цвет 2: FFFFFF (прозрачность 10%)

3. Блюр заднего фона

Создаём эффект background blur и ставим его интенсивность на 20

4. Добавляем окантовку для объёма

При помощи инструмента stroke, создаём обводку, делая её градиентовой по аналогии со 2-ым пунктом, а также выставляем направление градиента по диагонали и ставим другие цвета

Цвет 1: FFFFFF (прозрачность 60%)

Цвет 2: FFFFFF (прозрачность 0%)

Цвет 3: FFFFFF (прозрачность 0%)

Цвет 4: FF9C00 (прозрачность 90%)

5. Добавляем тень (если есть фон)

Создаём эффект Drop shadow и вводим параметры снизу

X: 3

Y: -2

По желанию добавляем текст, присваиваем ему цвет FFFFFF и прозрачность 70%

Наше стекло готово, можете поиграться с параметрами блюра и цветами.

Подписывайтесь на мой инстаграм @step.ui , там куда больше лайфхаков и полезной информации