
Обновлено:
Эффект стекла в Figma (glassmorphism)
Эффект на объекте, как будто он расположен за стеклом, называется - глассморфизм (glassmorphism).
Чтобы создать данный эффект в Figma нам потребуется:
-
Создадим фрейм, внутри него прямоугольник, который зальем случайной картинкой
-
Добавляем эффект к нашей картинке через панель Effect -> Layer Blur (Значение 100 вариативно, можете выбрать другое)
-
Создаем «Стекло». Я не буду указывать все параметры в тексте, посмотрите на картинку и введите тоже самое. Для
вашего удобства я отметил все свойства стрелочками
-
Добавляем объект на передний и задний фон, относительно «стекла», чтобы проверить работоспособность. Для этого я
создал два круга с градиентом, как у фона. Будьте внимательны и располагайте слои в левой панели правильно
Поздравляю мы сделали, сложный для многих, эффект всего за 4 шага.
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.