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

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

Зачем обрезать картинку по контуру

В современном UI/UX-дизайне важна визуальная чёткость и согласованность элементов. Часто требуется интегрировать фотографии или иллюстрации в нестандартные формы — круглые аватарки, карточки с закруглёнными углами, фигурные баннеры или элементы в стиле neumorphism. Обрезка по контуру помогает адаптировать изображения под эти формы, сохраняя целостность композиции.

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

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

Инструменты для масок в Figma

Figma предоставляет два основных способа скрытия части изображения: обычные маски (clipping masks) и альфа-маски (alpha masks). Первый тип — самый распространённый и простой в использовании. Он основан на форме векторного объекта, который определяет, какая часть изображения будет видимой.

Для создания маски используется комбинация фигур и изображений. Векторные инструменты — Rectangle, Ellipse, Pen, Polygon — позволяют рисовать любые контуры. Затем изображение помещается внутрь этой фигуры, и активируется режим маскирования. Всё, что выходит за пределы контура, становится невидимым.

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

• Rectangle Tool — для прямоугольных и закруглённых форм;
• Ellipse Tool — для кругов и овалов;
• Polygon Tool — для многоугольников;
• Pen Tool — для свободного рисования контуров;
• Frame Tool — может использоваться как контейнер с маской.

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

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

1. Загрузите изображение в Figma с помощью Drag & Drop или через меню File → Place Image.
2. Создайте векторную фигуру (например, круг с помощью Ellipse Tool) поверх изображения. Убедитесь, что она точно соответствует желаемому контуру.
3. Выделите одновременно изображение и фигуру (удерживайте Shift при клике).
4. Нажмите правой кнопкой мыши и выберите Create Mask или используйте сочетание Ctrl+Alt+M (Cmd+Option+M на Mac).
5. Изображение автоматически обрежется по форме фигуры. Теперь вы можете перемещать изображение внутри маски, не меняя саму форму.

Если нужно изменить форму маски, дважды щёлкните по фигуре-маске и отредактируйте её с помощью векторных инструментов. Изменения сразу отразятся на отображении изображения.

Работа с группами и вложенными масками

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

Однако будьте осторожны: слишком глубокая вложенность может запутать структуру слоёв. Рекомендуется использовать группы (Groups) и давать понятные имена слоям: «Фото_аватар», «Маска_круглая» и т.д.

Создание сложных контурных масок

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

Начните с импорта изображения. Активируйте Pen Tool и начните рисовать контур вокруг объекта. Кликаете по ключевым точкам, чтобы создать узлы; удерживая мышь, регулируйте кривизну Безье. Чем больше узлов — тем точнее контур, но выше нагрузка на производительность.

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

Использование Boolean операций для сложных форм

Figma позволяет объединять фигуры с помощью Boolean операций: Union, Subtract, Intersect, Exclude. Эти инструменты помогают создавать нестандартные контуры, которые затем можно использовать как маски.

Например, чтобы сделать звезду с вырезом посередине:

• Нарисуйте большую звезду (Polygon Tool с 5–10 сторонами);
• Нарисуйте меньший круг в центре;
• Выделите обе фигуры и нажмите Subtract (вычесть);
• Примените полученную форму как маску к изображению.

Такой подход даёт большую свободу в дизайне, особенно при создании брендированных элементов.

Ошибки и как их избежать

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

Изображение не обрезается

Часто пользователи забывают, что маска должна быть нижним слоем в выделенной группе. Figma использует верхний объект как содержимое, а нижний — как маску. Если порядок нарушен, функция Create Mask будет недоступна или сработает некорректно.

Решение: проверьте порядок слоёв в панели Layers. Нижняя фигура — маска, верхняя — изображение. При необходимости используйте Send to Back или Bring Forward.

Потеря качества при экспорте

Хотя Figma работает с векторами, изображения остаются растровыми. Если вы экспортируете маленькое изображение с крупной маской, могут появиться артефакты. Особенно это заметно при увеличении.

Решение: используйте изображения с запасом по размеру. Например, если маска 200×200 пикселей, загружайте изображение не менее 400×400 px. Так вы обеспечите чёткость при любом масштабе.

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

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

Экспорт результата

После создания маски важно правильно экспортировать результат. Figma позволяет экспортировать как весь фрейм, так и отдельные слои.

Выберите объект с маской, откройте панель Export справа. Укажите формат: PNG (с прозрачностью), JPG (без прозрачности) или SVG (если маска векторная и изображение заменено на символ). Для веба чаще всего используется PNG с прозрачным фоном.

Вы можете задать множители: 1x, 2x, 3x — для адаптации под разные экраны. Например, 2x обеспечит чёткость на Retina-дисплеях.

Экспорт с прозрачностью

Если вы хотите, чтобы обрезанное изображение имело прозрачный фон (например, для наложения на другие элементы), выберите формат PNG и убедитесь, что в настройках экспорта включена опция «Прозрачность».

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

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

Интервью с Еленой Михайловой, ведущим дизайнером продукта в EdTech-компании

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

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

— Мы стандартизировали использование масок: все аватарки — круглые, 80×80 px, с отступом 4 px. Создали компонент, и теперь любой дизайнер может вставить фото — маска применяется автоматически.

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

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

Заключение

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

• Используйте Create Mask для быстрой обрезки по векторному контуру.
• Помещайте изображение внутрь фигуры и следите за порядком слоёв.
• Применяйте Pen Tool для точной маскировки сложных объектов.
• Экспортируйте в PNG с прозрачностью для максимальной гибкости.
• Создавайте компоненты с масками для повторного использования.