Как сделать полукруг в фигме из круга

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

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

Преобразование круга в вектор: основа работы

Перед тем как изменить форму круга, важно понимать, что стандартная фигура в Figma — это параметрический объект. Вы можете менять его радиус, цвет, обводку, но не редактировать отдельные точки контура. Чтобы получить доступ к узлам, необходимо преобразовать фигуру в векторный путь. Это делается через команду «Convert to Vector» («Преобразовать в вектор»).

Процесс выглядит так: создайте круг с помощью инструмента Ellipse (E), затем выделите его и нажмите Ctrl+Shift+K (Cmd+Shift+K на Mac). Теперь объект становится векторным, и вы можете использовать Node Tool (A) для редактирования его формы. После преобразования теряются параметрические свойства — например, нельзя будет снова легко изменить диаметр, как у обычной фигуры.

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

Метод редактирования узлов: пошагово

Самый точный способ получить полукруг — отредактировать узлы векторного круга. Этот подход даёт полный контроль над формой и позволяет создавать как открытые, так и закрытые полукруги (с хордой).

1. Создайте круг с помощью инструмента Ellipse (E).
2. Выделите фигуру и преобразуйте её в вектор: Ctrl+Shift+K (или через правую панель: Design → Convert to Vector).
3. Активируйте Node Tool (A) и кликните по кругу. Появятся четыре управляющие точки.
4. Найдите верхнюю и нижнюю точки — они находятся строго по вертикали. Выделите одну из них (например, нижнюю) и удалите с помощью Delete.
5. Теперь соедините оставшиеся точки прямым сегментом: выберите левую и правую точки, щёлкните правой кнопкой и выберите «Connect».
6. Если нужно, добавьте новую точку по центру дуги для более точной формы.

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

Для повышения точности можно использовать координаты в правой панели. Убедитесь, что X-координаты крайних точек одинаковы относительно центра, а Y-позиции верхней и нижней точек совпадают по высоте. Это исключает перекосы и обеспечивает идеальную геометрию.

Как сделать открытый и закрытый полукруг

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

• Открытый: после удаления нижней точки удерживайте Shift и выделите два сегмента, ведущие к ней. Нажмите Delete. Останется только верхняя дуга.
• Закрытый: после удаления точки соедините левую и правую узлы прямой линией. Убедитесь, что тип заливки — Solid, чтобы форма отображалась как единая поверхность.

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

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

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

1. Нарисуйте круг (Ellipse).
2. Создайте прямоугольник (Rectangle), равный по ширине кругу, но вдвое меньше по высоте.
3. Разместите прямоугольник точно над нижней (или верхней) половиной круга.
4. Выделите оба объекта, щёлкните правой кнопкой → «Use as Mask» (или Ctrl+Alt+M).
5. Убедитесь, что маска находится сверху в стеке слоёв.

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

Булевы операции как альтернатива

Figma поддерживает булевы операции: Union, Subtract, Intersect и Exclude. Их можно использовать, чтобы «вычесть» половину круга с помощью другой фигуры.

Например:

• Создайте круг.
• Нарисуйте прямоугольник, который покрывает ровно половину круга.
• Выделите оба объекта и примените Subtract (вычесть).
• Результат — полукруг, полученный путём вычитания части круга.

Когда какой метод выбирать?

Выбор зависит от задачи:

• Нужна точная SVG-форма? Используйте редактирование узлов.
• Часто меняете размер? Подойдёт маскирование.
• Создаёте компонент с вариациями? Булевы операции + компоненты дадут гибкость.

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

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

• Не преобразовали в вектор. Попытка редактировать узлы у обычного круга невозможна. Всегда используйте Ctrl+Shift+K.
• Неточное удаление сегментов. Удаление не той точки может исказить форму. Используйте зум и направляющие.
• Игнорирование привязки. Отсутствие сетки или направляющих ведёт к асимметрии. Включайте Snap to Grid (Ctrl+Shift+%).
• Забыли закрыть контур. При экспорте открытые пути могут отображаться некорректно. Проверяйте, соединены ли точки.

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

Анна также отмечает, что новички часто усложняют задачу, забывая про встроенные инструменты. «Figma — не Illustrator, здесь важна скорость и повторяемость. Если вам нужно 10 разных полукругов, сделайте один, превратите в компонент и используйте варианты.»

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

Заключение

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

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