Где кнопка маска в фигме

Кнопка маски в Figma — это функция, позволяющая скрывать части объектов за пределами заданной области. Она активируется через контекстное меню или сочетание клавиш после выделения слоёв. Основная команда: «Create Mask» (Создать маску), доступна в правой панели свойств или через клик правой кнопкой мыши.

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

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

Что такое маски в Figma и зачем они нужны

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

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

Использование масок критически важно при соблюдении дизайн-систем. Например, если в проекте аватар пользователя всегда должен быть круглым, достаточно один раз создать компонент с маской и использовать его повсеместно. При изменении требований (например, переход от круглых к квадратным аватарам) достаточно отредактировать мастер-компонент — все экземпляры обновятся автоматически.

Где кнопка маски в Figma: расположение и активация

В отличие от других графических редакторов, в Figma нет отдельной кнопки маски на верхней панели инструментов. Функция «Create Mask» не представлена в виде иконки, а скрыта в контекстном меню и панели свойств. Это может сбивать с толку, особенно пользователей, пришедших из Photoshop или Illustrator.

Основные способы активации маски:

• Контекстное меню: выделите верхний слой, кликните правой кнопкой мыши → выберите «Create Mask».
• Панель свойств: при выделении подходящего слоя в правой колонке появляется значок ножниц — клик по нему создаёт маску.
• Горячие клавиши: Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac).

1. Выделено минимум два слоя (или группа с несколькими элементами).
2. Верхний слой должен находиться точно над нижним в стеке.

Если выделить только один слой — опция будет неактивна. Также нельзя применить маску к объектам на разных страницах или фреймах, если они не вложены.

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

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

1. Подготовьте слои: добавьте изображение (или любой объект) и поверх него — фигуру (например, круг или прямоугольник с закруглёнными углами).
2. Выстройте по порядку: убедитесь, что фигура находится выше изображения в панели слоёв (Layers). Перетащите при необходимости.
3. Выделите оба слоя: зажмите Shift и кликните по каждому, или выделите рамкой.
4. Создайте маску: нажмите ПКМ → «Create Mask» или используйте горячие клавиши.
5. Проверьте результат: нижний слой теперь виден только внутри формы верхнего.

Пример: создание круглого аватара

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

• Добавьте изображение аватара.
• Нарисуйте эллипс нужного размера поверх него.
• Выделите оба слоя (Shift + клик).
• Нажмите Cmd+Option+M (Mac) или Ctrl+Alt+M (Windows).
• Готово: изображение стало круглым, а при редактировании остаётся исходным.

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

Даже опытные дизайнеры иногда сталкиваются с проблемами при работе с масками. Ниже — частые сбои и пути их решения.

Ошибка: «Create Mask» неактивна

Самая распространённая ситуация — опция серая или отсутствует. Причины:

• Выделен только один слой.
• Слои находятся на разных страницах или в разных фреймах.
• Один из слоёв — текстовый, но не растрирован (в старых версиях Figma).

Решение: проверьте стек слоёв, убедитесь, что элементы в одной группе или фрейме, и выделите минимум два объекта.

Ошибка: маска не работает с текстом

До 2024 года Figma не поддерживала текст как маску без преобразования в кривые. Сейчас это возможно, но только если текст не редактируется одновременно.

Ошибка: маска исчезает при экспорте

Иногда при экспорте PNG или SVG маска «ломается» — видны обрезанные края. Причина: неправильные настройки экспорта.

Современные возможности маскирования в Figma (2026)

С выходом обновлений в 2025–2026 годах Figma значительно расширила функционал масок. Теперь доступны:

• Вложенные маски: можно применять маски внутри уже замаскированных групп.
• Маски в компонентах: маски сохраняются при создании вариантов (variants) и работают в связке с properties.
• Анимация масок: в Prototypes можно анимировать положение маски, создавая эффекты «раскрытия» или «заливки».
• Обратные маски (Inverted Masks): новая опция позволяет скрывать содержимое *внутри* формы, а не снаружи.

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

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

По его словам, в 2026 году маски стали неотъемлемой частью динамических интерфейсов. Например, при проектировании медицинского приложения команда использовала маски для анимации заполнения шкалы прогресса лечения: фоновое изображение «открывалось» по мере выполнения этапов.

«Мы сэкономили около 40 часов разработки, потому что не пришлось создавать десятки статичных иконок. Достаточно было одной маски и слайдера в прототипе», — добавляет он.

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

Заключение

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

• Маска создаётся через ПКМ → «Create Mask» или Ctrl+Alt+M / Cmd+Option+M.
• Требуется минимум два слоя: верхний — маска, нижний — контент.
• Маски обратимы, совместимы с компонентами и поддерживают анимацию.
• В 2026 году доступны вложенные и инвертированные маски, а также работа с градиентами.
• Для экспорта важно правильно выбрать область и формат с прозрачностью.