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

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

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

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

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

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

1. Нарисовать линию

Нарисуйте линию с помощью Инструмент «Линия» (л). Чтобы линия оставалась горизонтальной, удерживайте Сдвиг во время его рисования. Выберите цвет линии, щелкнув цветной квадрат под Инсульт пока линия выбрана.

Цвет должен быть достаточно темным, чтобы контрастировать с фоном, но он также должен хорошо сочетаться с цветами вашей презентации. Вы можете используйте Adobe Illustrator для создания цветовой палитры чтобы найти цвета, которые работают вместе.

Измените ширину линии в настройках Обводки; щелкните значок с тремя горизонтальными линиями и увеличьте число до желаемой толщины. Чтобы получить закругленные концы, щелкните раскрывающийся список с горизонтальной линией в меню «Обводка» и прокрутите вниз раскрывающегося меню, чтобы найти параметр для закругленных концов.

2. Нарисовать круг

Нарисуйте небольшой круг, используя Эллипс Инструмент (О). Удерживайте Сдвиг при рисовании круга, чтобы сделать его идеально сферическим. Ваш круг должен быть достаточно маленьким, чтобы его можно было использовать в качестве маркера, но достаточно большим, чтобы матовое стекло было видно.

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

Затем измените непрозрачность следующий на Наполнять где-то между 40% и 70%. Вы хотите иметь возможность видеть дизайн за кругом, но при этом видеть цвет, которым вы заполнили круг.

3. Добавьте размытие фона

Это та часть, которая придает матовый эффект вашей фигуре. Выберите круг и перейдите к Последствия. Эффект по умолчанию Тень, наведите на него курсор и щелкните появившуюся стрелку. Выбирать Размытие фона.

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

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

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

Добавьте изящный минимализм в свои проекты с эффектом матового стекла

Эффект матового стекла в Figma — это простой способ добавить немного элегантного стиля к простым аспектам дизайна. Вы можете использовать эффект матового стекла разными способами, например, в виде полноцветных панелей, строк поиска или окон конфиденциальности поверх дизайна. Попробуйте добавить границу, сделать градиент или поместить матовый слой между другими слоями для некоторой текстурной разницы.

Как создавать и добавлять мокапы в свои проекты Figma с помощью плагинов

Читать дальше