![Миниатюра Делаем красивый эффект просмотра объекта через стекло в Figma. На практике такой эффект называется glassmorphism. 50+ бесплатных шаблонов, 40+ уроков, 20+ статей. Переходите и изучайте!](/images/articles/2021/2021-06-30-effekt-stekla-v-figme/example.webp)
Обновлено:
Эффект стекла в Figma (glassmorphism)
Эффект на объекте, как будто он расположен за стеклом, называется - глассморфизм (glassmorphism).
Чтобы создать данный эффект в Figma нам потребуется:
-
Создадим фрейм, внутри него прямоугольник, который зальем случайной картинкой
-
Добавляем эффект к нашей картинке через панель Effect -> Layer Blur (Значение 100 вариативно, можете выбрать другое)
-
Создаем «Стекло». Я не буду указывать все параметры в тексте, посмотрите на картинку и введите тоже самое. Для
вашего удобства я отметил все свойства стрелочками
-
Добавляем объект на передний и задний фон, относительно «стекла», чтобы проверить работоспособность. Для этого я
создал два круга с градиентом, как у фона. Будьте внимательны и располагайте слои в левой панели правильно
Поздравляю мы сделали, сложный для многих, эффект всего за 4 шага.
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.