Найти в Дзене

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

Figma - это очень удобный графический онлайн-редактор для совместной работы, в котором можно создавать прототипы сайтов, приложений, простуа анимацию и обсудить правки в реальном времени.
Оглавление

Figma - это очень удобный графический онлайн-редактор для совместной работы, в котором можно создавать прототипы сайтов, приложений, простуа анимацию и обсудить правки в реальном времени.

Многие дизайнеры пользуются этим редактором и знакомы с ним, поэтому не будем углубляться в разбор интерфейса.

Итак, давайте перейдем к созданию модного эффекта стекла.

1. Создаем рабочую область (фрейм) и саму фигуру будущего "стекла"

Первое что мы должны сделать - это создать рабочу область (любой размер) и зальем ее любым цветом. В нашем случае черным.

Далее внутри фрейма создаем область: прямоугольник/квадрат/круг...что угодно. Цвет фигуры - белый, либо градиент из белого в прозрачный. Она и будет нашим будущим стеклом.

2. Применяем эффект размытия

Справа от нашей рабочей области находится панель редактирования. Находим графу "Effects" и выбираем "Backgound Blur" - т.е. размытие фона.

Далее регулируем силу размытия, нажав на "Солнышко" (рис.2). Введем, к примеру, 40% (значение может быть любым).

3. Добавляем небольшую обводку

Далее добавим обводку. В нашем случае толщина 3 px, цвета обозначила на рисунке, но могут быть любыми.

-3

4. Добавляем какой-то цветной фон, чтобы было видно результат

В качестве фона может быть текст/объект, что угодно.

Я добавила еще пару деталей, чтобы получилось похоже на банковскую карту+ немного скруглила углы.

-4

Вот такой интересный эффект выходит:)

-5

Надеюсь у вас тоже все получилось!