Как удалить часть изображения в фигме

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

Почему нельзя просто удалять части изображений в Figma

Figma — это векторный редактор, а не растровый. В отличие от Photoshop или GIMP, он не предназначен для пиксельной обработки. Любое прямое редактирование пикселей внутри изображения (например, с помощью инструмента «Ластик») невозможно — Figma не поддерживает пиксельные операции с растровыми объектами. Если вы пытаетесь «вырезать» кусок фото с помощью инструмента «Eraser», вы столкнетесь с тем, что он просто не работает на изображениях. Это не ошибка — это особенность архитектуры программы.

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

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

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

Вот как это сделать:

1. Загрузите изображение в Figma, перетащив его из проводника или через File → Import.
2. Создайте фигуру, которая будет определять видимую область: круг, прямоугольник, произвольный путь или даже текст. Для аватаров чаще всего используется круг — нарисуйте его с помощью инструмента Ellipse (O).
3. Разместите фигуру точно поверх изображения так, чтобы она покрывала ту часть, которую вы хотите оставить видимой.
4. Выделите оба слоя: сначала — фигуру (она должна быть верхней), затем — изображение. Важно: порядок выделения имеет значение! Верхний слой — это маска.
5. Нажмите Ctrl+Alt+M (на Mac — Cmd+Option+M) или щёлкните правой кнопкой мыши и выберите Clip Mask.

Теперь изображение «вписывается» в форму. Вы можете перемещать изображение внутри маски, изменять размер маски, менять её форму — всё это не повредит исходное фото. Чтобы отключить маску — выделите объединённый слой и нажмите Ctrl+Alt+Shift+M (или правой кнопкой → Release Clipping Mask).

Удаление с помощью вычитания фигур

Иногда нужно не просто скрыть часть изображения, а создать эффект «вырезания» — например, чтобы вставить фото в сложную форму с выемками. Для этого используется функция Subtract (вычитание), но она работает только с векторными объектами. Чтобы применить её к изображению, нужно обернуть его в векторную форму.

Процесс выглядит так:

1. Создайте основную форму, в которую вы хотите вписать изображение (например, прямоугольник с закруглёнными углами).
2. Создайте вторую фигуру — ту, которую вы хотите «вычесть» из первой (например, маленький прямоугольник в центре).
3. Выделите обе фигуры и нажмите Ctrl+Alt+- (или Subtract в панели слева).
4. Теперь у вас есть «дырка» в форме — поместите изображение под эту фигуру и примените к ней маску обрезки, как описано выше.

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

Использование режимов наложения для частичного скрытия

Если вам нужно не удалить часть изображения, а сделать её прозрачной, полупрозрачной или «смешанной» с фоном — используйте режимы наложения (Blend Modes). Они не удаляют пиксели, но позволяют визуально «вырезать» области, не разрушая структуру.

Например, вы хотите, чтобы фото на фоне постепенно исчезало к краям. Добавьте поверх изображения градиентный прямоугольник. Установите режим наложения Overlay или Multiply, а затем снизьте непрозрачность до 30–50%. Визуально это создаст эффект «затухания» — как будто часть изображения «удалена».

Также можно использовать Linear Gradient Mask — это когда вы применяете градиент как маску. Для этого:

1. Создайте градиентный прямоугольник (например, от чёрного к белому).
2. Поместите его поверх изображения.
3. Выделите оба слоя и примените Clipping Mask.
4. Измените направление градиента — от белого (видимый) к чёрному (скрытый).

Теперь изображение плавно исчезает с одного края — идеально для баннеров, заголовков или фоновых секций.

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

Даже опытные дизайнеры допускают типичные ошибки при работе с масками и вычитанием. Вот самые распространённые:

• Неправильный порядок слоёв. Маска должна быть сверху. Если вы выделили сначала изображение, а потом фигуру — маска не сработает. Всегда проверяйте: верхний слой — это маска.
• Использование «Eraser». Инструмент «Ластик» не работает с изображениями. Он доступен только для векторных форм. Пытаясь его применить к фото, вы теряете время и рискуете случайно удалить другие слои.
• Не сохраняется исходник. Некоторые дизайнеры дублируют изображение, чтобы «поиграть» с маской, но забывают удалить оригинал. Это увеличивает размер файла и путает команду. Всегда удаляйте ненужные копии.
• Отключение маски без сохранения. После снятия маски изображение возвращается в исходное состояние, но если вы не сохранили версию с маской — вы потеряете продуманную композицию. Используйте версионность Figma (History) или создавайте отдельные страницы для экспериментов.

Таблица: сравнение методов удаления части изображения

Экспертное мнение: как работают профессионалы

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

Совет от эксперта: всегда используйте Auto Layout для рамок с масками. Это позволяет изображениям автоматически адаптироваться под изменение размера контейнера — особенно полезно при создании адаптивных интерфейсов.

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

Заключение

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

• Никогда не используйте «Ластик» для изображений — он не работает.
• Маска обрезки — лучший способ скрыть часть фото без потерь.
• Вычитание фигур подходит для создания сложных форм с вырезами.
• Режимы наложения и градиенты позволяют создавать плавные переходы.
• Всегда сохраняйте исходные изображения и используйте компоненты для повторного применения.