Где находится маска в фигме

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

Что такое маска в Figma

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

Технически маска реализуется через группировку. Когда вы применяете маску, Figma автоматически создаёт группу, в которой верхний слой становится маской, а все нижние — содержимым, которое будет обрезано. Это поведение аналогично clipping mask в Adobe Photoshop или Illustrator, но адаптировано под веб-интерфейс и коллаборативную работу.

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

Интересно, что маска в Figma поддерживает прозрачность: если у маски есть полупрозрачные участки, они будут влиять на непрозрачность содержимого пропорционально. Например, серый цвет с 50% заполнением сделает сквозь него видимое содержимое также на 50% прозрачным. Это открывает возможности для создания мягких переходов и тонких визуальных эффектов.

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

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

1. Подготовьте объекты: создайте два слоя — тот, который будет маской (например, круг), и тот, который нужно обрезать (например, изображение).
2. Разместите маску выше: в панели слоёв маска должна находиться над объектом, который вы хотите обрезать. Если порядок нарушен, перетащите её вверх.
3. Выделите оба объекта: зажмите Shift и кликните по обоим слоям, или выделите рамкой.
4. Примените маску: нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac). Альтернативно — кликните правой кнопкой и выберите «Create Mask».

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

Если вы случайно применили маску к неправильным объектам, просто нажмите Ctrl+Z. Чтобы разгруппировать маску, выберите группу и нажмите Ctrl+Shift+G — содержимое останется на месте, но потеряет эффект обрезки.

Быстрые сочетания клавиш

Figma предлагает несколько горячих клавиш, ускоряющих работу с масками:

Виды масков и их особенности

Figma поддерживает два основных типа масок: vector mask (векторная маска) и alpha mask (альфа-маска). Понимание различий между ними помогает выбирать правильный подход в зависимости от задачи.

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

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

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

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

Несмотря на гибкость, у масок есть ограничения:

• Нельзя применить маску к компоненту напрямую без разрыва связи (break variant);
• Маска не влияет на эффекты (теней, свечения), если они находятся за пределами обрезанной области;
• Группа с маской не может быть использована как фрейм-ограничитель в Auto Layout.

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

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

Маска не применяется

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

Содержимое исчезло полностью

Это происходит, когда маска и содержимое не пересекаются по координатам. Переместите объект внутрь границ маски. Или, если маска слишком мала, увеличьте её.

Невозможно редактировать содержимое

После создания маски вы не можете просто кликнуть по содержимому — нужно дважды щёлкнуть по нему внутри группы. Figma перейдёт в режим редактирования группы, и вы сможете двигать объекты.

Практические примеры использования масок

Маски — не просто технический инструмент. Они решают реальные задачи в дизайне интерфейсов.

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

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

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

4. Анимационные заглушки. В прототипах можно использовать маски для имитации появления элементов: например, раскрывающейся шторки или прогресс-бара.

Чек-лист: правильно ли вы создали маску?

• ✓ Маска находится выше в стеке слоёв?
• ✓ Объекты выделены вместе?
• ✓ Нет конфликтов с Auto Layout или компонентами?
• ✓ Форма маски соответствует задаче (вектор/альфа)?
• ✓ Эффекты не выходят за границы?

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

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

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

Заключение

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

• Маска в Figma создаётся сочетанием Ctrl+Alt+M (Cmd+Option+M на Mac).
• Маска должна находиться выше в стеке слоёв, чем объект, который она обрезает.
• Поддерживаются векторные и альфа-маски, каждая со своими сценариями использования.
• Маски работают в прототипах и при экспорте, но требуют внимания к деталям.
• Используйте маски для аватарок, текстовых эффектов, анимаций и компонентов дизайн-систем.