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

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

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

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

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

Основные методы обрезки изображений в Figma

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

Первый и самый распространённый — векторная маска. Она позволяет использовать любую векторную фигуру (прямоугольник, круг, многоугольник, кривую Безье) как шаблон для обрезки. Этот метод даёт максимальную свободу и поддерживает редактирование как формы, так и положения изображения внутри маски.

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

Третий — Auto Layout с обрезкой. При использовании Auto Layout контейнер автоматически становится маской, если включена соответствующая настройка. Это полезно для создания адаптивных блоков, таких как списки новостей или карусели, где изображения должны подстраиваться под размеры контейнера.

Сравнение методов обрезки

Как обрезать изображение по контуру с помощью векторной маски: пошагово

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

1. Загрузите изображение в ваш проект. Перетащите его в холст или вставьте через меню File → Place Image.
2. Создайте векторный контур, по которому будет производиться обрезка. Используйте инструмент Pen (P), Shape (например, Ellipse или Polygon) или Frame. Убедитесь, что фигура находится выше изображения в стеке слоёв.
3. Выделите оба объекта: сначала изображение, затем фигуру (или наоборот — порядок важен только при группировке). В правой панели свойств появится кнопка «Use as Mask».
4. Нажмите «Use as Mask». Изображение будет обрезано по форме верхнего объекта. Теперь вы можете перемещать изображение внутри маски, не меняя саму форму.
5. Настройте положение изображения: кликните по нему внутри маски и сдвигайте до нужного расположения. Это особенно важно при работе с портретами или центрированными композициями.

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

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

Одно из главных преимуществ векторных масок — возможность редактировать как форму, так и содержимое после применения. Двойной щелчок по маске позволяет изменить её очертания с помощью инструмента Pen. Двойной щелчок по изображению внутри маски переводит вас в режим редактирования его позиции. Это поведение аналогично clipping mask в Adobe Illustrator.

Если вы случайно «потеряли» изображение, проверьте панель слоёв: оно должно находиться внутри группы, помеченной значком маски (🪄). Раскройте эту группу — и вы увидите оба объекта.

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

Простые фигуры — круг, квадрат, треугольник — режутся легко. Но что делать, если нужен силуэт дерева, капли воды или логотип? Здесь на помощь приходят продвинутые техники работы с векторами.

Первый способ — ручное рисование с помощью Pen Tool. Выберите инструмент P, кликайте по холсту, чтобы создавать точки, и тяните за ручки, чтобы формировать плавные кривые. Для точности используйте зум (Z) и включите привязку к пикселям (Pixel snapping).

Второй способ — преобразование текста в кривые. Напишите слово или символ, выберите его, нажмите Ctrl+Shift+O (Cmd+Shift+O) — и текст станет векторной фигурой. Теперь его можно использовать как маску. Это полезно для создания эффектных заголовков с фоновыми изображениями.

Третий способ — импорт SVG. Если у вас уже есть готовый векторный контур (например, из Illustrator или Framer), просто вставьте его в Figma. Он автоматически станет векторным объектом и может быть использован как маска.

Типичные ошибки при создании контуров

• Незамкнутый путь — Figma не примет открытую линию как маску. Убедитесь, что начальная и конечная точки соединены.
• Слишком сложный путь — большое количество точек может замедлять работу Figma. Оптимизируйте кривые с помощью инструмента Simplify (в контекстном меню).
• Неправильный порядок слоёв — маска должна быть выше изображения. Если выделить сначала маску, а потом изображение, функция «Use as Mask» не появится.
• Прозрачность маски — цвет и прозрачность фигуры-маски не влияют на результат. Маска работает только по форме, а не по цвету.

Работа с фреймами и Auto Layout: ограничения и возможности

Хотя фреймы и Auto Layout — основа современного прототипирования в Figma, их использование для обрезки имеет свои особенности.

Фрейм по умолчанию не обрезает содержимое. Чтобы включить маску, нужно активировать опцию “Clip content” в правой панели свойств. После этого всё, что выходит за границы фрейма, будет скрыто. Это работает как с изображениями, так и с текстом, фигурами и другими фреймами.

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

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

Когда использовать фрейм, а когда — векторную маску?

• Используйте фрейм с обрезкой, если форма всегда прямоугольная и требуется адаптивность.
• Выбирайте векторную маску, если нужен нестандартный контур, скругления или анимированный эффект.
• Применяйте Auto Layout + маска, если создаёте систему компонентов с динамическим контентом.

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

По его словам, одна из самых частых ошибок — чрезмерная детализация масок. «Не нужно делать 50 точек для силуэта птицы, если в итоге он будет размером 30×30 пикселей. Упрощайте формы, ориентируясь на финальный размер отображения. Чем меньше пикселей, тем проще должен быть контур.»

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

Заключение

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

• Для контурной обрезки всегда используйте векторную маску.
• Порядок слоёв критичен: маска должна быть выше изображения.
• Маски редактируются после применения — двойной клик для изменения.
• Фреймы с Clip content подходят для прямоугольных блоков и адаптивных сеток.
• При экспорте маски применяются автоматически — проверяйте результат заранее.