Как в фигме стереть часть картинки

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

Маскирование картинки: основной способ скрыть часть изображения

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

Для начала добавьте изображение в ваш дизайн. Перетащите его в холст или используйте команду File → Place Image. Затем создайте фигуру — круг, прямоугольник или любой другой контур — той формы, которую хотите использовать как «окно» для отображения части картинки.

• Выделите одновременно изображение и фигуру (удерживая Shift).
• Нажмите правой кнопкой мыши и выберите Create Mask (или используйте комбинацию Ctrl+Alt+M / Cmd+Option+M).
• Изображение автоматически попадёт внутрь фигуры и будет отображаться только в её границах.

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

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

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

Если нужно временно отключить маску, выберите фрейм с маской и нажмите Disable Mask в правой панели. Это полезно при тестировании композиции или корректировке положения.

Создание вырезки с помощью фигур и фреймов

Иногда задача требует не просто скруглённого окна, а сложной формы — например, вырезать силуэт человека или создать эффект «выбитого» участка. Здесь помогут составные фигуры и булевы операции.

Создайте два или более контура: один как основная маска, второй — как область, которую нужно «стереть». Например, если у вас круглая маска, а вы хотите убрать из неё квадратный участок, объедините фигуры через операцию Subtract.

1. Нарисуйте основную маску (например, круг).
2. Поверх неё добавьте фигуру той формы, которую хотите «стереть» (например, прямоугольник).
3. Выделите обе фигуры и примените Subtract в панели свойств.
4. Поместите изображение внутрь получившегося контура и создайте маску.

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

Альтернатива: использование Auto Layout и фреймов

Auto Layout в Figma также может использоваться для управления видимостью содержимого. Если вы поместите изображение внутрь фрейма с ограниченными размерами и включите Clips Content, то часть картинки за пределами фрейма станет невидимой.

Чтобы активировать этот режим:

• Выделите фрейм с изображением.
• В правой панели найдите опцию Clips Content и включите её (значок квадрата с уголком).
• Перемещайте изображение — всё, что выходит за границы фрейма, будет скрыто.

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

Работа с прямоугольными и сложными формами

Большинство задач сводятся к прямоугольным или круглым маскам, но Figma позволяет использовать любые пути — от многоугольников до кривых Безье. Это открывает возможности для креативных решений в UI/UX-дизайне.

Для создания маски произвольной формы:

• Выберите инструмент Pen (P) и нарисуйте контур.
• Добавьте изображение поверх него.
• Выделите оба элемента и примените Create Mask.

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

Экспорт изображений с масками

При экспорте фрейма с маской Figma автоматически вырежет видимую часть. Вы можете выбрать формат PNG, JPEG или SVG (если маска векторная). Убедитесь, что в настройках экспорта включена опция Include для нужного слоя.

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

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

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

• Маска не применяется: Убедитесь, что фигура находится выше изображения в слоях. Порядок имеет значение.
• Изображение исчезло: Возможно, вы случайно применили маску к пустому фрейму. Проверьте, вложено ли изображение внутрь.
• Нельзя редактировать маску: Дважды щёлкните по фрейму с маской, чтобы войти в режим редактирования содержимого.
• Форма маски не соответствует ожиданиям: Используйте Vector Combine для точного контроля над контурами.

Если вы работаете в команде, оставляйте комментарии к маскам: «Маска для аватара», «Не редактировать». Это снижает риск случайного изменения.

Чек-лист: проверка перед публикацией

1. Правильно ли расположены слои: маска сверху, изображение внутри?
2. Активирована ли опция маски (не просто вложенность)?
3. Корректно ли отображается изображение при разных размерах фрейма?
4. Подготовлены ли экспортные настройки для разработчиков?

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

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

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

Заключение

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

• Используйте маски вместо ластика — это основной способ скрыть часть изображения.
• Помещайте изображение внутрь фигуры и применяйте Create Mask.
• Комбинируйте маски с булевыми операциями для сложных форм.
• Не забывайте про Clipping в фреймах для быстрого обрезания.
• Экспортируйте правильно: PNG для прозрачности, SVG для векторных масок.