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

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

Зачем нужна обрезка элементов в Figma

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

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

Технически, обрезка через маски — это группировка, при которой один объект (например, фигура или фрейм) становится контейнером для другого, скрывая всё, что выходит за его границы. Такой подход гибкий: вы можете менять форму маски, перемещать содержимое внутри, адаптировать под разные экраны — и всё это без потерь.

Как обрезать элемент через маски: пошаговая инструкция

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

1. Загрузите изображение или создайте объект, который нужно обрезать.
2. Нарисуйте фигуру (прямоугольник, круг, многоугольник) поверх объекта. Эта фигура станет маской.
3. Выделите сначала маску, затем — объект, который нужно обрезать (или наоборот, если удобнее).
4. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac), либо щёлкните правой кнопкой и выберите «Create Mask».
5. Готово: объект теперь отображается только внутри формы маски.

После создания маски вы можете:

• Перемещать содержимое внутри маски — например, сместить лицо в центре аватарки.
• Изменять размер маски — масштабирование автоматически обновит видимую область.
• Применять эффекты к маске (теней, обводок), но не к содержимому — они будут обрезаны.

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

Пример: обрезка фото под круглую аватарку

Допустим, у вас есть квадратное изображение 400×400 пикселей, и вы хотите сделать из него круглую аватарку диаметром 80 пикселей.

1. Создайте круг диаметром 80 пикселей.
2. Поместите его на слой выше изображения.
3. Выделите оба объекта.
4. Нажмите Cmd+Option+M (Mac).
5. Переместите изображение так, чтобы нужная часть (например, лицо) была в центре круга.

Теперь, даже если вы измените положение изображения внутри маски, внешний вид будет обновляться динамически. Это мощный инструмент для создания компонентов с вариативным контентом.

Особенности обрезки изображений и фигур

Хотя принцип маскирования универсален, есть различия в поведении при работе с разными типами объектов. Понимание этих нюансов поможет избежать разочарований.

Изображения, загруженные в Figma, нельзя «обрезать» напрямую — только через маски. Это ограничение, но и преимущество: качество исходного файла не теряется. Даже если вы масштабируете маску до 10 пикселей, оригинал остаётся доступным. Это критически важно при ретаргетинге макетов под другие разрешения.

Фигуры можно обрезать двумя способами: через маски и через булевы операции. Булевы операции («Объединить», «Вычесть») физически изменяют контур фигуры. Например, если вы вычитаете круг из прямоугольника, получается новая составная фигура. В отличие от маски, это необратимо, если не отменить действие.

Ещё один важный момент: маски не работают с эффектами размытия, если они применены к самому маскируемому объекту. Размытие будет обрезано строго по границе маски. Чтобы добиться «выходящего за край» эффекта, нужно применять размытие к родительскому фрейму или использовать дополнительные слои.

Альтернативные методы: когда маски не подходят

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

Один из таких случаев — работа с SVG. Если вы экспортируете маскированный объект как SVG, Figma по умолчанию включает всю структуру: и маску, и содержимое. Иногда это вызывает проблемы совместимости. В этом случае лучше использовать векторные пути.

1. Преобразуйте изображение в вектор (через плагины, например «Image Tracer»).
2. Используйте инструмент «Pen» или «Boolean Operations» для создания нужной формы.
3. Экспортируйте как чистый SVG-путь.

Ещё один вариант — использование плагинов. Например, «Mask to Frame» помогает быстро конвертировать маски в фреймы, а «Crop Image» позволяет имитировать физическую обрезку. Однако такие решения — временное решение. Лучше придерживаться нативных возможностей Figma.

Также стоит упомянуть о художественной обрезке. Иногда дизайнер хочет не просто скрыть часть изображения, а добавить эффект затухания, размытия к краям или текстурного перехода. Здесь маски недостаточно. Нужно комбинировать их с градиентами, opacity masks (через слои с прозрачностью) или внешними редакторами.

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

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

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

Ещё одна тонкость: маски не работают с объединёнными фигурами (compound paths), если они содержат дыры. Например, если вы пытаетесь использовать букву «О» как маску, внутренняя часть может не скрывать содержимое. В этом случае преобразуйте фигуру в контур или используйте отдельные слои.

Советы эксперта: как работать с масками эффективно

Работа с масками может стать частью вашего ежедневного workflow, если следовать нескольким практикам, проверенным годами.

Используйте именованные фреймы

Вместо того чтобы создавать случайные фигуры, называйте фреймы понятно: «Avatar Mask», «Banner Crop». Это упрощает навигацию в большом файле и помогает команде.

Комбинируйте маски с компонентами

Создайте компонент с маской и варьируйте содержимое через instance. Например, сделайте компонент «User Card» с маскированной аватаркой, а потом меняйте изображения для разных пользователей.

Не забывайте про constraints

Если маска — это фрейм, установите constraints для содержимого. Например, закрепите изображение по центру — тогда при изменении размера фрейма оно останется в нужном положении.

Также рекомендую использовать плагины для массовой обработки. Например, «Batch Image Resizer» позволяет применять маски ко множеству изображений одновременно — идеально для карточек товаров или портретов команды.

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

Заключение

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

• Используйте маскирование (Ctrl+Alt+M) как основной метод обрезки.
• Всегда следите за порядком слоёв: маска должна быть выше.
• Маски не удаляют данные — это преимущество для редактирования.
• Комбинируйте маски с компонентами и constraints для масштабируемости.
• Избегайте булевых операций для изображений — они необратимы.