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

Вырезать изображение в Figma — значит создать маску или выделить часть рисунка с помощью инструментов обтравки, чтобы скрыть ненужные фрагменты. Основной способ — использование масок (masking), альтернативные методы включают кадрирование, клип-пути и ручное выделение с помощью Pen Tool. Главная рекомендация: всегда работайте с копией оригинального изображения и используйте vector masks для максимальной гибкости.

Что означает «вырезать изображение» в Figma?

Figma — это векторный редактор, а не графический растровый инструмент вроде Photoshop. Поэтому прямого инструмента «лассо» или «вырезать по контуру» здесь нет. Вместо этого используется принцип маскирования: вы помещаете изображение внутрь векторной формы, и всё, что выходит за её границы, становится невидимым. Это не уничтожает пиксели, а лишь скрывает их — вы можете изменить форму маски, переместить изображение внутри или полностью сбросить эффект.
Такой подход даёт огромные преимущества при работе с прототипами и дизайном интерфейсов. Например, вы можете быстро менять аватарки, иконки или баннеры, не пересоздавая каждый раз маску. Кроме того, маски в Figma поддерживают прозрачность, вложенные слои и анимацию при прототипировании.
Маскирование — стандартный способ обработки изображений в современных UI-редакторах. По данным исследований UX-практик 2025 года, более 78% дизайнеров используют маски вместо предварительной обработки изображений в сторонних программах. Это экономит время и повышает гибкость проекта.

Основные способы вырезки: от простого к сложному

Существует несколько способов скрыть часть изображения в Figma. Выбор зависит от задачи: нужно ли вам просто обрезать фото по кругу или выделить сложную форму, например, силуэт дерева или человека.
Первый и самый простой — кадрирование с помощью прямоугольной маски. Подходит для баннеров, карточек товаров, миниатюр. Второй — использование готовых фигур: круг, эллипс, многоугольник. Третий — создание собственного контура с помощью Pen Tool. И, наконец, четвёртый — комбинирование нескольких масок через Boolean Operations.
Каждый метод имеет свои плюсы и ограничения. Например, кадрирование не позволяет делать закруглённые углы без дополнительных действий, а ручной контур требует времени и точности. Однако все они основаны на одном механизме — layer masking.

• Прямоугольная маска — достаточно выделить изображение и нажать Ctrl+T (Cmd+T), затем потянуть углы.
• Фигурная маска — создаёте круг, кладёте изображение сверху, затем применяете маску.
• Векторный контур — рисуете путь вокруг нужной области, конвертируете в маску.
• Boolean + Mask — комбинируете фигуры, чтобы получить сложную форму, затем маскируете.

Пошаговая инструкция: как сделать маску в Figma

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

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

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

• Перемещать изображение внутри маски, удерживая Alt (Option) и перетаскивая.
• Менять размер и форму маски — изображение адаптируется автоматически.
• Отключить маску через правую панель свойств или сочетание Ctrl+Shift+M.

Если вы хотите вырезать нестандартную форму, например, звезду или стрелку, создайте её с помощью Pen Tool или импортируйте SVG. Затем проделайте те же шаги. Важно: маска должна быть векторным объектом, а не текстом или растровым изображением.

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

Когда требуется вырезать изображение по сложному контуру — например, человек на фоне, дерево, логотип — простых фигур недостаточно. На помощь приходят Pen Tool, Scissors Tool и трассировка.
Pen Tool позволяет вручную нарисовать контур вокруг объекта. Начните с выбора инструмента (P), затем кликайте по ключевым точкам на границе объекта. Для плавных кривых удерживайте мышь и тяните ручки. Замкните контур, кликнув по начальной точке.
После создания пути:

• Убедитесь, что он замкнут и не имеет разрывов.
• Поместите изображение выше по слоям.
• Выделите оба объекта и примените маску (Ctrl+Alt+M).

Для ещё большей точности используйте функцию Image Tracing — хотя Figma не поддерживает её напрямую, вы можете предварительно обработать изображение в Illustrator или специальных онлайн-сервисах (например,Vectorizer.io), а затем импортировать векторный контур в Figma.
Ещё один полезный приём — Scissors Tool (C). Он позволяет разрезать векторный путь на части. Например, если вы нарисовали общий контур, но хотите удалить лишний фрагмент, активируйте Scissors, кликните на две точки разреза, затем удалите сегмент.

Как вырезать человека или объект с помощью клип-пути

Хотя термин «клип-путь» пришёл из Adobe Illustrator, в Figma аналогом является именно векторная маска. Алгоритм тот же:

1. Загружаете фотографию с человеком на однотонном фоне.
2. Инструментом Pen рисуете контур вокруг фигуры.
3. Применяете маску.
4. При необходимости корректируете узлы (Node Tool, A).

Если фон сложный, используйте полутона и мягкие края. В Figma можно добавить blur к маске или использовать inner stroke, чтобы смягчить переходы.

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

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

Ошибка 1: Маска не применяется

Причина: неправильный порядок слоёв. Маска (векторная фигура) должна находиться выше изображения в стеке. Если изображение выше — Figma не позволит создать маску.
Решение: перетащите фигуру вверх в панели слоёв или используйте Ctrl+] (Cmd+]). Проверьте порядок перед применением маски.

Ошибка 2: Изображение исчезло после маскирования

Часто происходит, когда изображение слишком маленькое или смещено. Маска остаётся, но сама картинка вне её области.
Решение: дважды щёлкните по маске, чтобы войти внутрь, и переместите изображение так, чтобы оно покрывало нужную часть. Удерживайте Alt (Option) при перетаскивании.

Ошибка 3: Нельзя редактировать маску после применения

На самом деле можно. Достаточно выделить маску в панели слоёв и использовать Node Tool (A), чтобы изменить узлы. Или дважды щёлкнуть по маске, чтобы войти в режим редактирования содержимого.

Ошибка 4: Маска теряет качество при масштабировании

Это происходит, если вы масштабируете само изображение, а не маску. Векторная форма всегда остаётся чёткой, но растровое изображение может стать пиксельным.
Решение: используйте изображения с запасом по разрешению (2x или 3x). Не увеличивайте фото больше 100% от оригинала.

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

Маскирование — не просто технический приём, а мощный инструмент проектирования. Грамотное использование масок позволяет создавать адаптивные макеты, где изображения автоматически подстраиваются под разные формы и размеры.
Главный принцип: сохраняйте редактируемость. Вместо того чтобы экспортировать вырезанное изображение, оставляйте его в виде маски — так вы сможете менять источники, размеры и композицию без потерь.
Используйте маски в сочетании с компонентами и вариантами. Например, создайте компонент «Аватар» с маской в форме круга, а затем меняйте изображения для разных состояний: online, offline, guest. Это ускоряет работу и делает дизайн-систему гибче.
Ещё один совет: комбинируйте маски с эффектами. Например, добавьте тень (drop shadow) к маске — и она будет применяться только к видимой части изображения. То же касается blur, inner glow и stroke.
Помните, что маски не влияют на производительность экспорта. При экспорте Figma обрезает изображение по маске, но вы можете выбрать опцию «Include in export» для маски или отключить её.

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

Заключение

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

• Используйте маски, а не внешние редакторы, для вырезания изображений.
• Всегда проверяйте порядок слоёв: фигура-маска должна быть выше изображения.
• Редактируйте положение изображения внутри маски с помощью Alt+drag.
• Применяйте Pen Tool и Boolean Operations для сложных форм.
• Сохраняйте оригиналы изображений и используйте маски в компонентах.