Как обрезать края в фигме

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

Основные методы обрезки в Figma

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

Существует три основных подхода к обрезке краёв:

• Использование фреймов с опцией «Clip content»;
• Применение векторных масок (vector masks);
• Логические операции (Boolean operations) для создания новых форм.

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

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

Как работает Clip Content

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

Чтобы активировать эту функцию:

1. Выделите фрейм с объектами внутри.
2. В правой панели найдите раздел «Design».
3. Отметьте чекбокс «Clip content».

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

Маскирование через фрейм: пошаговая инструкция

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

Допустим, у вас есть изображение, которое частично выходит за границы карточки. Вам нужно, чтобы оно «обрезалось» по краям блока.

Шаг 1: Создайте фрейм нужного размера

• Нажмите F или выберите инструмент Frame.
• Нарисуйте прямоугольник нужного размера — это будет область обрезки.
• Убедитесь, что фрейм расположен на том же уровне слоёв, где будет содержимое.

Шаг 2: Поместите объект внутрь фрейма

• Перетащите изображение, текст или фигуру внутрь фрейма в панели слоёв.
• Или выделите объект и нажмите Ctrl+Alt+G (или Cmd+Option+G на Mac), чтобы сгруппировать с фреймом.

Шаг 3: Включите обрезку содержимого

• Выделите фрейм.
• В правой панели найдите переключатель «Clip content» и включите его.
• Готово: всё, что выходит за границы фрейма, исчезнет.

Преимущества и ограничения метода

Если вам нужно закруглённое обрезание, просто задайте радиус скругления углов фрейма. Figma автоматически применит его к маске.

Векторные маски и Boolean Operations

Когда нужна нестандартная форма обрезки — например, шестиугольник, звезда или произвольный контур — пригодятся векторные маски и Boolean-операции.

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

Figma позволяет использовать любую векторную фигуру как маску. Этот способ даёт полную свободу в дизайне.

Пошагово:

1. Создайте векторную фигуру, которая будет служить формой обрезки (например, круг или многоугольник).
2. Поместите её поверх объекта, который нужно обрезать (например, изображения).
3. Выделите оба слоя: сначала изображение, затем фигуру-маску.
4. Нажмите правой кнопкой → «Use as Mask» или воспользуйтесь контекстным меню в верхней панели.

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

Boolean Operations: Union, Subtract, Intersect

Boolean-операции позволяют комбинировать фигуры, создавая новые формы. Они находятся в верхней панели инструментов при выделении нескольких фигур.

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

Чтобы вырезать края с помощью вычитания:

1. Нарисуйте две перекрывающиеся фигуры.
2. Выделите обе.
3. Нажмите «Subtract».
4. Нижняя фигура будет модифицирована: из неё удалится часть, покрытая верхней.

Отличие маски от Boolean-операции

Обрезка изображений и работа с растровыми объектами

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

Как обрезать фотографию по форме

Самый распространённый случай — сделать круглое фото профиля.

Шаги:

1. Загрузите изображение в Figma.
2. Нарисуйте круг того же размера, что и желаемая аватарка.
3. Поместите круг выше изображения в слоях.
4. Выделите оба слоя и выберите «Use as Mask».

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

Экспорт обрезанных изображений

Figma позволяет экспортировать только видимую часть объекта, даже если она обрезана маской.

Чтобы экспортировать:

• Выделите фрейм или группу с маской.
• В правой панели нажмите «+» в секции Export.
• Выберите формат (PNG, JPG), разрешение и нажмите «Export».

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

Советы по эффективности и типичные ошибки

Работа с обрезкой может быть простой, но начинающие дизайнеры часто допускают ошибки, которые замедляют процесс.

Распространённые ошибки

• Забывают включить Clip content: фрейм создан, но обрезка не работает. Проверьте чекбокс в правой панели.
• Неправильный порядок слоёв: маска должна быть выше объекта, который нужно обрезать.
• Попытка применить Boolean к изображению: операции работают только с векторами.
• Изменение маски после применения: если вы дважды кликните по маске, можно случайно выйти из режима редактирования. Используйте панель слоёв для точного контроля.

Советы для профессионалов

• Используйте компоненты с масками для повторяющихся элементов, например, аватарок или карточек товаров.
• Комбинируйте фреймы и векторные маски: например, фрейм с Clip content + внутренняя векторная маска для сложной формы.
• Называйте слои понятно: «Фото — маска», «Карточка — контент» — это упрощает работу в команде.
• Используйте плагины, такие как Mask to Frame или Clipped, для автоматизации.

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

Интервью с Мариной Волковой, старшим UI-дизайнером в продуктовой команде FinTech-стартапа

— Как вы обычно обрезаете края в своих проектах?

«В 80% случаев я использую фреймы с Clip content. Это быстро, надёжно и хорошо работает с авто-расчётами в прототипах. Для сложных визуальных решений — например, обложек событий с нестандартными вырезами — применяю векторные маски. Они гибкие и легко адаптируются под разные размеры.»

— Были ли ситуации, когда стандартные методы не помогали?

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

— Какой совет дадите новичкам?

«Не бойтесь экспериментировать. Иногда комбинация фрейма + маска + Boolean даёт уникальный результат. Главное — понимать, что маска не удаляет данные, а только скрывает. Это ваш страховочный трос при правке.»

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

Заключение

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

• Для быстрой обрезки используйте фреймы с включённой опцией «Clip content».
• Векторные маски подходят для сложных форм и анимации.
• Boolean-операции изменяют геометрию фигур и работают только с векторами.
• Всегда проверяйте порядок слоёв и тип объектов перед применением маски.
• Экспорт обрезанных объектов происходит автоматически — видимая часть сохраняется без потерь.