Маски в Figma: порядок слоёв, типы маски и проверка границ
Маска в Figma чаще всего «не работает» по одной причине — объект-маска оказался выше содержимого, а не ниже.
Разберём порядок действий, два основных типа маски и способы проверить результат.
Что делает маска
Маска — это объект, который определяет, какая часть содержимого видна.
В отличие от boolean-операции, геометрия содержимого не меняется: изображение остаётся целым, просто часть его скрыта.
Практика: если предполагается двигать картинку внутри формы, нужна маска. Если нужна новая форма как объект — boolean.
Порядок слоёв
Документация формулирует требование однозначно: объект, который станет маской, нужно расположить за всеми слоями, которые он маскирует, то есть ниже по оси z.
В панели Layers это означает: маска снизу, содержимое над ней.
Если перепутать, Figma создаст группу, но видимый результат будет другим — чаще всего маска просто закроет содержимое.
Как создать маску
- Выберите объект-маску и положите его под содержимое.
- Выделите все слои, которые должны войти в маску.
- В правой панели откройте More options → Use as mask.
- Или нажмите
Control+Command+Mна macOS иCtrl+Alt+Mна Windows.
Документация уточняет: если выделен один слой, пункт Use as mask доступен сразу в правой панели, без дополнительного меню.
Результат — группа маски, внутри неё объект-маска и все скрытые слои.
Типы маски
По умолчанию маска создаётся типа Alpha.
Сменить тип можно, выделив слой-маску и открыв выпадающий список в разделе Mask правой панели. При наведении на вариант Figma показывает предпросмотр прямо на холсте — удобно, чтобы сравнить варианты, не применяя их.
Alpha
Документация: в alpha-маске видимость определяется непрозрачностью маски.
Чем выше непрозрачность, тем больше видно. При нулевой непрозрачности не видно ничего.
Следствие: полупрозрачная заливка, градиент или размытие дают мягкий переход. Именно поэтому alpha подходит для плавных растворений по краям.
Vector
Векторная маска, или маска по контуру фигуры, игнорирует прозрачность заливки и обводки.
Документация: если в маске есть область с непрозрачностью больше нуля, используется её контур, а вся маска считается непрозрачной на 100 %.
Следствие: край всегда жёсткий. Это удобно для «чистых» вырезов — например, круглого аватара без мягкой кромки.
Практический пример: аватар
- Нарисуйте круг.
- Поместите фотографию так, чтобы она перекрывала круг.
- Убедитесь, что круг ниже фото в панели Layers.
- Выделите оба объекта.
Ctrl+Alt+MилиControl+Command+M.
Результат: фото видно только внутри круга. Само фото можно двигать внутри группы — кадрирование меняется без повторной вставки.
Практический пример: мягкое затухание
- Прямоугольник с градиентной заливкой от непрозрачного к прозрачному.
- Изображение над ним.
- Маска типом Alpha.
Результат: картинка плавно исчезает к краю. Если переключить тип на Vector, затухание пропадёт и останется жёсткая граница.
Mask outlines
По умолчанию Figma не показывает границы маски.
Документация: включить отображение можно через View → Mask outlines в меню Figma. Все маски в файле обводятся зелёным.
Практика: при работе со сложными макетами это экономит время поиска. Особенно помогает, когда непонятно, почему часть контента не видна.
Нюанс из документации: если все слои внутри маски скрыты или имеют нулевую непрозрачность, обводка тоже не появится.
Почему маска не работает
Пять причин.
Маска выше содержимого. Самая частая: порядок слоёв обратный.
Содержимое вне группы. Маскируются только слои, попавшие в группу маски.
Не тот тип. Vector вместо Alpha убирает мягкие переходы.
Скрытые слои. Внутри всё выключено, и результата не видно.
Маска применена к фрейму с обрезкой содержимого. Два механизма могут конфликтовать.
Как вернуть всё назад
Повторное нажатие той же комбинации снимает маску.
Практика: если после снятия маски содержимое «пропало», проверьте видимость слоёв в группе — маска не удаляет объекты, она только меняет видимость.
Маски и компоненты
Маску можно собрать внутри компонента.
Практика: аватар как компонент с маской позволяет менять фото в экземпляре, не разрушая форму. Но не двигайте слой-маску внутри экземпляра: это переопределение, и оно оторвёт экземпляр от основного компонента.
Производительность
Маски с размытием и большими изображениями заметно нагружают отрисовку.
Практика: на ноутбуке с 16 ГБ ОЗУ файл с десятком масок и размытиями прокручивается с задержкой. Разгруппировка лишних масок и удаление скрытых слоёв помогают больше, чем закрытие вкладок браузера.
Частые ошибки
Маска сверху. Классика.
Ожидание мягкого края от Vector. Нужен Alpha.
Забыть включить Mask outlines. Поиск проблемы вслепую.
Маска вместо обрезки геометрии. Для нового контура нужен boolean.
Маска внутри экземпляра с правками. Ломает связь с компонентом.
Несколько объектов под одной маской
Одна маска может скрывать сразу несколько слоёв.
Практика: удобно собирать карточку, где фото и цветная плашка обрезаются одной формой. Все слои выделяются вместе с маской и попадают в одну группу.
Если позже нужно вынести объект из-под маски, перетащите его выше группы в панели Layers. Он снова станет видимым целиком.
Маска и обрезка фрейма
Фрейм умеет обрезать содержимое по своим границам — это отдельный механизм, и он тоже называется обрезкой.
Практика: если содержимое и так выходит за границы фрейма, маска может быть не нужна вовсе. Проверьте, включена ли у фрейма обрезка содержимого — иногда достаточно этого, без дополнительных групп.
Обратная ситуация: маска нужна именно внутри фрейма, когда форма не совпадает с его прямоугольником.
Маска в дизайн-системе
Если карточки с изображениями повторяются, маску стоит завернуть в компонент.
Практика: сделайте компонент «изображение в скруглённой рамке» с маской внутри и свойством для замены картинки. Тогда все карточки в макете будут обрезаться одинаково, а правка радиуса скругления займёт один клик вместо десятка.
FAQ
Куда ставить объект-маску?
Под содержимое, ниже по панели Layers.
Какая комбинация клавиш?
Ctrl+Alt+M на Windows, Control+Command+M на macOS.
Какой тип маски по умолчанию?
Alpha.
Чем Vector отличается от Alpha?
Vector использует контур и игнорирует прозрачность.
Как увидеть границы масок?
View → Mask outlines.