Как сделать маску в figma

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

Основы маскирования в Figma

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

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

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

Как создать маску по шагам

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

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

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

Редактирование и выход из маски

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

Если нужно отключить маску, выделите замаскированную группу и нажмите Ctrl+Shift+M (Cmd+Shift+M на Mac). Объекты вернутся в исходное состояние, и вы сможете работать с ними отдельно.

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

В Figma можно использовать несколько типов масок, каждый из которых решает свои задачи. Понимание различий помогает выбрать оптимальный способ для конкретного случая.

• Векторные маски. Создаются на основе фигур: прямоугольников, кругов, многоугольников. Наиболее гибкий тип, подходит для большинства задач.
• Текстовые маски. Текст используется как форма для отображения изображения. Часто применяется в заголовках и промо-баннерах.
• Изображения как маски. Реже используется, но возможен: например, силуэт человека как маска для фонового изображения.
• Альфа-маски (через прозрачность). Figma не поддерживает альфа-канал как маску напрямую, но можно имитировать эффект с помощью фигур и режимов наложения.

Особое внимание стоит уделить работе с радиусами и тенями. Если маска имеет закруглённые углы, а содержимое — тень, тень может «выходить» за пределы маски. Чтобы этого избежать, примените тень к самой маске или используйте внешний фрейм.

Маски и компоненты

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

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

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

Маскирование — не просто технический приём, а важный элемент визуальной коммуникации. Рассмотрим несколько реальных случаев, где маски значительно улучшают дизайн.

Круглая аватарка пользователя

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

Текст с фоновым изображением

Чтобы сделать эффект «текст с пейзажем внутри», поместите изображение, затем поверх — текст. Выделите оба и примените маску. Изображение будет видно только внутри букв, создавая современный визуальный эффект.

Карточка с обрезанным фоном

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

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

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

• Маска не применяется. Чаще всего причина — объекты находятся в разных фреймах. Переместите их в один контейнер.
• Содержимое не видно. Проверьте порядок слоёв: маска должна быть выше, чем содержимое.
• Потеря качества при экспорте. Экспортируйте маскированные объекты в SVG или PNG с высоким DPI, особенно если это аватарки или иконки.
• Невозможно редактировать маску. Не забывайте: нужно дважды кликнуть по группе, чтобы войти внутрь и изменить положение содержимого.

Проблемы с адаптивностью

При использовании авто-макетов (Auto Layout) маски могут вести себя непредсказуемо. Например, если маска привязана к размерам фрейма, а содержимое масштабируется, картинка может «съехать». Решение — фиксировать размер маски или использовать констрейнты.

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

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

Также Дмитрий отмечает, что маски хорошо сочетаются с переменными (Variables) в Figma. Можно создать компонент с маской, а размер и форму управлять через переменные — например, переключать между круглой и квадратной аватаркой.

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

Заключение

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

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