Как вырезать маской в фигме

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

Figma — один из самых популярных инструментов для UI/UX-дизайна, прототипирования и командной работы над цифровыми продуктами. Её гибкость и мощь во многом обусловлены возможностью точного контроля над визуальными элементами. Одной из таких ключевых функций является маскирование — техника, позволяющая дизайнерам ограничивать видимость слоёв, создавая сложные композиции, не нарушая целостность исходных объектов. Маски в Figma незаменимы при работе с изображениями, текстом, анимациями и эффектами, особенно когда нужно добиться чёткой формы или плавного перехода.
Технология маскирования используется повсеместно: от простых круглых аватарок до сложных интерфейсов с параллакс-эффектами. Освоив этот инструмент, вы сможете быстрее реализовывать макеты, экономить время на редактировании графики и повышать качество своей работы. Важно понимать, что маски в Figma — это не просто обрезка, а динамический инструмент, который можно редактировать в любой момент без потери данных.

Что такое маска в Figma и как она работает

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

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

Создание маски в Figma — простой процесс, но требует соблюдения определённой последовательности действий. Вот как это сделать:

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

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

Шаги для маскирования группы

Иногда нужно замаскировать не один, а несколько слоёв. Для этого:

• Сгруппируйте нужные слои (Ctrl+G / Cmd+G).
• Поместите маску поверх группы.
• Выделите маску и группу.
• Нажмите Cmd+Option+M.

Теперь вся группа будет видна только в пределах маски.

Типы масок: векторные, текстовые, составные и alpha-маски

Figma поддерживает несколько типов масок, каждый из которых решает свои задачи.
Векторные маски — самые распространённые. Используются фигуры (прямоугольники, эллипсы, полигоны) для создания чётких границ. Подходят для иконок, карточек, аватаров.
Текстовые маски позволяют использовать текст как форму. Например, вы можете поместить изображение внутрь буквы «A». Для этого создайте текстовый слой, поместите его сверху и примените маску.
Составные маски — когда маска состоит из нескольких фигур. Объедините их в группу или используйте Boolean operations (например, Union), чтобы получить сложную форму.
Alpha-маски — особый тип, основанный на прозрачности. Если верхний слой — это изображение с альфа-каналом (например, PNG с прозрачными участками), Figma использует его как маску. Более тёмные участки становятся менее прозрачными.

Редактирование и управление масками

После создания маски вы можете свободно её изменять. Дважды щёлкните по маске в рабочей области или в панели слоёв, чтобы войти в режим редактирования. Внутри вы увидите как маску, так и содержимое.
Чтобы изменить форму маски:

• Выберите инструмент «Selection» (V).
• Щёлкните по контуру маски.
• Перетаскивайте точки или изменяйте параметры в правой панели (например, радиус угла).

Чтобы переместить содержимое под маской:

• Выделите вложенный слой (например, изображение).
• Перемещайте его — оно будет двигаться, но оставаться в пределах маски.

Чтобы отключить маску, выделите её и нажмите Cmd+Option+M снова. Это разгруппирует маску и содержимое, восстановив исходные слои.

Использование масок в компонентах и экземплярах

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

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

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

• Маска не применяется. Причина: маска не на верхнем слое. Решение: перетащите маску выше в стеке.
• Невидимое содержимое. Иногда кажется, что маска «удалила» слой. На самом деле он просто скрыт. Проверьте, включена ли маска и не вышла ли за пределы маски.
• Нельзя редактировать содержимое. Убедитесь, что вы не находитесь в режиме редактирования маски. Нажмите Esc, чтобы выйти.
• Маска с прозрачностью. Если маска — это фигура с прозрачным заливкой, она не сработает. У маски должна быть заливка (даже белая).

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

Маски — не просто технический инструмент, а мощное средство для реализации дизайнерских идей.
1. Аватарки и профили. Круглая маска на изображении — стандарт для соцсетей и CRM. Создайте овал, наложите на фото и примените маску.
2. Карусели и слайдеры. Ограничьте видимость нескольких карточек одной рамкой-маской, чтобы создать эффект прокрутки.
3. Текстовые эффекты. Поместите фоновое изображение внутрь текста. Отлично подходит для заголовков на сайтах.
4. Анимации и прототипы. Используйте маску для создания reveal-эффектов: например, текст появляется по буквам за счёт движения маски.
5. Фотоэффекты. С помощью alpha-маски можно имитировать световые блики, тени или градиентные переходы.

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

Профессионалы выделяют несколько ключевых принципов при работе с масками:

• Всегда дублируйте слой перед маскированием, особенно если работаете с клиентскими файлами.
• Используйте именованные слои: например, «Photo_Mask» и «Avatar_Content». Это упрощает навигацию.
• Не злоупотребляйте вложенными масками — они усложняют структуру и могут вызвать баги при экспорте.
• Тестируйте маски на разных устройствах — иногда обрезка может выглядеть иначе на маленьких экранах.

Figma регулярно обновляет функционал. С выходом версии 110 появилась поддержка масок в Variants и improved mask rendering. Следите за changelog’ом, чтобы использовать новые возможности.

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

Заключение

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

• Маска в Figma — это не обрезка, а динамическое скрытие части слоя.
• Всегда располагайте маску выше в стеке слоёв.
• Поддерживаются векторные, текстовые и alpha-маски.
• Маски можно редактировать и отключать без потери данных.
• Используйте маски в прототипах и компонентах для максимальной гибкости.