Как в фигме обрезать изображение по фигуре

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

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

Маскирование в Figma — это способ скрыть часть объекта, оставив видимым только ту область, которая попадает внутрь заданной формы. Это работает по принципу «обрезки», но без фактического удаления пикселей. Изображение остаётся целым, просто его отображение ограничивается контуром маски. Такой подход особенно полезен при работе с прототипами, карточками товаров, аватарами и сложными композициями.
Figma поддерживает два типа масок: простые (на основе фигур) и составные (с использованием нескольких фигур или булевых операций). Простая маска создаётся из одной фигуры — например, круга или прямоугольника. Составная позволяет комбинировать несколько форм, чтобы получить сложный контур. Важно понимать, что маска всегда применяется к содержимому, которое находится ниже по стеку слоёв.
Для успешного применения маски необходимо соблюдать три условия:
1. Оба объекта (изображение и фигура-маска) должны находиться в одном фрейме.
2. Фигура должна быть выше изображения в порядке слоёв.
3. Должна быть применена команда маскирования («Create Mask»).
Если хотя бы одно условие не выполнено, функция маски будет недоступна или работать некорректно. Это частая причина разочарования у новичков, которые пытаются применить маску вне фрейма.

Пошаговая инструкция: как обрезать изображение по фигуре

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

1. Создайте новый фрейм или выберите существующий, в который вы хотите поместить изображение.
2. Добавьте фигуру (например, прямоугольник, эллипс или многоугольник), которая будет служить маской. Размер и положение фигуры определят, какая часть изображения будет видна.
3. Импортируйте изображение в фрейм. Перетащите его из проводника или вставьте через буфер обмена (Ctrl+V).
4. Переместите изображение так, чтобы оно полностью или частично перекрывало фигуру. Убедитесь, что изображение находится ниже фигуры в панели слоёв.
5. Выделите одновременно фигуру и изображение (удерживайте Shift или протяните рамку выделения).
6. Нажмите Ctrl+Alt+M (или Cmd+Option+M на Mac), либо выберите в верхнем меню пункт «Create Mask».

После этого изображение будет обрезано по контуру фигуры. Теперь вы можете редактировать как саму маску (изменив её размер или форму), так и положение изображения внутри неё.

Как редактировать маску после создания

Одно из главных преимуществ масок в Figma — их редактируемость. Чтобы изменить форму маски:

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

Также можно редактировать положение изображения внутри маски. Для этого дважды щёлкните по маске, затем выберите изображение и двигайте его мышью. Это удобно, если нужно сместить центр кадра, не меняя форму обрезки.

Типы фигур для маски: от прямоугольника до кастомных путей

Figma позволяет использовать практически любую векторную фигуру в качестве маски. Наиболее распространённые типы:

• Прямоугольник — стандартная форма для карточек, баннеров, превью.
• Эллипс — идеален для аватаров, логотипов, иконок.
• Многоугольник — используется для создания уникальных эффектов, например, шестиугольных плиток.
• Кастомный векторный путь — позволяет обрезать изображение по любой сложной форме, созданной инструментом Pen.
• Текстовые маски — при использовании текста как фигуры можно сделать изображение, заполняющее буквы.

Текстовые маски требуют дополнительного шага: преобразования текста в кривые («Outline Stroke»), чтобы он стал векторной фигурой. Без этого шага текст нельзя использовать как маску.

Сложные маски с булевыми операциями

Figma поддерживает булевы операции (Union, Subtract, Intersect, Exclude), которые позволяют создавать составные фигуры. Эти фигуры также могут служить масками. Например, вы можете вычесть один круг из другого, чтобы получить кольцо, и использовать его как маску для изображения.

Частые ошибки и как их избежать

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

• Маска не применяется — чаще всего это происходит, когда объекты находятся вне фрейма. Поместите изображение и фигуру в один фрейм, и команда станет активной.
• Изображение не двигается внутри маски — вы забыли войти в режим редактирования маски. Дважды щёлкните по замаскированному объекту, чтобы получить доступ к внутренним элементам.
• Форма маски теряет скругление — если вы используете составную фигуру, убедитесь, что все части имеют одинаковые параметры. Иногда при объединении теряются радиусы углов.
• Экспорт маски с обрезанным краем — при экспорте PNG убедитесь, что маска не выходит за границы холста. Используйте clipping, чтобы избежать лишних артефактов.

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

1. Находятся ли объекты в одном фрейме?
2. Правильно ли порядок слоёв (фигура сверху)?
3. Выделены ли оба объекта?
4. Не заблокированы ли слои?
5. Не является ли изображение экземпляром компонента? (Некоторые компоненты блокируют маскирование)

Распространённые сценарии использования масок

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

• Создание аватаров — обрезка фотографий по кругу для профилей пользователей.
• Карточки товаров — использование масок для единообразного отображения изображений разного размера.
• Слайдеры и баннеры — маскирование изображений под заданный макет с закруглёнными краями.
• Анимации в прототипах — изменение видимой области изображения через движение маски (например, эффект «раскрытия»).
• Брендированные формы — использование логотипа или фирменного силуэта как маски для фото.

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

Экспорт и совместимость масок

Экспорт замаскированных объектов в Figma работает корректно для большинства форматов. При экспорте PNG, JPG или SVG маска применяется автоматически — видимой становится только та часть изображения, которая попадает в контур.
Важно понимать, что при экспорте SVG маска преобразуется во встроенный clip-path. Это стандартный подход, совместимый с современными браузерами. Однако, если вы планируете использовать SVG в старых системах, стоит проверить поддержку clip-path.

• PNG/JPG — маска применяется, изображение обрезается по фигуре.
• SVG — сохраняется как вектор с clip-path, можно редактировать в других редакторах.
• PDF — маска также сохраняется, но может теряться при открытии в некоторых программах.

Советы по экспорту

• Увеличьте холст при экспорте, если маска близко к краю — это предотвратит обрезку.
• Используйте опцию «Include in export» только для нужных слоёв.
• Для анимаций экспортируйте отдельные состояния маски как кадры.

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

Маскирование — это не просто технический приём, а стратегический инструмент визуальной иерархии. Грамотное использование масок помогает направлять внимание пользователя, создавать ощущение законченности и профессионализма в дизайне.
Главный принцип: маска должна служить содержанию, а не противоречить ему. Если обрезка скрывает ключевые элементы изображения (например, лицо человека), это снижает качество восприятия. Всегда проверяйте, как маска влияет на смысловую нагрузку изображения.
При работе с сетками и карточками рекомендуется использовать единые правила маскирования. Например, все аватары — круглые, все превью — прямоугольные с радиусом 8px. Это ускоряет разработку и обеспечивает согласованность.
Для сложных проектов полезно создавать компоненты с масками. Например, карточку пользователя, где аватар уже замаскирован. Тогда при дублировании компонента маска сохраняется, а изображение можно быстро заменить.
Также стоит использовать маски в прототипировании. Движение маски может имитировать прокрутку, раскрытие меню или загрузку контента. Это добавляет интерактивности без необходимости писать код.

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

Заключение

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

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