Полукруг — это та графическая фигура, которую начинающие дизайнеры почему-то боятся создавать в Figma, хотя это одна из самых простых задач. Между тем, полукруглые элементы активно используются в современных интерфейсах: от декоративных акцентов до функциональных кнопок и индикаторов прогресса. Если вы до сих пор обходите эту форму стороной или тратите на её создание больше минуты — эта инструкция для вас. Разберём несколько методов, от элементарного до профессионального, чтобы вы могли выбрать оптимальный под конкретную задачу и перестали воспринимать полукруг как нечто сложное 🎯
Простые способы создания полукруга в Figma
Существует три основных подхода к созданию полукруга в Figma, каждый из которых имеет свои преимущества в зависимости от контекста использования. Первый метод основан на Boolean Operations — булевых операциях с примитивами. Второй использует маскирование слоёв. Третий задействует прямое векторное редактирование точек. Профессиональные дизайнеры обычно владеют всеми тремя, применяя их ситуативно.
Самый быстрый способ получить полукруг — создать круг и применить к нему операцию вычитания с прямоугольником. Этот метод занимает буквально 15 секунд и идеально подходит для статичных элементов, которые не требуют дальнейшего редактирования формы. Создайте эллипс (O), удерживайте Shift для получения идеального круга, затем нарисуйте прямоугольник (R), покрывающий ровно половину круга. Выделите обе фигуры, нажмите на иконку Boolean Groups на верхней панели и выберите Subtract selection. Готово.
| Метод | Время создания | Гибкость редактирования | Оптимальное применение |
| Boolean Operations | 15 секунд | Низкая | Статичные декоративные элементы |
| Маскирование | 30 секунд | Средняя | Элементы с заливкой или изображением |
| Векторное редактирование | 45 секунд | Высокая | Сложные формы, анимации |
Второй способ — маскирование. Он особенно полезен, когда полукруг должен содержать градиент, изображение или сложную заливку. Создайте круг, затем прямоугольник поверх него. Выделите оба объекта и нажмите Ctrl+Alt+M (Cmd+Opt+M на Mac) — это создаст маску. Прямоугольник станет маской, обрезающей круг. Этот метод сохраняет исходную форму круга, позволяя в любой момент изменить область маскирования.
Третий подход — прямое векторное редактирование точек якоря. Он требует больше времени, но даёт максимальный контроль над формой. Создайте круг, нажмите Enter для входа в режим редактирования векторов. Выделите нижние точки (или верхние — в зависимости от нужной ориентации) и удалите их клавишей Delete. Затем соедините оставшиеся открытые точки прямой линией с помощью Pen Tool (P). Этот метод незаменим для создания полукругов с нестандартными пропорциями или для анимированных элементов.
Анна Соколова, UI/UX дизайнер
Работала над мобильным приложением для фитнес-трекера, где индикаторы прогресса должны были быть полукруглыми. Первоначально использовала Boolean Operations — быстро, но при изменении размеров экрана форма искажалась. Переделала на векторное редактирование: потратила лишние 20 минут на настройку, зато получила идеально масштабируемый компонент. С тех пор для UI-элементов использую только векторный метод — экономит часы при адаптивной вёрстке 💪
Метод обрезки круга: пошаговая инструкция
Метод обрезки круга через Boolean Operations — это базовая техника, которую должен освоить каждый дизайнер, работающий в Figma. Несмотря на кажущуюся простоту, здесь есть нюансы, которые влияют на качество финального результата и удобство дальнейшей работы с фигурой.
Шаг 1: Выберите инструмент Ellipse, нажав клавишу O или кликнув по иконке в левой панели инструментов. Установите курсор на холсте и, удерживая Shift, протяните диагональ для создания идеального круга. Удержание Shift критически важно — без него вы получите эллипс, а не круг, что исказит итоговую форму полукруга. Задайте диаметр, например, 200×200 пикселей через панель свойств справа для точного контроля размеров.
Шаг 2: Создайте прямоугольник (клавиша R), который будет использоваться для обрезки. Расположите его так, чтобы он перекрывал ровно половину круга. Здесь важна точность: используйте Smart Guides (красные линии-подсказки), которые появляются при выравнивании — они покажут центр круга. Прямоугольник должен начинаться строго от центральной линии круга и выходить за его границы с одной стороны.
Шаг 3: Выделите обе фигуры. Можно сделать это мышью, обведя их рамкой, или кликнуть на круг, затем с зажатой клавишей Shift кликнуть на прямоугольник. Порядок выделения здесь не имеет значения, в отличие от некоторых графических редакторов. На верхней панели найдите секцию Boolean Groups — она появляется только при выделении двух и более фигур.
Шаг 4: В выпадающем меню Boolean Groups выберите операцию Subtract selection (иконка с минусом). Прямоугольник "вычтется" из круга, оставив ровно половину. Обратите внимание: в панели слоёв теперь у вас не две отдельные фигуры, а Boolean Group — составной объект. Это важно понимать для дальнейшего редактирования.
Шаг 5: После создания Boolean Group вы можете продолжить редактирование. Двойной клик по группе откроет её содержимое — вы увидите исходные круг и прямоугольник. Можете сдвинуть прямоугольник для изменения "линии среза" или масштабировать круг. Все изменения мгновенно отразятся на итоговой форме. Это удобно для экспериментов с пропорциями.
| Проблема | Причина | Решение |
| Неровные края полукруга | Прямоугольник не выровнен по центру круга | Использовать Smart Guides или численно выровнять через панель Align |
| Boolean Group не создаётся | Фигуры находятся в разных фреймах | Вынести обе фигуры на один уровень иерархии |
| Полукруг не масштабируется пропорционально | Не зажат Shift при масштабировании | Всегда удерживать Shift при изменении размера Boolean Group |
| Невозможно применить градиент по дуге | Boolean Group ограничивает опции заливки | Выполнить Flatten для преобразования в простую форму |
Критический момент: операция Flatten необратима. Если вы превратили Boolean Group в плоскую фигуру, вернуть возможность редактирования исходных примитивов уже не получится. Поэтому профессиональные дизайнеры обычно дублируют Boolean Group перед Flatten (Ctrl+D) и сохраняют оригинал на отдельном скрытом слое — это своеобразная "страховка" на случай необходимости изменений.
Ещё одна тонкость: при экспорте в SVG Boolean Groups иногда создают избыточный код с вложенными группами и clip-path. Если файл предназначен для веб-разработки, лучше сделать Flatten перед экспортом — это уменьшит размер файла и упростит его структуру. Разработчики будут благодарны за чистый, читаемый код вместо нагромождения вложенных элементов 🎨
Создание полукруга с помощью векторного редактирования
Векторное редактирование — это метод прямой работы с опорными точками и кривыми Безье, который даёт абсолютный контроль над формой фигуры. В случае с полукругом этот подход позволяет создать идеально чистую геометрию без вложенных групп и скрытых объектов, что критично для анимации, масштабирования и экспорта в production.
Начните с создания круга стандартным способом через инструмент Ellipse (O). Убедитесь, что это именно круг, а не эллипс — удерживайте Shift при рисовании. После создания нажмите клавишу Enter или дважды кликните по фигуре — это переведёт вас в режим редактирования векторных точек. Вы увидите четыре опорные точки: сверху, снизу, слева и справа. Именно с ними предстоит работать.
Выделите две точки, которые нужно удалить для получения полукруга. Если нужен горизонтальный полукруг (дугой вверх или вниз) — выделяйте верхние или нижние точки. Для вертикального (дугой влево или вправо) — боковые. Выделение делается кликом с зажатой клавишей Shift, либо рамкой выделения. Выделенные точки подсветятся синим цветом. Нажмите Delete — эти точки исчезнут, но форма станет открытой: вместо замкнутого контура у вас два свободных конца дуги.
Дмитрий Ковалёв, графический дизайнер
Делал иконки для навигации приложения, одна из которых требовала полукруглого элемента с точной центровкой по пикселям. Boolean Operations давали смещение на полпикселя — на Retina-дисплеях это заметно. Векторное редактирование решило проблему: удалил две точки, замкнул контур, привязал координаты вручную к целым числам. Результат — идеально чёткая иконка без размытия. Теперь для всех иконок использую только этот метод ✨
После замыкания контура у вас получится полноценная векторная фигура с минимальным количеством точек. В отличие от Boolean Group, здесь нет скрытых объектов или группировок — только чистая геометрия. Это означает, что файл будет легче, код при экспорте в SVG — чище, а масштабирование — предсказуемее. Профессионалы ценят такую чистоту, особенно при подготовке ассетов для разработки.
Важный нюанс: если после удаления точек форма выглядит не как идеальный полукруг, а как дуга с искажениями, проверьте настройки сглаживания. У круга в Figma по умолчанию параметр Arc установлен в 100 — это даёт идеальную окружность. При удалении точек этот параметр может сбиться. Выделите оставшиеся точки и убедитесь, что их хэндлы (манипуляторы кривых Безье) симметричны и имеют одинаковую длину.
Ещё одно преимущество векторного метода — возможность точной настройки формы после создания. Вы можете выделить любую точку и переместить её, изменить длину и угол хэндлов, добавить новые точки на контуре. Это незаменимо при создании нестандартных полукругов: например, не строго половины круга, а трёх четвертей или одной трети. Boolean Operations в таких случаях требуют сложных манипуляций с углами прямоугольника, тогда как векторное редактирование позволяет просто двигать точки до нужного результата.
Для работы с точками используйте следующие горячие клавиши:
- Ctrl+Click (Cmd+Click) — добавить новую точку на контуре в месте клика
- Delete — удалить выделенные точки
- Alt+перетаскивание хэндла — изменить только один хэндл без влияния на противоположный (разорвать симметрию)
- Ctrl+Alt+Click по точке — переключить тип точки между сглаженной (Bezier) и угловой (Corner)
Профессиональный приём: после создания полукруга сохраните его как компонент (Ctrl+Alt+K). Создайте варианты с разной ориентацией (повернув на 90°, 180°, 270°) и объедините их в один набор вариантов компонента. Так у вас будет библиотека полукругов на все случаи, которую можно использовать в любом проекте одним кликом. Это экономит время и обеспечивает консистентность дизайна по всему проекту 🔥
Настройка свойств и стилизация полукруга в Figma
После создания базовой формы полукруга начинается этап её стилизации — настройка заливки, обводки, эффектов и других визуальных параметров. Именно на этом этапе простая геометрическая фигура превращается в полноценный элемент дизайна. Профессиональный подход к стилизации отличается от любительского тем, что учитывает не только визуальный результат, но и технические ограничения при экспорте и интеграции в финальный продукт.
Начнём с заливки (Fill). Для полукруга доступны все типы заливок Figma: сплошной цвет, линейный градиент, радиальный градиент, угловой градиент и заливка изображением. Важный момент: при использовании радиального градиента его центр по умолчанию располагается в центре ограничивающей рамки (bounding box), а не в геометрическом центре дуги. Это может создать визуально неожиданный эффект. Чтобы исправить, кликните по иконке градиента на холсте и переместите его центральную точку вручную к центру дуги.
Обводка (Stroke) требует особого внимания при работе с полукругами. В отличие от замкнутых фигур, у полукруга есть открытая сторона — прямая линия, соединяющая концы дуги. Если вы примените обводку, она появится и на дуге, и на этой прямой линии. Часто требуется обводка только по дуге, без прямой. В таком случае есть два решения:
- Создать полукруг векторным методом, затем выделить прямую сторону (кликнуть по сегменту между точками) и нажать Delete — останется только дуга с обводкой
- Создать полный круг с обводкой, применить Boolean Operations для получения полукруга, затем настроить Stroke Dash для имитации неполной обводки
Эффекты (Effects) добавляют полукругу объём и глубину. Наиболее часто используемые:
| Эффект | Параметры | Применение |
| Drop Shadow | X: 0, Y: 4, Blur: 8, Spread: 0, Color: rgba(0,0,0,0.1) | Создание глубины для карточек и кнопок |
| Inner Shadow | X: 0, Y: -2, Blur: 4, Spread: 0, Color: rgba(0,0,0,0.15) | Эффект вдавленности, полезен для индикаторов |
| Layer Blur | Blur: 12-24 | Размытие фона под модальными окнами |
| Background Blur | Blur: 20-40 | Эффект матового стекла (frosted glass) |
Критический момент при работе с эффектами: они могут значительно увеличить вес файла при экспорте в PNG и время рендеринга в браузере. Если полукруг используется многократно (например, в списках или сетках), лучше применить эффекты не к каждому экземпляру, а создать один компонент с эффектами и использовать его инстансы. Figma оптимизирует рендеринг компонентов, что снижает нагрузку.
Прозрачность (Opacity) и режимы наложения (Blend Mode) — мощные инструменты для создания сложных визуальных эффектов. Для полукругов особенно эффективны режимы Multiply (для затемнения областей перекрытия) и Screen (для осветления). Классический приём: создать два полукруга, повернуть один на 180° и наложить их с режимом Screen и разными цветами — получится эффект свечения в месте стыка.
Настройка Corner Radius (закругления углов) применима к полукругам, созданным через Boolean Operations. Если полукруг создан векторным методом, у него нет параметра Corner Radius — закругление контролируется только положением и типом опорных точек. Это ещё один аргумент в пользу Boolean метода для быстрого прототипирования: возможность менять радиус закругления прямой стороны полукруга одним параметром.
Продвинутая техника стилизации — использование нескольких заливок с разными режимами наложения. Figma позволяет добавить к одной фигуре несколько слоёв Fill, каждый со своими параметрами. Например: первый слой — сплошной цвет основы, второй — полупрозрачный линейный градиент от белого к прозрачному сверху (имитация блика), третий — тонкий радиальный градиент в центре (создание объёма). Такая многослойность даёт профессиональный фотореалистичный вид даже простым формам 💎
Применение полукругов в дизайне интерфейсов
Полукруглые элементы в UI/UX дизайне выполняют как функциональные, так и декоративные роли. Их правильное применение улучшает визуальную иерархию, направляет внимание пользователя и создаёт ощущение завершённости дизайна. Разберём конкретные сценарии использования полукругов, которые встречаются в коммерческих проектах.
Индикаторы прогресса и загрузки. Полукруглые прогресс-бары визуально эффективнее линейных в компактных интерфейсах. Типичная реализация: полукруг с обводкой, где заполненная часть показывает процент выполнения. Создаётся дублированием полукруга: нижний слой — серая обводка (весь путь), верхний — цветная обводка с настроенным Stroke Dash, где длина штриха соответствует проценту. При анимации меняется только параметр Dash, что даёт плавное визуальное заполнение.
Декоративные элементы в героях и заголовках. Крупные полупрозрачные полукруги часто используются как фоновые акценты в шапках сайтов и лендингов. Они создают динамику без перегрузки композиции. Правило: полукруг должен частично выходить за границы видимой области (overflow: hidden на родительском контейнере) — это создаёт ощущение продолжения пространства и визуально расширяет интерфейс.
Аватары и медиа-контейнеры. Хотя круглые аватары стали стандартом, полукруглые иногда используются в нестандартных раскладках — например, в боковых панелях профилей, где пространство ограничено по горизонтали. Полукруг, выступающий из левого края панели, создаёт интересный визуальный якорь и экономит место. Важно: при такой реализации следите за соответствием crop-области изображения форме полукруга, иначе лица будут обрезаться некорректно.
Кнопки и переключатели. Полукруглые формы редко используются для основных кнопок, но эффективны для специфических контролов: регуляторы громкости в аудиоплеерах, ползунки настройки яркости, переключатели температуры в смарт-домах. Причина: движение по дуге интуитивно ассоциируется с аналоговыми регуляторами, что снижает когнитивную нагрузку для пользователей старшего поколения.
При использовании полукругов в адаптивном дизайне учитывайте масштабирование:
- На мобильных устройствах полукруги диаметром менее 40px плохо читаются — увеличивайте размер или упрощайте форму
- В десктопных интерфейсах слишком крупные полукруги (более 600px диаметром) выглядят незаконченными — разбивайте на несколько меньших элементов
- При переходе от десктопа к мобилке вертикальные полукруги часто нужно поворачивать на 90° для сохранения визуальной логики
- Полукруги с тонкой обводкой (1-2px) на Retina-дисплеях могут выглядеть размыто — используйте минимум 2px с учётом device pixel ratio
| Контекст использования | Рекомендуемый размер | Особенности реализации |
| Мобильная навигация | 40-60px диаметр | Минимальная зона касания 44px, центрировать иконку внутри |
| Десктопный декор | 200-800px диаметр | Использовать частичную видимость, низкая прозрачность (10-30%) |
| Индикаторы прогресса | 80-120px диаметр | Обводка 4-8px, анимация через Stroke Dash Offset |
| Разделители секций | Во всю ширину контейнера | Высота 50-100px, позиционирование absolute или negative margin |
Распространённая ошибка — использование полукругов исключительно ради визуального разнообразия без функционального обоснования. Каждый элемент интерфейса должен либо направлять внимание, либо сообщать информацию, либо обеспечивать взаимодействие. Полукруг "просто так" — это визуальный шум. Проверяйте каждый элемент вопросом: что изменится, если его убрать? Если ответ "ничего" — элемент лишний.
Продвинутая техника: создание компонентной системы полукругов с вариантами. Настройте базовый компонент с параметрами Size (small/medium/large), Orientation (up/down/left/right) и Style (filled/stroke/gradient). Используя Variants в Figma, вы получите библиотеку из 36 вариаций (3×4×3), переключаемых одним кликом. Это обеспечивает консистентность дизайна и ускоряет работу в 10-15 раз по сравнению с созданием каждого полукруга вручную 🚀
Создание полукругов в Figma — это базовый навык, освоение которого открывает путь к более сложным формам и композициям. Три основных метода — Boolean Operations, маскирование и векторное редактирование — покрывают 100% задач от быстрого прототипирования до production-ready ассетов. Главное понимать контекст применения каждого метода и технические нюансы экспорта. Инвестируйте 20 минут в создание компонентной библиотеки полукругов — и вы больше никогда не будете тратить время на рутинное рисование базовых форм. Фокусируйтесь на стратегии, а не на механике 🎯
