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

Размытие по краям — один из ключевых визуальных приёмов в современном дизайне интерфейсов. Оно помогает выделить центральный элемент, создать иерархию и добавить глубину композиции. В Figma этот эффект реализуется не напрямую через «размытие краёв», а с помощью комбинации инструментов: масок, наложенных размытий и фигур. Владение этими техниками позволяет добиться как мягкого затемнения фона вокруг объекта, так и более сложных эффектов типа «атмосферного свечения» или «глубины резкости». Особенно это актуально при проектировании модальных окон, карточек, бэкдропов и полноэкранных вью.

Зачем нужно размытие по краям

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

Технология имитирует поведение человеческого глаза и камер. В реальной жизни мы не можем одновременно чётко видеть всё поле зрения — наш мозг фокусируется на одном объекте, а периферия теряет резкость. Размытие по краям в интерфейсах воспроизводит этот эффект, делая взаимодействие более естественным и интуитивным.

Кроме того, такой приём улучшает восприятие глубины. Он создаёт ощущение слоистости: передний план (чёткий), задний план (размытый). Это особенно важно в системах с множеством визуальных слоёв, таких как macOS с эффектом vibrancy или iOS с полупрозрачными панелями.

Как работает фоновое размытие в Figma

Figma предлагает два типа размытия: Gaussian Blur и Background Blur. Первый применяется непосредственно к слою и размывает его содержимое. Второй — уникальный инструмент, который размывает всё, что находится *под* текущим слоем, но не сам слой. Именно Background Blur лежит в основе эффекта размытия по краям.

Чтобы использовать Background Blur, необходимо:

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

Особенность Background Blur в том, что он работает только внутри границ фрейма или фигуры, к которой применён. Если вы наложите его на прямоугольник, размоется только фон под этим прямоугольником. Это даёт полный контроль над зоной размытия.

Пошагово создаём размытие по краям

Создание размытия по краям требует понимания структуры слоёв и правил применения масок. Ниже — универсальный алгоритм для любого типа контента.

1. Подготовьте фон. Добавьте изображение, градиент или цветной слой, который будет служить фоном. Это то, что вы хотите размыть по краям.
2. Создайте контейнер-обёртку. Нарисуйте прямоугольник или фрейм нужного размера. Он будет зоной, где остаётся чёткое содержимое. Расположите его поверх фона.
3. Примените Background Blur. Выделите контейнер, откройте панель Effects (в правой колонке), выберите + Add → Background Blur. Установите значение Radius — обычно 10–30 px, в зависимости от задачи.
4. Добавьте чёткий контент внутрь. Поместите текст, иконки или другие элементы внутрь этого фрейма. Они останутся резкими, так как Background Blur не затрагивает содержимое самого слоя.
5. Настройте маску (по необходимости). Если вы хотите, чтобы размытие было только по периметру, а центр оставался прозрачным, используйте маску. Сделайте внутреннюю фигуру (например, круг) и примените к фрейму маску через Ctrl+Alt+M (Cmd+Option+M на Mac).

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

Пример: Модальное окно с размытым фоном

Допустим, вы проектируете модальное окно. Хотите, чтобы основной интерфейс был размыт, а само окно — чёткое.

• Создайте фрейм размером со страницу (например, 1440×900 px).
• Добавьте фон: изображение или цвет.
• Нарисуйте поверх него полупрозрачный чёрный прямоугольник с прозрачностью 60% и примените к нему Background Blur (Radius: 20 px).
• Внутрь этого фрейма поместите карточку с белым фоном и текстом — она останется чёткой.

Готово: пользователь видит, что основной интерфейс «заблокирован» и размыт, а внимание сфокусировано на диалоге.

Варианты реализации и тонкости

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

1. Размытие через внешнюю маску

Если вы хотите, чтобы размытие было только по периметру, а центр оставался полностью прозрачным:

• Создайте большой фрейм с Background Blur.
• Внутри нарисуйте меньшую фигуру (например, круг) и выделите её вместе с родителем.
• Нажмите Ctrl+Alt+M — Figma применит маску, и центр станет «дыркой».

Это создаёт эффект «светового окна» — как в кинотеатре. Полезно для онбординга или презентаций.

2. Градиентное размытие

Чтобы размытие было неоднородным (сильнее по краям, слабее ближе к центру), используйте комбинацию:

• Фона с Background Blur;
• Полупрозрачного градиента поверх, имитирующего затемнение.

Градиент не заменяет размытие, но усиливает эффект глубины.

3. Анимация размытия

Figma поддерживает анимацию эффектов. Вы можете настроить прототип, где Background Blur плавно появляется при открытии окна.

• Создайте два состояния: без размытия и с размытием.
• Свяжите их через прототип с переходом Smart Animate.
• Убедитесь, что оба фрейма имеют одинаковые имена и структуру.

Анимация делает взаимодействие живым и предсказуемым.

Распространённые ошибки

Даже опытные дизайнеры допускают типичные ошибки при работе с размытием.

• Применение Gaussian Blur вместо Background Blur. Это размывает сам элемент, а не фон под ним. Результат — серый, нечитаемый слой, а не эффект фокусировки.
• Отсутствие контента под фреймом. Background Blur не работает, если под слоем ничего нет. Убедитесь, что фон расположен ниже в стеке.
• Размытие на тексте или иконке. Эти элементы нельзя использовать как контейнер для Background Blur. Всегда оборачивайте их во фрейм.
• Игнорирование производительности. Слишком много слоёв с Background Blur могут замедлить работу Figma, особенно в больших файлах.

Как проверить, работает ли размытие

• Перейдите во вкладку Design;
• Выберите фрейм;
• Проверьте панель Effects — должен быть указан Background Blur с радиусом;
• Убедитесь, что под фреймом есть слой (изображение, фигура и т.д.).

Если размытия нет — перепроверьте порядок слоёв. Возможно, вы забыли отправить фон на задний план.

Экспорт и совместимость

Один из главных вопросов: «Почему размытие не видно при экспорте?» Ответ прост — Figma не встраивает Background Blur в растровые файлы (PNG, JPG). При экспорте такой слой становится прозрачным, а не размытым.

Чтобы показать эффект клиенту или разработчику:

• Используйте прототип — в режиме просмотра Background Blur отображается корректно.
• Сделайте скриншот прямо в Figma (через View → Screenshot или Cmd+Shift+E).
• Для разработчиков подготовьте инструкцию: укажите радиус, тип размытия и контекст использования.

В коде размытие реализуется через CSS-фильтр `backdrop-filter: blur(20px);`. Этот свойство поддерживается в современных браузерах (Chrome, Safari, Firefox), но требует проверки для старых версий.

Экспертное мнение

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

Вопросы и ответы

Заключение

Размытие по краям в Figma — это мощный, но требующий понимания инструмент. Он не создаётся одним кликом, а строится на правильной архитектуре слоёв, использовании Background Blur и точной настройке масок. Главное — помнить: размытие работает только тогда, когда есть контент под слоем, и применяется исключительно к фреймам или фигурам.

• Для размытия по краям используйте Background Blur, а не Gaussian Blur.
• Эффект работает только внутри границ фрейма и требует наличия нижележащих слоёв.
• Всегда оборачивайте контент во фрейм перед применением размытия.
• При экспорте эффект не сохраняется — используйте прототип или скриншоты.
• Согласовывайте параметры размытия с разработчиками, указывая радиус и условия применения.