2025-11-27 12:10:08

Как вырезать фотку в фигме

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

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

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

Простое кадрирование

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

Кадрирование в Figma - это далеко не примитивное обрезание краев; это тонкий инструмент для управления вниманием пользователя, позволяющий убрать всё лишнее и сфокусироваться на главном объекте.

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

Это самый частый сценарий.

Добавьте изображение в проект

Перетащите файл с фотографией (JPG, PNG и т.д.) с компьютера прямо на канву Figma.
Или используйте меню: на верхней панели выберите Place image (или нажмите Ctrl+Shift+K).

Выберите изображение

Кликните на добавленную фотографию левой кнопкой мыши. Вокруг нее появится синяя рамка с маркерами (квадратиками по углам и сторонам).

Включите режим кадрирования

Способ А: Нажмите на иконку «Crop» (она выглядит как два угла, образующие прямоугольник) на панели инструментов прямо над холстом.
Способ Б: Используйте горячую клавишу C.
После этого рамка вокруг изображения изменится. Угловые маркеры пропадут, а по краям появятся «ушки» для обрезки.

Обрежьте изображение

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

Примените кадрирование

Чтобы завершить, нажмите Enter или кликните на любом пустом месте холста.
Чтобы отменить кадрирование, нажмите Esc.

Создание маски для сложного вырезания

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

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

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

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

Подготовка

Поместите изображение на холст.

Создайте фигуру, которая будет служить "трафаретом". Для этого:

Нажмите R и нарисуйте прямоугольник, или O и нарисуйте эллипс.
Для сложных форм: Используйте инструмент «Pen» (перо, горячая клавиша P). Обведите контур объекта, который хотите оставить, создавая векторную маску.

Наложение фигуры на изображение

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

Создание маски

Выделите и изображение, и фигуру-маску. Можно зажать Shift и кликнуть на них по очереди, или выделить их обеих рамкой (зажав левую кнопку мыши и обведя).

Теперь есть три способа применить маску:

Горячие клавиши (самый быстрый): Нажмите Ctrl+Alt+M.
Правая кнопка мыши: Кликните правой кнопкой на выделенных объектах - «Use as Mask».
Иконка в меню: В правой панели, в разделе «Design», нажмите на иконку с квадратиком и кружком внутри (над надписью «Fill»).

Что произойдет:

Фигура станет маской. Все, что было внутри этой фигуры, останется видимым, а все, что снаружи, скроется.
На слоях в левой панели вы увидите, что изображение и фигура объединились в группу маски (Mask Group). Фигура будет сверху и отмечена значком маски ().

Редактирование

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

Использование инструмента «Pen» для точного обтравливания

Это частный случай предыдущего метода, но самый точный для сложных объектов.

Возьмите инструмент «Pen» (P).
Увеличьте масштаб для точности (Ctrl + +).
Поставьте опорные точки вдоль контура объекта, который вы хотите вырезать. Старайтесь ставить точки в местах изгибов.
Замкните контур, кликнув на первую точку.
Теперь у вас есть идеальная векторная маска в форме вашего объекта.
Выделите эту маску и ваше изображение и примените маску (Ctrl+Alt+M).

Использование плагинов для удаления фона

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

Всего за несколько кликов сложная, требующая большого внимания задача выполняется автоматически. Такие плагины, как Remove BG, идеально справляются с типичными сценариями - портретами людей, изображениями продуктов или предметов на контрастном фоне.

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

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

Найдите и установите плагин

На верхней панели меню выберите «Resources» -> «Plugins».
В поиске введите «remove background».
Популярные и надежные плагины: "Remove BG" (от Figma), "BG Remover", "Image Tracer".
Нажмите «Install» и разрешите установку.

Используйте плагин

Выделите изображение на холсте, с которым хотите работать.
Снова зайдите в «Resources» - «Plugins» и найдите установленный плагин в разделе «Installed». Или нажмите Ctrl+/ и введите его название.
Запустите плагин.
Обычно плагины работают автоматически. Подождите несколько секунд - плагин обработает изображение в облаке и вернет результат.

Результат

В 90% случаев плагин идеально удаляет фон, и вы получаете объект, уже обрезанный по контуру, часто сразу как векторный путь (Shape).
Останется только немного подправить контур, если алгоритм ошибся в сложных местах (например, между пальцами).

Полезные советы и примечания

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

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

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

Работа со слоями: После создания маски всегда следите за панелью слоев. Именно там вы можете легко выбрать либо маску, либо само изображение для редактирования.
Заливка и обводка: У маски (векторной фигуры) не должно быть заливки (Fill) и обводки (Stroke). Иначе она будет видна.
Если ничего не получается: Убедитесь, что маска находится ПОВЕРХ изображения в иерархии слоев. Если изображение поверх маски, эффекта не будет.
Экспорт: При экспорте вырезанного изображения выберите формат PNG - он поддерживает прозрачность, и вы получите ваш объект без белого фона.

Вывод

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

Чтобы вы могли быстро выбрать нужную технику в любой ситуации, вот сводная таблица всех рассмотренных способов:

Метод	Суть метода	Когда использовать	Плюсы	Минусы
Кадрирование	Обрезка прямоугольной области изображения.	Нужно изменить композицию, убрать лишнее по краям, подогнать под нужные пропорции.	Простота и скорость (C), неразрушающее редактирование.	Не подходит для удаления сложного фона.
Маска с фигурой	Векторная фигура (прямоугольник, эллипс) работает как трафарет.	Нужно оставить видимой область простой формы (круг, скругленный прямоугольник).	Быстро, идеально ровные края, легко редактировать.	Ограничено формой базовой фигуры.
Маска с пером	Точное обведение контура объекта векторным (path) для создания маски.	Требуется точно вырезать объект сложной формы (логотип, предмет, человека).	Высокая точность и полный контроль над формой.	Требует времени и навыка работы с пером.
Плагины	Автоматическое удаление фона с помощью AI.	Быстро извлечь человека или объект с относительно однородного фона.	Невероятная скорость, идеальный результат в подходящих случаях.	Может ошибаться в сложных областях (волосы, прозрачность).

Не существует единственно верного способа - есть инструмент, наиболее подходящий для конкретной задачи. Для повседневной работы кадрирование и плагины экономят львиную долю времени. Для финальной, pixel-perfect отделки незаменимым остается инструмент «Перо». Комбинируя эти методы, вы сможете профессионально работать с любыми изображениями прямо в Figma, не прибегая к помощи сторонних редакторов.