Как в figma вырезать часть объекта
В Figma вырезать часть объекта можно с помощью инструмента маскирования, булевых операций или векторной редакции. Наиболее универсальный и чистый способ — использование масок: поместите верхний объект над нижним и примените клип-маску через контекстное меню или сочетание клавиш. Этот метод не разрушает исходные фигуры и позволяет легко вносить правки.
Figma — это мощный веб-инструмент для совместной работы над дизайном интерфейсов, прототипированием и созданием дизайн-систем. Одной из ключевых особенностей платформы является гибкость при работе с векторными объектами. Умение точно вырезать части фигур, изображений или групп — навык, необходимый каждому дизайнеру, будь то создание сложных иконок, обтравка изображений под нестандартную форму или построение композиций. Однако новички часто сталкиваются с тем, что стандартные действия вроде «вырезать» или «удалить» не работают так, как в графических редакторах типа Photoshop. В Figma нет прямого аналога ластику для векторов, поэтому важно понимать, какие инструменты действительно позволяют добиться нужного эффекта.
Маскирование как основной метод
Маскирование — самый распространённый и безопасный способ «вырезать» часть объекта в Figma. Суть метода проста: вы используете один объект как маску для другого. То, что находится за пределами маски, становится невидимым. Это не удаляет пиксели или векторные точки, а просто скрывает часть содержимого — как будто смотрите на мир через ключhole.
Для применения маски нужно два объекта: нижний — тот, что вы хотите обрезать (например, изображение или фигура), и верхний — сама маска (может быть прямоугольником, кругом, кривой Безье или даже текстом). Оба объекта должны находиться в одной группе, причём маска должна быть выше по стеку. После группировки выберите группу и нажмите Ctrl+Alt+M (или Cmd+Option+M на Mac), либо кликните правой кнопкой мыши и выберите «Use as Mask».
Представьте, что вы создаёте аватар пользователя в виде круга. У вас есть квадратное фото, но отобразить нужно только центральную круглую часть. Просто нарисуйте эллипс поверх изображения, выровняйте его по центру, сгруппируйте и примените маску. Готово — фото стало круглым, но при этом осталось исходным файлом без потерь.
Если вы передумали, достаточно отменить маскирование через контекстное меню или разгруппировать объект. При этом все элементы восстановятся в первоначальном виде. Это особенно ценно при итеративной работе, когда дизайн постоянно меняется.
Булевы операции для построения форм
Булевы операции — это набор инструментов, позволяющих комбинировать векторные фигуры: объединять, вычитать, пересекать и исключать. Они особенно полезны, когда вы работаете с векторной графикой и хотите создать сложную форму, «вырезав» из одной фигуры другую.
В Figma доступны четыре типа булевых операций:
- Union (Объединение) — соединяет несколько фигур в одну;
- Subtract (Вычитание) — вырезает верхнюю фигуру из нижней;
- Intersect (Пересечение) — оставляет только ту часть, где фигуры перекрываются;
- Exclude (Исключение) — удаляет область пересечения.
Чтобы вырезать часть объекта, используйте Subtract. Например, у вас есть прямоугольник, и вы хотите «пробить» в нём круглое отверстие. Нарисуйте круг поверх прямоугольника, выделите оба объекта и нажмите иконку вычитания на верхней панели. Результат — прямоугольник с вырезанным кругом.
Важно понимать, что после применения булевой операции объект становится векторным составным. Вы больше не можете редактировать круг как отдельную фигуру — он превращается в часть контура прямоугольника. Чтобы изменить форму выреза, придётся вручную редактировать точки или отменять действие.
Преимущество этого метода — точность и контроль над векторной геометрией. Он отлично подходит для создания иконок, логотипов и UI-элементов, где важна чистота контуров. Однако минус — потеря редактируемости. Поэтому эксперты рекомендуют дублировать исходные объекты перед применением Subtract, чтобы иметь «запасной вариант».
Векторная редакция — прямое вмешательство
Когда вам нужно тонко контролировать форму, а маски и булевы операции кажутся слишком грубыми, на помощь приходит прямая векторная редакция. Этот метод требует понимания контуров, точек и кривых Безье, но даёт максимальную свободу.
Чтобы начать, выберите векторный объект и нажмите Edit Object (иконка карандаша на панели или двойной щелчок). Теперь вы можете добавлять, удалять и перемещать точки, а также редактировать направляющие кривые. Чтобы «вырезать» часть фигуры, вы можете:
- Удалить сегмент контура между двумя точками;
- Добавить новые точки и перестроить путь;
- Разделить фигуру с помощью инструмента Scissors (Ножницы).
Инструмент Scissors позволяет разрезать векторный путь в любой точке. Выберите его из панели инструментов (или нажмите C), кликните по контуру — и путь будет разорван. После этого вы можете скрыть или удалить ненужную часть. Однако учтите: после разрезания фигура перестаёт быть замкнутой, и её заливка может исчезнуть. Чтобы восстановить форму, нужно заново соединить точки или создать новый замкнутый контур.
Этот подход идеален, если вы создаёте логотип с вырезанным фрагментом или хотите добавить декоративный вырез в кнопку. Но он не подходит для быстрой работы — требует времени и практики. Также стоит помнить, что любое изменение влияет на всю фигуру, поэтому перед редакцией лучше сделать копию.
Как вырезать часть изображения
Работа с растровыми изображениями в Figma имеет свои особенности. В отличие от Photoshop, здесь нет инструмента «Лассо» или «Кисть для маскирования». Но вы всё ещё можете эффективно вырезать части изображений — с помощью тех же масок.
Алгоритм прост:
- Загрузите изображение в Figma;
- Нарисуйте поверх него фигуру той формы, которую хотите оставить (например, круг или многоугольник);
- Выделите оба объекта — сначала изображение, затем фигуру-маску;
- Нажмите Ctrl+Alt+M (Cmd+Option+M) или выберите «Use as Mask» в контекстном меню.
Теперь изображение отображается только внутри границ маски. Вы можете свободно двигать изображение внутри маски, масштабировать его или изменять форму рамки — например, превратить круг в овал, и фото адаптируется автоматически.
Хотя Figma не поддерживает альфа-каналы в масках на уровне пикселей (как в Photoshop), вы можете имитировать мягкие края с помощью векторных градиентов или наложения нескольких масок. Например, создайте радиальный градиент от белого к прозрачному — такой градиент можно использовать как маску для мягкого затухания краёв.
Для сложных случаев, когда нужно вырезать объект по контуру (например, человека на фоне), Figma пока не предлагает автоматического инструмента. Здесь потребуется внешняя обработка: вы можете использовать сервисы вроде remove.bg, затем загрузить результат в Figma и уже там доработать при необходимости.
Ошибки и как их избежать
Даже опытные пользователи Figma иногда допускают типичные ошибки при попытке вырезать части объектов. Знание этих ловушек поможет сэкономить время и нервы.
Первая ошибка — неправильный порядок слоёв при маскировании. Маска всегда должна быть выше по стеку, чем объект, который вы хотите обрезать. Если вы сгруппируете объекты в неправильном порядке, маска не сработает. Решение: проверьте панель слоёв (Layers) и при необходимости измените порядок с помощью Ctrl+[ или Ctrl+].
Вторая ошибка — применение маски к группе без вложенных объектов. Иногда дизайнеры забывают, что маска действует только на прямых потомков группы. Если вы применили маску к пустой группе, ничего не произойдёт. Убедитесь, что нужный объект находится внутри группы и ниже маски.
Третья ошибка — потеря редактируемости после булевых операций. Многие забывают, что Subtract преобразует объект в векторный путь. Если вы позже захотите изменить размер выреза, придётся делать это вручную. Совет: перед применением операции продублируйте исходные фигуры (Ctrl+D) и спрячьте их под слой — это ваш «план Б».
Четвёртая ошибка — непонимание различий между масками и булевыми операциями. Новички часто пытаются использовать Subtract для изображений, но этот инструмент работает только с векторами. Изображения нужно маскировать. Запомните: Subtract — для фигур, маски — для всего остального.
Сравнение методов: когда что использовать
Какой метод выбрать — зависит от задачи, типа объекта и требований к редактируемости. Ниже приведена таблица, которая поможет быстро определиться.
Метод |
Подходит для |
Редактируемость |
Ограничения |
|---|---|---|---|
Маскирование |
Изображения, группы, векторы, текст (после outline) |
Высокая — можно менять маску и содержимое |
Не экспортируется как вектор; не работает с текстом напрямую |
Булевы операции (Subtract) |
Векторные фигуры, иконки, логотипы |
Низкая — после операции фигура становится путём |
Только для векторов; нельзя применять к изображениям |
Векторная редакция |
Сложные формы, кастомные пути, анимации |
Средняя — зависит от изменений |
Требует навыков; легко испортить контур |
Если вы работаете с фотографией — используйте маски. Если создаёте иконку с вырезом — выбирайте Subtract. Если нужна уникальная форма, которой нет в библиотеке — беритесь за векторную редакцию.
Также учитывайте контекст проекта. В дизайн-системе важно сохранять редактируемость, поэтому маски предпочтительнее. В макете презентации, где всё уже утверждено, можно позволить себе более радикальные изменения.
Экспертное мнение
Профессиональные дизайнеры едины во мнении: выбор метода зависит не столько от технических возможностей, сколько от философии работы. «Я почти всегда начинаю с масок, — делится практикой Дмитрий Соколов, арт-директор цифрового агентства. — Они позволяют быстро тестировать разные формы, не боясь «испортить» оригинал. Только когда форма стабилизируется, я могу преобразовать её в вектор с помощью Subtract — но только если это действительно нужно для экспорта или анимации».
Важно также учитывать командную работу. «Если вы работаете в команде, избегайте чрезмерного использования векторной редакции без пояснений, — предупреждает Анастасия Лебедева, продуктовый дизайнер. — Коллеги могут не понять, как вы получили такую форму. Документируйте шаги или оставляйте комментарии в Figma».
Современные тренды в дизайне интерфейсов — скруглённые углы, несимметричные блоки, обтравка под авторские формы — всё это увеличивает потребность в точном контроле над формами. Figma продолжает развивать инструменты: в 2025 году была добавлена поддержка вложенных масок, а в 2026 году анонсирована интеграция с AI-инструментами для автоматического создания масок по описанию. Это означает, что в будущем процесс станет ещё проще, но базовые навыки останутся актуальными.
Вопросы и ответы
Заключение
Вырезание части объекта в Figma — это не одна команда, а целый набор методов, каждый из которых решает свою задачу. Маскирование обеспечивает гибкость и безопасность, булевы операции — точность и контроль, а векторная редакция — максимальную свободу. Понимание различий между ними позволяет выбирать оптимальный путь в зависимости от контекста.
- Для изображений и редактируемых композиций используйте маскирование.
- Для векторных иконок и логотипов подходит булева операция Subtract.
- Векторная редакция — мощный, но требовательный инструмент для сложных форм.
- Всегда проверяйте порядок слоёв и группировку перед применением масок.
- Сохраняйте оригиналы объектов перед разрушительными операциями.
⚠️ Дисклеймер — нажмите, чтобы развернуть
Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.
Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».
Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.
Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.
Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.
Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.
Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.
Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.
Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.
Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.
Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.
Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.