Полукруг – базовая геометрическая фигура, часто используемая в современном веб-дизайне для создания интерфейсов, логотипов и декоративных элементов. Figma предлагает несколько точных способов построения полукруга через встроенные инструменты shape и line.
Редактор Figma позволяет нарисовать идеальный полукруг двумя основными методами: через разделение круга и с помощью векторного пути. Первый способ занимает 30 секунд и подходит для простых задач, второй – обеспечивает полный контроль над формой и возможность тонкой настройки кривизны.
Главное преимущество работы с полукругами в Figma – возможность быстро менять их размеры, сохраняя пропорции, и применять любые трансформации без потери качества. Это особенно ценно при создании адаптивных интерфейсов, где элементы должны масштабироваться под разные разрешения экранов.
Базовая настройка формы круга через инструмент Ellipse
Для создания идеального круга в Figma используйте инструмент Ellipse (E). При нажатии левой кнопки мыши и удержании клавиши Shift можно нарисовать правильную окружность с равными пропорциями.
| Параметр | Значение | Результат |
|---|---|---|
| Corner Radius | 0px | Острые углы shape |
| Corner Smoothing | 100% | Идеально гладкая линия |
| Constraints | Scale | Сохранение пропорций |
Точность размеров достигается вводом числовых значений в полях W и H на панели свойств. Для создания shape одинакового размера дублируйте исходный круг комбинацией Ctrl+D.
Настройка обводки круга выполняется через параметр Stroke. Выберите тип линии: сплошная, пунктирная или точечная. Толщина линии регулируется в диапазоне 0.1-100px.
Для точного позиционирования используйте координатную сетку (Shift+2). При перемещении объекта удерживайте Alt для создания направляющих линий.
Преобразование круга в полукруг с помощью Boolean Groups
Boolean Groups позволяет быстро создать полукруг путем вычитания одной формы из другой. Вот точная последовательность действий:
- Нарисовать прямоугольник через shape-инструмент, размером равным диаметру будущего полукруга
- Поместить прямоугольник точно по центру созданного ранее круга
- Выделить обе фигуры
- Нажать кнопку 'Subtract' в верхней панели Figma
Дополнительные приемы точной настройки:
- Используйте привязку к сетке (Alt + линия) для идеального выравнивания фигур
- Проверьте точность наложения через режим Outline (Ctrl + Y)
- При необходимости поверните полукруг на нужный угол через Transform
Преимущества метода Boolean Groups:
- Сохраняется возможность редактирования исходных форм
- Можно быстро менять радиус полукруга
- Легко создавать полукруги под любым углом
- Доступно точное позиционирование через координаты
Настройка точных размеров и пропорций полукруга
Для создания идеального полукруга в Figma требуется точная настройка размеров. В панели свойств укажите одинаковые значения ширины и высоты shape - например, 400x400px для базового круга. При делении фигуры пополам высота автоматически уменьшится до 200px.
Для выравнивания линии среза используйте привязку к сетке (Alt + Shift + 4). Включите отображение направляющих через меню View > Layout Grids. Установите шаг сетки 10px для точного позиционирования.
Проверьте симметричность полукруга через инструмент Corner. При необходимости скорректируйте радиус скругления углов, который должен равняться половине ширины фигуры. Для полукруга шириной 400px установите радиус 200px.
Воспользуйтесь функцией Constraints для сохранения пропорций при масштабировании. В панели Auto Layout выберите опцию 'Scale' для ширины и высоты. Это обеспечит неизменное соотношение сторон 2:1 при любых трансформациях.
Проконтролируйте точность с помощью инструмента измерений (нажмите Alt при наведении). Расстояние от центра до любой точки дуги должно быть одинаковым. При обнаружении неровностей воспользуйтесь Vector Edit Mode для ручной корректировки узлов кривой.
Применение цветов и градиентов к полукругу
В панели свойств Figma выберите созданный полукруг shape и настройте заливку через Fill. Доступны варианты: сплошной цвет, линейный и радиальный градиенты, узорные паттерны.
Для создания градиента добавьте точки перехода цветов на специальной линии редактирования. Перемещайте их для достижения нужного визуального эффекта. Радиальный градиент особенно эффективен для полукруглых форм – центр можно разместить по corner radius.
Настройка обводки (Stroke) позволяет добавить контур любой толщины. Для плавного перехода между заливкой и обводкой используйте параметр Blur в разделе Effects. При работе с градиентами учитывайте, что линия градиента может быть повернута под любым углом относительно полукруга.
При создании теней активируйте Drop Shadow в меню Effects. Настройте размытие, смещение и прозрачность тени для придания объема. Для реалистичного эффекта стекла примените прозрачность через opacity и добавьте внутреннее свечение Inner Shadow.
Комбинируйте эффекты shape с масками и режимами наложения для создания сложных визуальных композиций. В Figma доступны все популярные blend modes: Multiply, Screen, Overlay для работы со слоями полукруга.
Добавление обводки и настройка скругления углов
После формирования базовой shape-фигуры полукруга в Figma, переходим к настройке обводки. В правой панели инструментов выберите параметр Stroke. Толщину линии можно задать числовым значением - от 1 до 100 пикселей. Для создания тонкой декоративной обводки оптимально использовать значения 1-2px, для акцентных элементов - 3-5px.
Тип линии настраивается в выпадающем меню Stroke. Доступны варианты: сплошная, пунктирная, точечная. При выборе прерывистых линий появляются дополнительные параметры - длина штрихов и промежутков между ними. Угловые соединения обводки регулируются через настройки Joints: острые (Miter), скругленные (Round) или срезанные (Bevel).
Для точной настройки скругления углов используйте параметр Corner Radius в разделе Corner. Можно задать единое значение для всех углов или настроить каждый угол индивидуально, разблокировав связь между ними. Чтобы нарисовать плавный переход между прямыми участками и дугой полукруга, установите радиус скругления равным четверти ширины фигуры.
Позиция обводки относительно shape-контура меняется через Position: Inside (внутри), Center (по центру) или Outside (снаружи). При создании технических схем или интерфейсных элементов рекомендуется размещать обводку по центру контура для точного совпадения размеров.
Сохранение полукруга как компонента для повторного использования
Создав идеальный полукруг в Figma, сохраните его как компонент через сочетание Alt + Ctrl + K (Windows) или Option + Command + K (Mac). Это позволит быстро размещать копии shape-элемента на разных артбордах без повторной отрисовки.
После конвертации переместите компонент во вкладку Assets. Присвойте ему понятное название, например 'semicircle/basic'. Такая система нейминга упростит поиск среди других элементов дизайн-системы.
Чтобы использовать сохраненный полукруг в новых проектах, создайте team library. Выделите компонент, нажмите на иконку с четырьмя точками в панели Properties и выберите 'Push to library'. При работе над другими файлами достаточно подключить библиотеку через меню Team Library.
При необходимости изменить базовый полукруг, отредактируйте master-компонент - все instances автоматически обновятся. Это особенно удобно, когда нужно скорректировать размер линии обводки или пропорции фигуры на множестве экранов одновременно.
Создавайте варианты компонента через свойство Variants. Нарисовать разные состояния полукруга (hover, active, disabled) можно в одном компоненте, переключаясь между ними через панель Properties в instances.
