Как сделать глассморфизм в фигме

Использование стекломорфизма при создании макета в Figma

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

Что представляет собой стекломорфизм

Итак, Glassmorphism (Glass effect или стекломорфизм) – это интересный и привлекающий внимание человека эффект, при котором создается размытый фон или его часть. Удобней всего создавать такой стиль в программе Figma, которая является удобным и практичным приложением. Данным ресурсом пользуется большое число разработчиков и web-дизайнеров, поскольку приложение отличается с одной стороны, простотой, а с другой, широкой функциональностью.

Практика показывает, что стекломорфизм в Фигме открывает очень большие возможности в плане уникального дизайнерского оформления web-сайтов. Широкие функциональные возможности позволяют активно экспериментировать с цветом, глубиной и степенью прозрачностью картинки, а также геометрическими фигурами. Для лучшего понимания такого эффекта, стоит описать его основные признаки:

Размытая прозрачность, с помощью которой создается многоуровневый эффект.
Наличие ярких цветов.

Расположение полупрозрачных объектов с тонкой и достаточно светлой границей, что позволяет имитировать край стекла.

Примечательно, что в стилистике стекломорфизм может использоваться в самых разных вариантах, поскольку хорошо сочетается с иллюстрациями, картинками, фотографиями и различными элементами интерфейса. Как глубина, так и вложенность могут быть самыми разными, однако обычно web-дизайнеры стараются использовать обычное размытие, создавая «матовое стекло».

Стекломорфизм аппелирует к ассоциациям, эмоциям и чувствам человека

Что дает эффект стекла и как его использовать в Фигме

Специалисты отмечают, что глассморфизм делает сайт более легким и «воздушным», поскольку при этом располагается минимум элементов. В целом стекло вызывает у человека приятные ассоциации, подчеркивая открытость продукта или услуги, а это позволяет быстрее сформировать доверие к производителю.

Примечательно, что стекломорфизм – это не просто стилизация интерфейса под стекло с помощью теней, натуральных материалов и объемных фигур. Это нечто более интересное и необычное, что дает особое восприятие картинки посетителем, вызывая у них определенные ассоциации. Стоит отметить, что глассморфизм – это не технический, а именно дизайнерский прием, с помощью которого неподготовленные пользователи могут привыкнуть к новому продукту.

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

Пример аккуратного использования Glass effect

Наилучшим образом такой эффект смотрится в качестве фона для карточек и уведомлений. При этом важно с самого начала убедиться в том, что текст на таком фоне будет читаться однозначно, не вызывая никаких затруднений у посетителя.

Как использовать глассморфизм в Фигме

Стекломорфизм в Фигме открывает широкие возможности, что обуславливается многофункциональностью программы. Для начала дадим несколько важных рекомендаций, приняв во внимание которые можно избежать ошибок и неточностей:

Чем ближе плашка располагается к фону, тем меньше формируется уровень его размытия.

Удаленность «матового стекла» от фона прямо пропорционально влияет не только на силу размытия, но также на степень прозрачности.

Если плашка располагается достаточно далеко от фона, то прозрачность естественным образом должно уменьшаться.

При добавлении эффекта шума можно получить повышенную реалистичность изображения.

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

Пример того, как меняется уровень восприятия карточки в зависимости от степени прозрачности

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

Разработка стилевых элементов стекломорфизма в Фигме

Главным преимущества программы Фигма является то, что эффект стекла можно уверенно реализовать всего за несколько действий. Для простоты описания дадим пример, как это оформить проще всего, разбив процесс на этапы:

1. Разрабатываем фрейм, помещая в него прямоугольник с простой картинкой.

2. Добавляем эффект, для чего открываем панель Effect -> Layer Blur (выбираем значение, к примеру, 100)

3. Создаем «матовое стекло» для чего вводим данные в опциях Fill (Linear) и Stroke (FFFFF). Ставим заливку Blur со значением 12

4. Для проверки «эффекта стекла», нанесем на рисунок 2 круга, один из которых будет перекрывать прямоугольник снаружи, а второй — находиться за ним. При этом градиенты кругов будут по цвету такими же, как и задний фон.

Чтобы добиться такого эффекта, в свойствах Layers выбираем опции «объект перед стеклом» для одного круга и «объект за стеклом» для другого, соответственно.

Таким образом, всего за 4 шага любой web-дизайнер может легко создать дизайн-макет с эффектом глассморфизма. Здесь нет ничего сложного, поэтому с реализацией уверенно справиться даже начинающий дизайнер.

Выводы

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

Эффект стекла в Figma (glassmorphism)

Эффект на объекте, как будто он расположен за стеклом, называется — глассморфизм (glassmorphism).

Чтобы создать данный эффект в Figma нам потребуется:

1. Создадим фрейм, внутри него прямоугольник, который зальем случайной картинкой
2. Добавляем эффект к нашей картинке через панель Effect -> Layer Blur (Значение 100 вариативно, можете выбрать другое)
3. Создаем «Стекло». Я не буду указывать все параметры в тексте, посмотрите на картинку и введите тоже самое. Для вашего удобства я отметил все свойства стрелочками
4. Добавляем объект на передний и задний фон, относительно «стекла», чтобы проверить работоспособность. Для этого я создал два круга с градиентом, как у фона. Будьте внимательны и располагайте слои в левой панели правильно

Поздравляю мы сделали, сложный для многих, эффект всего за 4 шага.

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.

Как создать эффект стекла в Фигме

Раз уж я в своей работе перешла на Фигму, то буду иногда публиковать небольшие уроки по ней здесь в блоге. Думаю, многим будет интересно. Без воды, простые понятные руководства. И начну с простого урока, как легко создать эффект стекла в Фигме.

Эффект стекла в Фигме

(Все картинки в статье кликабельны) Для начала создадим фрейм, допустим 800х500 пикселей и зальем его каким-нибудь цветом. Например зеленым. Теперь внутри фрейма создадим прямоугольник или квадрат. Из него мы будем делать наше прозрачное стекло. Я создам квадрат 300х300px белого цвета. Добавим для этого слоя эффект Backgound Blur (размытие заднего фона). Затем, нажав на «солнышко» выставим силу размытия на 15 Все почти готово. Для наглядности, давайте добавим на задний фон какую-нибудь картинку или текст, чтобы эффект был более заметен. Я добавлю мужичка под деревом на закате. Закат пока не видно )) Но это пока… А теперь самое интересное. Чтобы появился эффект матового или полупрозрачного стекла, в Фигме достаточно изменить прозрачность заливки цвета слоя. Выделяем наш квадрат и Fill (заливку) уменьшим со 100% до 10% Главное не перепутать заливку с прозрачностью слоя. Если вы уменьшите процент в поле Layer, то такого эффекта не получится. Теперь можно поиграться с параметрами чтобы сделать стекло более матовым или наоборот…

Дополнительные улучшения

Еще можем добавить немного реалистичности и объема. Скруглим углы у нашего квадрата. Я поставлю радиус 9. Затем воспользуемся плагином Isometric. Уверена, что вы умеете искать и устанавливать плагины, поэтому этот момент объяснять не буду. Запускаем плагин, выделяем наш квадрат и жмем любую из кнопок в окошке плагина. Изометрия есть. Теперь сделаем наше стеклышко чуть толще. Для этого выбираем группу, в которой лежит наш изометрический квадрат и добавим этой группе пару эффектов. Первый эффект вот с такими параметрами. Стекло приобретет объем. Снова в эффектах нажимаем плюсик и добавим эффект падающей тени. Здесь уже цвет тени и ее размытие подбирайте на ваше усмотрение. Все зависит от вашего фона и задумки. У меня в этот раз без особой идеи получилось вот так: Главное, чтобы вам было понятно, как это работает. Если понравился урок, дайте знать в комментариях. В ближайшее время хочу рассказать, как создавать изометрию в Фигме самостоятельно без плагинов.

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

UX/UI Веб-дизайнер. Занимаюсь дизайном и разработкой сайтов для бизнеса более 6 лет. Связаться со мной можно через страницу Контакты Яна Ходкина

Эффект матового стекла в Figma

Полупрозрачные фигуры, или глассморфизм в дизайне не выходят из трендов уже несколько лет, и в 2023 году эффект матового стекла будет привлекать всё больше людей. Если Вы хотите, чтобы Ваши проекты были современными и привлекательными, то умение создавать матовое стекло в Figma пригодится в работе.

Во-первых, создаём любой элемент (в нашем случае используем прямоугольник) и позади него небольшие элементы различных цветов (это может быть и любое изображение). Главный элемент, из которого собираемся создавать матовое стекло, заливаем белым цветом: #ffffff

Во-вторых, уменьшаем непрозрачность заливки нашего элемента, из которого хотим сделать матовое стекло. Выделяем наш элемент и в поле Fill уменьшаем непрозрачность со 100% до 10%. Важно уменьшить непрозрачность самой заливки, а не всего слоя с элементом. Если снизить непрозрачность в поле Layer, то эффект матового стекла не проявится.

В-третьих, добавляем размытие заднего фона. Для этого в поле Effects необходимо добавить эффект Background blur и задать подходящую силу размытия (у нас 15).

Дополнительно можно поиграться с параметрами непрозрачности заливки и размытием заднего плана, чтобы сделать стекло более матовым или наоборот.

Следующий этап: добавление внутренней тени на матовом стекле, чтобы придать объем и реалистичность. С тенями также можно играться, в зависимости оттого, какой эффект нужен, какой фон и какие цвета использованы. Мы добавили внутреннюю тень (Inner shadow) со следующими параметрами:

Вот такой результат у нас вышел:

Если понравился лайфхак, читайте наши статьи по Figma и Photoshop и создавайте действительно красивые и уникальные проекты!

Смотрите похожие статьи

Как сделать круговую диаграмму в Figma

Стили и направления веб-дизайна в 2024 году

Логотип SILVERWEB в стилистике известных компаний

Готовы предоставить полную консультацию по условиям и
всем интересующим вопросам работы с нашей компанией!

Получить консультацию

Весь спектр услуг маркетинга и рекламы: лидогенерация, SEO, контекстная реклама, таргетированная реклама, создание и правка сайтов, управление репутацией, внедрение crm-систем и многие другие услуги

• Минск, пр-т Независимости 169, 805Ю, БЦ «XXI век»
• +375 (29) 390-56-65
• zakaz @ silverweb.by

Отвечаем
в мессенджерах:

Частное Предприятие «Сильвервеб ПРО» © 2017-2024

5 на основе 120 отзывов

Заявка на обратный звонок

Частное Предприятие «Сильвервеб ПРО» с уважением относится к правам наших клиентов. Мы безоговорочно признаем важность конфиденциальности личной информации и соблюдаем правила защиты персональных данных от несанкционированного доступа третьих лиц (защита персональных данных).

Заполнение формы с контактными данными означает согласие с настоящей Политикой конфиденциальности и указанными в ней условиями обработки персональной информации.

Ниже приводится информация об обработке персональных данных.

1. Персональные данные. Цель сбора и обработки персональных данных.

1.1. Вы всегда можете посетить данную страницу, не раскрывая никакой персональной информации.

1.2. Под персональными данными понимается любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу.

1.3. Наше агентство собирает и использует персональные данные, необходимые для выполнения Вашего запроса, это – имя, телефон и электронный адрес.

1.4. Наше агентство не проверяет достоверность персональных данных, предоставляемых физическими лицами, и не проверяет их дееспособность.

2. Условия обработки персональной информации покупателя и её передачи третьим лицам.

2.1. При обработке персональных данных наших клиентов мы руководствуемся законом РБ «Об информации, информатизации и защите информации».

2.2. В отношении персональной информации покупателя сохраняется ее конфиденциальность.

2.3. Наше агентство не передает персональные данные третьим лицам.

3. Меры, применяемые для защиты персональной информации пользователей.

Наше агентство принимает необходимые и достаточные организационные и технические меры для защиты персональной информации пользователя от неправомерного или случайного доступа, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий с ней третьих лиц.