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

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

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

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

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

Figma поддерживает стандартные инструменты векторного редактирования: Перо (P), Удаление точек, Сегменты кривых Безье, а также булевы операции (Объединить, Вычесть, Пересечение и Исключение). Эти инструменты позволяют реализовать практически любую форму, включая частично обрезанный круг.

Как преобразовать круг в векторный путь

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

Чтобы преобразовать круг:

1. Создайте эллипс с зажатым Shift, чтобы получить идеальный круг.
2. Выделите фигуру.
3. Нажмите правой кнопкой мыши и выберите «Convert to Vector» (Преобразовать в вектор).
4. Или используйте сочетание клавиш Ctrl+Shift+K (Cmd+Shift+K на Mac).

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

Редактирование узлов: вырезание сегментов круга

Теперь, когда круг стал векторным путём, можно приступать к его редактированию. Цель — удалить часть контура, чтобы получить, например, полукруг, дугу или сектор.

Для этого:

1. Выберите инструмент «Edit Object» (E) или нажмите A.
2. Кликните по кругу, чтобы увидеть все узлы.
3. Выберите узел, с которого хотите начать обрезку.
4. Используйте инструмент «Delete» (удаление точки), чтобы разорвать контур.

Например, чтобы получить полукруг:

• Удалите два противоположных узла.
• Останется открытый контур из двух кривых.
• При необходимости добавьте прямые линии, чтобы замкнуть форму (например, диаметр).

Если нужно получить сектор (как кусок пирога):

• Добавьте две новые точки на контуре с помощью инструмента Перо (P).
• Соедините их с центром через дополнительную линию или используйте другую фигуру.
• Замкните путь, чтобы получить заполненную форму.

Булевы операции и маски для обрезки

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

Например, чтобы вырезать сегмент:

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

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

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

• Поместите круг внутрь фрейма.
• Выделите фрейм и нажмите «Mask» (Ctrl+Alt+M).
• Отредактируйте форму фрейма, чтобы показать только нужную часть круга.

Создание дуг и сегментов без ручного редактирования

Figma не имеет встроенного инструмента для создания дуг, как в Illustrator, но есть сторонние плагины, которые решают эту задачу. Например:

• Arc Tool — позволяет нарисовать дугу заданного радиуса и угла.
• Stroke to Path — превращает обводку в векторный путь, что полезно для создания тонких дуг.
• Partial Circle — создаёт сектор или дугу по параметрам (угол, радиус).

Эти плагины экономят время. Например, с помощью Partial Circle вы можете указать угол 90° и мгновенно получить четверть круга как вектор. Это гораздо быстрее, чем вручную вырезать узлы.

Также можно использовать трюк с обводкой:

1. Создайте круг.
2. Уберите заливку, оставьте только обводку.
3. В настройках обводки выберите «Dashed» и установите один сегмент.
4. Измените значение gap (разрыв) до 100%, чтобы оставить только часть линии.
5. Преобразуйте обводку в путь (через плагин или вручную).

Типичные ошибки и как их избежать

При работе с обрезкой кругов новички часто допускают несколько ошибок:

• Попытка редактировать узлы без преобразования в вектор. Примитив нельзя редактировать как путь. Сначала конвертируйте.
• Удаление всех узлов вместо нужных. Это может привести к полному исчезновению фигуры. Работайте по одному узлу.
• Забыть замкнуть путь. Открытый контур не будет иметь заливки. Используйте «Join» или добавьте линии.
• Перегружать дизайн лишними слоями. Часто дизайнеры создают множество масок или булевых фигур, что усложняет редактирование.

Чтобы избежать проблем:

1. Всегда дублируйте оригинальный круг перед редактированием (Ctrl+D).
2. Используйте группы и именуйте слои: «Circle – original», «Arc – final» и т.д.
3. Проверяйте результат на разных масштабах — иногда артефакты видны только при увеличении.

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

Интервью с Анной Петровой, ведущим UI-дизайнером ProductLab

— Какой метод обрезки круга вы считаете самым эффективным?

«Все зависит от цели. Если я работаю над иконкой — всегда выбираю редактирование узлов. Это даёт максимальный контроль. Для прототипа — маски. Они быстрые и не портят исходник. А для прогресс-бара — плагин Arc Tool. Он спасает часы времени.»

— Бывает ли, что дизайнеры переусложняют процесс?

«Конечно. Я часто вижу, как люди используют 5 булевых операций вместо одного преобразованного пути. Главное правило: меньше слоёв — лучше производительность и читаемость файла.»

— Есть ли будущее у встроенных инструментов для дуг в Figma?

«Я надеюсь. Сейчас Figma активно развивает векторные функции. Возможно, скоро появится инструмент “Arc” наравне с эллипсом. Но пока — плагины и хитрости остаются нашим главным оружием.»

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

Заключение

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

Главное — помнить о порядке действий: сначала преобразуйте фигуру, потом редактируйте. Не бойтесь экспериментировать, но сохраняйте оригиналы. Используйте плагины для ускорения рутинных задач, и следите за обновлениями Figma — платформа постоянно добавляет новые возможности для векторного дизайна.

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