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

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

Почему нельзя просто «обрезать» круг — объяснение для новичков

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

Представьте, что вы создали аватар пользователя — круглую область, в которую нужно поместить фотографию. Если вы просто обрежете фото вручную, вы потеряете качество, не сможете изменить размер аватара без повторной обрезки, и потеряете возможность анимировать его. А если вы используете круг как маску — вы можете менять размер фото, смещать его внутри круга, менять форму круга, и всё останется векторным и редактируемым. Это ключевое отличие между «обрезкой» и «маскированием».

Пошаговая инструкция: как обрезать круг в Figma

Вот точная последовательность действий, которая сработает в любой версии Figma — от 2024 до 2026 года:

1. Создайте круг с помощью инструмента Ellipse (E). Удерживайте Shift, чтобы сохранить пропорции.
2. Поместите на холст объект, который нужно обрезать — это может быть изображение, текст, градиент или даже другой круг.
3. Убедитесь, что объект для обрезки находится ниже круга в панели Layers (Слои). Если нет — перетащите его под круг.
4. Выделите оба объекта: кликните по кругу, затем зажмите Shift и кликните по изображению.
5. Правой кнопкой мыши щёлкните по любому из выделенных объектов — появится контекстное меню.
6. Выберите опцию Use as mask (Использовать как маску).
7. Теперь всё, что выходит за пределы круга, становится невидимым. Круг стал маской.

После этого вы можете:
— Перемещать изображение внутри круга, удерживая Cmd/Ctrl и тянув его мышкой.
— Менять размер круга — маска масштабируется вместе с ним.
— Изменять цвет или стиль круга — он не влияет на содержимое, только на границу видимости.

Если вы хотите отменить маску — выделите объединённый слой, правой кнопкой → Release mask (Отменить маску). Объекты снова станут независимыми.

Разница между маской и clipping — когда что использовать

В Figma термин «clipping» (обрезка) часто используется как синоним маскирования, но технически они не идентичны. В других программах (например, Adobe Illustrator) clipping mask — это отдельный тип операции. В Figma же «Use as mask» — это и есть clipping mask. Но важно понимать разницу между маской и другими способами «обрезки»:

Часто дизайнеры используют Frame как «обрезку» — это удобно, но не всегда правильно. Frame — это контейнер, а не маска. Если вы экспортируете объект с Frame, он может выйти за границы, если не настроены параметры экспорта. Маска же — это чистый векторный клип, который не влияет на экспорт и всегда сохраняет границы.

Частые ошибки при обрезке круга и как их избежать

Даже опытные пользователи допускают типичные ошибки, которые ломают дизайн. Вот самые распространённые:

• Ошибка 1: Выделение объектов в неправильном порядке. Если вы сначала выделяете изображение, а потом круг — Figma может не предложить «Use as mask». Решение: всегда выделяйте маску (круг) последней — она должна быть сверху в списке слоёв.
• Ошибка 2: Попытка обрезать несколько объектов одной маской без группировки. Если вы хотите обрезать два изображения одним кругом — сначала объедините их в группу (Ctrl+G), затем применяйте маску. Иначе маска применится только к верхнему слою.
• Ошибка 3: Удаление маски, не осознавая, что контент остался «за пределами». После отмены маски объекты остаются на месте — но если вы перемещали изображение внутри маски, оно может быть частично скрыто. Всегда проверяйте видимость после отмены маски.
• Ошибка 4: Использование маски на слое с эффектами (тень, свечение). Эффекты могут выходить за маску и оставаться видимыми. Решение: применяйте маску после добавления эффектов, или помещайте эффекты на отдельный слой под маской.

Если вы видите, что обрезка не работает — проверьте:
— Есть ли у маски прозрачность? (Нет — маска должна быть непрозрачной)
— Не применены ли к маске эффекты (теневые, градиентные)?
— Не находится ли маска внутри группы, которая не позволяет ей взаимодействовать?

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

Маски в Figma — это не просто «обрезать круг». Это мощный инструмент для динамического дизайна. Вот как использовать их на уровне профессионалов:

• Градиентные маски: Создайте круг, залейте его градиентом от белого к чёрному, затем примените как маску. Белый — полностью видимый, чёрный — полностью скрыт. Это позволяет создавать плавные переходы в виде круга. Например, для эффекта «размытия по краям» аватара.
• Анимированные маски: В Figma Prototype можно анимировать положение маски. Сделайте круг-маску, переместите его в другое положение на другом кадре — и Figma создаст плавное движение, как будто вы «открываете» изображение из круга.
• Маски из текста: Напишите слово, преобразуйте его в вектор (Ctrl+Shift+P), и используйте как маску для фона. Получится эффект «текст, через который видно изображение» — популярный тренд в современном UI.
• Маски с эффектом «вырезания»: Используйте маску, чтобы «вырезать» круг из фона, а не из изображения. Для этого: создайте фон, наложите круг поверх, примените маску, затем инвертируйте маску (через плагин или с помощью Boolean Subtract).

Для сложных задач используйте плагины: Mask Tools или Auto Layout Pro — они добавляют дополнительные опции, включая инверсию маски и маскирование по нескольким объектам.

Экспертное мнение: как дизайнеры используют маски в реальных проектах

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

В проекте для мобильного приложения с 50+ экранами дизайнеры создают один компонент: круг-маска + изображение. При изменении размера аватара — маска масштабируется, изображение центрируется, и все экземпляры обновляются. Если бы использовались обрезанные изображения — пришлось бы перезаливать 500+ файлов.

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

Не забывайте: маска — это не «обрезка», это «ограничение видимости». И это делает её невероятно гибкой.

Часто задаваемые вопросы

Заключение

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

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

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