Как сделать эффект матового стекла в фигме
Эффект матового стекла, также известный как эффект "морозного" или "размытого" стекла, является фундаментальным элементом современного дизайна интерфейсов. Его визуальная суть заключается в имитации полупрозрачной поверхности с легким размытием, сквозь которую просвечивает фоновое содержимое.
Этот прием создает ощущение глубины, иерархии и визуальной сложности, позволяя разделять слои контента, не перегружая пространство сплошными цветными блоками. Популярность эффекта резко возросла с появлением дизайн-систем, таких как Apple's iOS и macOS, где он активно используется для панелей, меню и модальных окон.
В Figma, как в мощном векторном редакторе, реализация этого эффекта опирается не на магические кнопки, а на осознанное комбинирование встроенных инструментов: размытия, прозрачности и наложения. Понимание каждого шага процесса позволит вам не просто скопировать стиль, но и адаптировать его под конкретные нужды вашего проекта, контролируя степень размытия, цветовой оттенок и общую эстетику.
Подготовка базового фона и элемента
Перед применением каких-либо эффектов необходимо создать сцену, на которой будет разворачиваться весь визуальный механизм. Эффект матового стекла по своей природе вторичен - он зависит от того, что находится позади него.
Следовательно, первый шаг - создание или выбор достаточно детализированного и контрастного фона. Это может быть фотография, градиент, текстура или просто набор разноцветных фигур. Важно, чтобы фон был неоднородным, иначе размытие будет незаметным.
Затем поверх этого фона создается фигура (прямоугольник, скругленный прямоугольник, круг и т.д.), которая и станет нашим "стеклом". Именно к этому элементу будут применяться дальнейшие стили.
Рекомендуется сразу задать ему необходимые размеры и положение, так как последующее размытие может визуально смещать границы. На этом этапе цвет заливки самой фигуры не имеет критического значения, но для удобства можно задать нейтральный серый.
Применение фонового размытия
Сердце эффекта матового стекла - это размытие. В Figma для этой цели существует два основных типа размытия в панели эффектов (Effects): Layer Blur и Background Blur. Ключевое различие между ними принципиально для нашего случая. Layer Blur размывает саму фигуру-объект, ее текстуру и границы, но не затрагивает контент под ней.
Background Blur, напротив, игнорирует саму фигуру и размывает только область фона, которая находится прямо под этим объектом. Именно это свойство делает Background Blur идеальным инструментом: он создает иллюзию, что под элементом находится размытая копия фона, а сам элемент является полупрозрачным фильтром.
В панели Effects необходимо нажать «+», выбрать «Background Blur» и начать регулировать значение. Стартовый диапазон для выраженного, но не чрезмерного эффекта - от 15 до 40 единиц. Конкретное значение зависит от плотности фона и желаемой степени "читаемости" содержимого сквозь стекло.
Настройка прозрачности и заливки элемента
После применения размытия элемент, скорее всего, все еще будет выглядеть как сплошная цветная фигура с размытым фоном вокруг. Чтобы раскрыть размытый фон под ним и создать ощущение стекла, необходимо работать с прозрачностью. Есть два основных подхода. Первый - напрямую снизить непрозрачность (Opacity) самого слоя с фигурой в панели Layers.
Это глобально повлияет на всю фигуру и ее эффекты. Второй, более гибкий и рекомендуемый метод - работа с заливкой (Fill). Следует добавить к фигуре заливку (например, белый цвет) и затем отрегулировать непрозрачность именно этой заливки, оставив непрозрачность слоя на 100%. Это позволяет независимо управлять прозрачностью цвета и эффектами.
Для светлого матового стекла используется белая заливка с непрозрачностью в диапазоне 10–30%. Для темного варианта - черная или темно-серая заливка с аналогичной или чуть более высокой прозрачностью. Именно эта полупрозрачная заливка, наложенная на размытый фон, и создает характерный "матовый" оттенок.
Добавление границы для улучшения краев
Когда полупрозрачный объект накладывается на сложный фон, его края могут визуально "растворяться" и терять четкость, особенно если фон имеет схожий световой тон.
Чтобы элегантно отделить "стекло" от фона и усилить ощущение физической толщины поверхности, используется тонкая граница (Stroke). Рекомендуется добавить обводку внутрь (Inside position) толщиной 1 пиксель.
Использование режимов наложения как альтернативы
В некоторых сценариях для достижения более сложных или специфичных визуальных результатов вместо простой регулировки непрозрачности заливки можно экспериментировать с режимами наложения слоя (Blend Modes).
Эти режимы математически определяют, как пиксели текущего слоя взаимодействуют с пикселями слоев beneath. Для эффекта матового стекла особенно полезны режимы, которые осветляют или затемняют фон. Overlay или Soft Light могут создать более динамичное и контрастное взаимодействие с фоном.
Lighten или Screen (с белой заливкой) дадут яркий, воздушный эффект. Darken или Multiply (с темной заливкой) создадут глубокое, затемненное стекло. Использование Blend Modes - это продвинутый метод, который требует тестирования на конкретном фоне, так как результат сильно зависит от исходных цветов.
Часто наиболее убедительный результат дает комбинация: применение Background Blur, затем добавление заливки с низкой непрозрачностью и, наконец, эксперимент с режимами наложения для этой заливки.
Создание темной темы эффекта
Адаптация эффекта под темную тему интерфейса следует той же логике, но с инверсией ключевых цветовых параметров. Основная заливка фигуры меняется с белой на черную или очень темно-серую. При этом ее непрозрачность, как правило, требуется увеличить (до 20–40%), чтобы обеспечить достаточный контраст и затемнение на темном фоне.
Значение Background Blur может остаться прежним. Важнейшая корректива касается обводки: для темного стекла тонкая внутренняя граница (1px Inside) должна быть светлой (белый или светло-серый) с минимальной непрозрачностью (5-15%). Эта светлая линия имитирует подсветку края стекла, мягко отделяя его от общего темного фона.
Такой подход создает эффект тонированного или затемненного стекла, который органично вписывается в ночные и темные темы современных приложений.
Принципы создания темного варианта матового стекла остаются неизменными, меняются лишь параметры цвета. Вместо белой полупрозрачной заливки применяется черная или темно-серая (например, #000000). Непрозрачность этой заливки может варьироваться, но часто для достижения достаточного контраста на темном фоне ее требуется повысить до 20–40%. Значение Background Blur может остаться в том же диапазоне.
Ключевое отличие - в настройке обводки. Здесь также применяется тонкая внутренняя граница в 1px, но ее цвет должен быть светлым (белый или светло-серый) с минимальной непрозрачностью (5-15%), чтобы мягко подсветить края стекла на темном фоне. Такой подход создает эффект затемненного, тонированного стекла, который широко используется в ночных или темных темах интерфейсов.
Добавление тени и текстуры
Базовый эффект готов, но несколько дополнительных штрихов могут поднять его реалистичность и интеграцию в интерфейс на новый уровень. Во-первых, рассмотрите добавление тени (Drop Shadow). Вместо тяжелой, сильно смещенной тени используйте мягкую, едва заметную тень с минимальным смещением (X: 0, Y: 1-2, Blur: 4-6, Spread: 0).
Цель - не создать ощущение "парящего" объекта, а добавить едва уловимую глубину и отделить слой стекла от фона по тону. Во-вторых, для имитации микро-текстуры реального матового или сатинированного стекла можно добавить вторую, очень слабую заливку в виде шума (Noise).
Для этого создайте дополнительную заливку (градиент или цвет), установите ее непрозрачность на 1-3%, переключите тип заливки на «Image», выберите встроенную текстуру Noise с минимальным контрастом или загрузите свою. Этот микрошум разбивает идеально гладкий градиент, делая материал более осязаемым и цифровым.
Вывод
Освоив технику создания эффекта матового стекла, вы получаете мощный инструмент для формирования глубины и иерархии в интерфейсе. Однако его ценность многократно возрастает при правильной систематизации.
Превратите готовый элемент в Component, чтобы обеспечить единообразие и легкое обновление во всем проекте. Ключевые параметры (заливка, обводка, эффект размытия) стоит сохранить как Color Styles и Effect Styles для использования в библиотеке дизайн-системы. Помните, что этот эффект ресурсоемок для рендеринга, и его избыточное применение может привести к визуальному шуму.
Используйте его целенаправленно для ключевых элементов: навигационных панелей, модальных окон, карточек и всплывающих подсказок. Для наглядности ключевые параметры сведены в таблицу:
| Параметр, вариант эффекта | Светлое матовое стекло | Темное матовое стекло |
|---|---|---|
| Background Blur | 15–40 (регулируется) | 15–40 (регулируется) |
| Заливка (Fill) | Белый (#FFFFFF) | Черный (#000000) или темно-серый |
| Непрозрачность заливки | 10% – 30% | 20% – 40% |
| Обводка (Stroke) | 1px Inside, Белый | 1px Inside, Белый или светло-серый |
| Непрозрачность обводки | 10% – 20% | 5% – 15% |
| Дополнительные эффекты | Мягкая тень (Y:1-2, Blur:4-6), шум 1-3% | Мягкая тень (Y:1-2, Blur:4-6), шум 1-3% |
| Рекомендуемый Blend Mode | Normal или Screen (для легкости) | Normal или Multiply (для глубины) |
Таким образом, эффект матового стекла - это не просто украшение, а системный прием, требующий понимания принципов работы слоев, размытия и цвета. Его грамотное применение позволяет создавать современные, эстетичные и удобные интерфейсы с четкой визуальной структурой.