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

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

Зачем вырезать часть изображения в Figma

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

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

Как вырезать изображение с помощью маски

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

Вот пошаговая инструкция:

1. Загрузите изображение в Figma — перетащите файл в рабочую область или используйте File > Import.
2. Создайте фигуру, которая определит форму выреза: прямоугольник, круг, эллипс, многоугольник или даже произвольную форму, нарисованную инструментом Pen (P).
3. Разместите фигуру точно поверх той части изображения, которую хотите оставить. Убедитесь, что фигура полностью перекрывает нужный фрагмент.
4. Выделите оба объекта: сначала изображение, затем фигуру (удерживайте Shift при клике).
5. Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac). Альтернативно — кликните правой кнопкой и выберите Mask из контекстного меню.

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

Альтернатива: обрезка по контуру

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

Чтобы использовать обрезку по контуру:

1. Нарисуйте точный контур с помощью инструмента Pen (P). Это может быть сложная форма с множеством точек — Figma поддерживает любую кривую.
2. Поместите контур поверх изображения.
3. Выделите оба объекта (сначала изображение, затем контур).
4. Нажмите Ctrl+Alt+M — результат будет тот же, что и при маскировании.

Ключевое отличие от обычной маски: вы можете редактировать контур после применения. Выберите его, используйте инструмент Edit Points (E) и корректируйте узлы — изображение внутри автоматически подстроится. Это особенно полезно при работе с портретами, логотипами или сложными элементами интерфейса.

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

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

• Неправильный порядок выделения: если вы сначала выделяете фигуру, а потом изображение — Figma не поймёт, что нужно маскировать именно изображение. Всегда начинайте с изображения.
• Забыли проверить прозрачность: если фигура-маска имеет прозрачный залив или обводку — это не повлияет на маску, но если вы случайно удалили залив, маска может перестать работать. Убедитесь, что фигура имеет непрозрачный залив (fill).
• Изображение слишком маленькое: если вы используете маленькое изображение для большой маски — оно будет растягиваться и терять качество. Лучше использовать изображения в высоком разрешении (минимум 2x размера маски).
• Маска применена к группе, а не к изображению: если изображение находится внутри группы, маска может не сработать корректно. Разгруппируйте объекты или примените маску к группе целиком.

Также не забывайте: маска не удаляет изображение — она просто скрывает его часть. Это значит, что вы можете легко отключить маску, выбрав объект и нажав Ctrl+Alt+M ещё раз — изображение вернётся в исходное состояние.

Продвинутые техники: сложные формы и градиенты

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

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

• Создайте прямоугольник с градиентом от белого к чёрному.
• Наложите его поверх изображения.
• Примените маску (Ctrl+Alt+M).

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

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

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

Как экспортировать вырезанное изображение

После того как вы вырезали изображение, часто возникает вопрос: как сохранить его как отдельный файл? Figma позволяет экспортировать вырезанный фрагмент как PNG, JPG или SVG — но важно понимать, что маска не удаляет данные, а только скрывает их. Поэтому при экспорте нужно убедиться, что вы экспортируете именно маскированный объект, а не исходное изображение.

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

1. Выберите маскированный объект (он отображается в дереве слоёв с иконкой маски — квадрат со скруглённым углом).
2. В панели Properties нажмите кнопку Export.
3. Выберите формат (PNG рекомендуется для веба, JPG — для фотографий, SVG — для векторных форм).
4. Убедитесь, что в настройках экспорта стоит опция Include mask (если доступна) — она автоматически обрезает изображение по маске.

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

Экспертное мнение: как дизайнеры используют маски на практике

Сергей Романов, арт-директор студии «Дизайн-Лаб», с 10-летним опытом работы в продуктовых командах, рассказывает:

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

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

Заключение

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

• Используйте маскирование (Ctrl+Alt+M) — это самый надёжный способ вырезать изображение.
• Порядок выделения объектов критичен: сначала изображение, потом фигура.
• Маски можно редактировать в любое время — они не удаляют данные, а только скрывают их.
• Для сложных форм используйте контуры, нарисованные инструментом Pen.
• Экспортируйте только маскированные объекты, а не исходные изображения.