Как работают маски в фигме

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

Как работают маски: базовые принципы

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

Как определяется форма маски?

Форма маски зависит от типа верхнего объекта. Если это прямоугольник — видимая область будет прямоугольной. Круг создаёт круглую маску, а произвольный векторный контур — маску по его очертаниям. При этом можно использовать составные фигуры (boolean operations), чтобы создавать сложные формы масок: например, квадрат с вырезанным кругом по центру.
Интересная особенность: если маска состоит из нескольких фигур, объединённых операцией «Subtract», то видимой станет только та часть содержимого, которая соответствует оставшейся области. Это позволяет делать «дырявые» маски или многослойные эффекты.

Как создать маску в Figma: пошаговая инструкция

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

1. Подготовьте два объекта: тот, который будет служить маской (например, круг), и тот, который нужно обрезать (например, изображение).
2. Убедитесь, что маскирующий объект находится выше по стеку слоёв. Перетащите его вверх в панели слоёв или используйте Ctrl+Shift+↑ (Cmd+Shift+↑ на Mac).
3. Выделите оба объекта одновременно, удерживая Shift.
4. Нажмите правой кнопкой мыши и выберите пункт «Create Mask» (или используйте горячую клавишу Ctrl+Alt+M / Cmd+Option+M).
5. Готово: содержимое теперь отображается только внутри формы маски.

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

Как редактировать маску после создания?

После активации маски группа становится специальной — в панели слоёв она отмечается значком в виде глаза с квадратом. Чтобы изменить маску:

• Дважды щёлкните по маскированной группе — вы перейдёте в режим редактирования.
• Щёлкните по самому верхнему слою (форма маски) и измените её размер, положение или форму.
• Чтобы выйти, кликните за пределами группы или нажмите Esc.

Также можно временно отключить маску, не разрушая её: кликните правой кнопкой по группе и выберите «Detach Mask». Это преобразует маску обратно в обычную группу, сохранив все слои.

Типы маскирования в Figma и их особенности

Хотя Figma не делит маски на официальные «типы», в практике выделяют несколько подходов к их использованию в зависимости от целей и структуры слоёв.

Особый интерес представляет текстовая маска. Чтобы её создать, поместите текстовый слой сверху, выделите его вместе с нижележащим изображением и примените «Create Mask». Результат — изображение внутри букв. Этот приём часто используют в презентационных макетах и маркетинговых материалах.

Практическое применение масок в дизайне интерфейсов

Маски — не просто декоративный инструмент. Они решают реальные задачи в повседневной работе дизайнера. Ниже — ключевые сценарии использования.

1. Аватары и профильные изображения

Самый распространённый случай — круглые аватары. Создайте круг, поместите фотографию выше, примените маску. Теперь все аватары в проекте будут иметь единый стиль, а при необходимости вы легко измените форму на квадратную с закруглёнными углами или овальную.

2. Карусели и скрытые блоки контента

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

3. Дизайн с нестандартными формами

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

4. Анимации и прототипирование

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

Распространённые ошибки и как их избежать

Несмотря на простоту, новички часто сталкиваются с проблемами при работе с масками. Вот основные ошибки и пути их решения.

• Маска не применяется. Проверьте, выделены ли минимум два объекта и находится ли маскирующий слой выше. Также убедитесь, что вы не пытаетесь замаскировать саму маску или группу с уже существующей маской.
• Содержимое исчезло полностью. Возможно, маскирующий объект слишком мал или находится не над нужной областью. Увеличьте его или переместите.
• Невозможно редактировать текст внутри маски. После применения маски текст теряет возможность прямого редактирования, если маска «перекрывает» его полностью. Решение — дважды щёлкнуть по группе и редактировать текст внутри режима редактирования маски.
• Маска ломается при экспорте. При экспорте в PNG/SVG убедитесь, что маска корректно отображается. Иногда проблемы возникают при использовании булевых операций. Лучше упрощать форму маски перед экспортом.

Ограничения масок в Figma

• Нельзя применять маски к страницам или топ-левел фреймам напрямую.
• Маски не поддерживают вложенные маски (группа с маской внутри другой маскированной группы).
• Эффекты (тени, размытие) применяются до маскирования, поэтому тень может «обрезаться». Чтобы этого избежать, дублируйте слой и применяйте эффекты отдельно.

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

По словам эксперта, маски особенно полезны при создании дизайн-систем. Например, можно создать компонент «Изображение-аватар» с параметром формы: круглая, квадратная, ромбовидная. Форма задаётся через маску, а изображение остаётся универсальным. Это ускоряет работу команды и обеспечивает консистентность.

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

Заключение

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

• Маски ограничивают видимость содержимого по форме верхнего слоя.
• Создаются через пункт «Create Mask» после выделения двух и более объектов.
• Применяются для аватаров, слайдеров, текстовых эффектов и прототипирования.
• Не удаляют данные, что позволяет легко редактировать содержимое.
• Требуют внимания к порядку слоёв и совместимости при экспорте.