Как в figma вырезать часть объекта

Как в figma вырезать часть объекта

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

Чтобы вырезать часть объекта в Figma, проще всего использовать маскирование: разместите одну фигуру над другой и примените маску. Метод не изменяет оригинал, остаётся полностью редактируемым и идеально подходит для дизайна интерфейсов.

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

Маскирование как основной метод

Маскирование — самый распространённый и безопасный способ «вырезать» часть объекта в Figma. Суть метода проста: вы используете один объект как маску для другого. То, что находится за пределами маски, становится невидимым. Это не удаляет пиксели или векторные точки, а просто скрывает часть содержимого — как будто смотрите на мир через ключhole.
Для применения маски нужно два объекта: нижний — тот, что вы хотите обрезать (например, изображение или фигура), и верхний — сама маска (может быть прямоугольником, кругом, кривой Безье или даже текстом). Оба объекта должны находиться в одной группе, причём маска должна быть выше по стеку. После группировки выберите группу и нажмите Ctrl+Alt+M (или Cmd+Option+M на Mac), либо кликните правой кнопкой мыши и выберите «Use as Mask».

«Маскирование — ваш первый выбор, если вы работаете с изображениями или хотите сохранить возможность редактирования. Оно не разрушает данные, а значит, вы можете в любой момент изменить форму маски или заменить содержимое.» — Алексей Петров, UX-дизайнер, Senior Product Designer в IT-стартапе

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

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

Булевы операции для построения форм

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

  • Union (Объединение) — соединяет несколько фигур в одну;
  • Subtract (Вычитание) — вырезает верхнюю фигуру из нижней;
  • Intersect (Пересечение) — оставляет только ту часть, где фигуры перекрываются;
  • Exclude (Исключение) — удаляет область пересечения.

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

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

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

Векторная редакция — прямое вмешательство

Когда вам нужно тонко контролировать форму, а маски и булевы операции кажутся слишком грубыми, на помощь приходит прямая векторная редакция. Этот метод требует понимания контуров, точек и кривых Безье, но даёт максимальную свободу.
Чтобы начать, выберите векторный объект и нажмите Edit Object (иконка карандаша на панели или двойной щелчок). Теперь вы можете добавлять, удалять и перемещать точки, а также редактировать направляющие кривые. Чтобы «вырезать» часть фигуры, вы можете:

  • Удалить сегмент контура между двумя точками;
  • Добавить новые точки и перестроить путь;
  • Разделить фигуру с помощью инструмента Scissors (Ножницы).

Инструмент Scissors позволяет разрезать векторный путь в любой точке. Выберите его из панели инструментов (или нажмите C), кликните по контуру — и путь будет разорван. После этого вы можете скрыть или удалить ненужную часть. Однако учтите: после разрезания фигура перестаёт быть замкнутой, и её заливка может исчезнуть. Чтобы восстановить форму, нужно заново соединить точки или создать новый замкнутый контур.

«Векторная редакция — это как хирургия: точные движения, минимальное вмешательство. Используйте её, когда другие методы не дают нужной формы, особенно при работе с кастомными иконками или анимированными путями.» — Марина Костина, Lead UI Designer, продуктовая команда fintech-платформы

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

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

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

  1. Загрузите изображение в Figma;
  2. Нарисуйте поверх него фигуру той формы, которую хотите оставить (например, круг или многоугольник);
  3. Выделите оба объекта — сначала изображение, затем фигуру-маску;
  4. Нажмите Ctrl+Alt+M (Cmd+Option+M) или выберите «Use as Mask» в контекстном меню.

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

Полезно знать: если вы экспортируете изображение с маской, убедитесь, что в настройках экспорта выбран формат PNG с прозрачностью. В противном случае фон может остаться белым.

Для сложных случаев, когда нужно вырезать объект по контуру (например, человека на фоне), Figma пока не предлагает автоматического инструмента. Здесь потребуется внешняя обработка: вы можете использовать сервисы вроде remove.bg, затем загрузить результат в Figma и уже там доработать при необходимости.

Ошибки и как их избежать

Даже опытные пользователи Figma иногда допускают типичные ошибки при попытке вырезать части объектов. Знание этих ловушек поможет сэкономить время и нервы.
Первая ошибка — неправильный порядок слоёв при маскировании. Маска всегда должна быть выше по стеку, чем объект, который вы хотите обрезать. Если вы сгруппируете объекты в неправильном порядке, маска не сработает. Решение: проверьте панель слоёв (Layers) и при необходимости измените порядок с помощью Ctrl+[ или Ctrl+].
Вторая ошибка — применение маски к группе без вложенных объектов. Иногда дизайнеры забывают, что маска действует только на прямых потомков группы. Если вы применили маску к пустой группе, ничего не произойдёт. Убедитесь, что нужный объект находится внутри группы и ниже маски.
Третья ошибка — потеря редактируемости после булевых операций. Многие забывают, что Subtract преобразует объект в векторный путь. Если вы позже захотите изменить размер выреза, придётся делать это вручную. Совет: перед применением операции продублируйте исходные фигуры (Ctrl+D) и спрячьте их под слой — это ваш «план Б».

Полезно знать: Figma не позволяет применять маски к текстовым слоям напрямую. Чтобы обрезать текст, преобразуйте его в кривые (Create Outlines), но помните — после этого текст станет неизменяемым.

Четвёртая ошибка — непонимание различий между масками и булевыми операциями. Новички часто пытаются использовать Subtract для изображений, но этот инструмент работает только с векторами. Изображения нужно маскировать. Запомните: Subtract — для фигур, маски — для всего остального.

Сравнение методов: когда что использовать

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

Метод
Подходит для
Редактируемость
Ограничения
Маскирование
Изображения, группы, векторы, текст (после outline)
Высокая — можно менять маску и содержимое
Не экспортируется как вектор; не работает с текстом напрямую
Булевы операции (Subtract)
Векторные фигуры, иконки, логотипы
Низкая — после операции фигура становится путём
Только для векторов; нельзя применять к изображениям
Векторная редакция
Сложные формы, кастомные пути, анимации
Средняя — зависит от изменений
Требует навыков; легко испортить контур

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

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

Профессиональные дизайнеры едины во мнении: выбор метода зависит не столько от технических возможностей, сколько от философии работы. «Я почти всегда начинаю с масок, — делится практикой Дмитрий Соколов, арт-директор цифрового агентства. — Они позволяют быстро тестировать разные формы, не боясь «испортить» оригинал. Только когда форма стабилизируется, я могу преобразовать её в вектор с помощью Subtract — но только если это действительно нужно для экспорта или анимации».
Важно также учитывать командную работу. «Если вы работаете в команде, избегайте чрезмерного использования векторной редакции без пояснений, — предупреждает Анастасия Лебедева, продуктовый дизайнер. — Коллеги могут не понять, как вы получили такую форму. Документируйте шаги или оставляйте комментарии в Figma».
Современные тренды в дизайне интерфейсов — скруглённые углы, несимметричные блоки, обтравка под авторские формы — всё это увеличивает потребность в точном контроле над формами. Figma продолжает развивать инструменты: в 2025 году была добавлена поддержка вложенных масок, а в 2026 году анонсирована интеграция с AI-инструментами для автоматического создания масок по описанию. Это означает, что в будущем процесс станет ещё проще, но базовые навыки останутся актуальными.

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

Можно ли вырезать часть текста в Figma?
Напрямую — нет. Текст в Figma нельзя маскировать или вычитать как вектор. Однако вы можете преобразовать текст в кривые (выделите текст, нажмите Ctrl+Shift+O), после чего с ним можно работать как с векторной фигурой. Учтите: после этого текст станет неизменяемым.
Почему маска не работает с моим изображением?
Проверьте три вещи: 1) находится ли изображение и маска в одной группе; 2) расположена ли маска выше по стеку; 3) применена ли маска к группе, а не к отдельным объектам. Также убедитесь, что вы не пытаетесь применить маску к самой маске.
Как сделать мягкие края у вырезанного объекта?
Figma не поддерживает размытие масок напрямую, но вы можете имитировать эффект с помощью векторного градиента. Создайте фигуру с радиальным градиентом от непрозрачного к прозрачному и используйте её как маску. Эффект будет похож на затухание.
Можно ли вырезать одну часть изображения и оставить другую видимой?
Да, но не напрямую. Вам нужно создать маску той формы, которую вы хотите оставить. Например, если вы хотите скрыть центр изображения и оставить только края, нарисуйте рамку (фигуру с отверстием) и используйте её как маску. Это достигается через булевы операции или векторную редакцию.
Как экспортировать вырезанное изображение с прозрачностью?
Выберите объект, откройте панель экспорта (Export) справа, установите формат PNG и убедитесь, что включена опция «Include Transparency». Не используйте JPEG — он не поддерживает прозрачность.

Заключение

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

Главное — не бояться экспериментировать. Figma позволяет легко отменять действия, дублировать объекты и тестировать разные подходы. Чем чаще вы используете эти инструменты, тем быстрее они становятся частью вашего рабочего процесса.
  • Для изображений и редактируемых композиций используйте маскирование.
  • Для векторных иконок и логотипов подходит булева операция Subtract.
  • Векторная редакция — мощный, но требовательный инструмент для сложных форм.
  • Всегда проверяйте порядок слоёв и группировку перед применением масок.
  • Сохраняйте оригиналы объектов перед разрушительными операциями.
⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

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