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

Круг без заливки — это контур, состоящий только из обводки, без цвета внутри. В Figma его можно создать несколькими способами: с помощью фигуры Ellipse и настройками Stroke, через векторную маску или комбинацией Boolean операций. Главное — убедиться, что параметр Fill отключён, а Stroke Weight задан корректно.

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

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

Базовый способ создания круга без заливки

Самый простой и универсальный способ — использование инструмента Ellipse. Он доступен в верхней панели инструментов или через быструю клавишу «O». Чтобы нарисовать идеальный круг, зажмите Shift при перетаскивании курсора. Это ограничит пропорции фигуры до 1:1, предотвращая превращение эллипса в овал.

После создания фигуры откройте правую панель свойств (Inspector). Там вы найдёте два ключевых раздела: Fill и Stroke. Заливка (Fill) должна быть полностью отключена — для этого кликните по иконке ведра и выберите «Нет заливки» или просто удалите цвет, нажав на крестик рядом с цветовым блоком. Теперь фигура станет прозрачной внутри.

Далее перейдите к настройке Stroke. Выберите цвет обводки, установите нужную толщину (например, 2 px) и убедитесь, что обводка видима. По умолчанию она может быть скрыта, если значение Stroke Weight равно 0.

Теперь у вас есть чистый круг только с обводкой. Его можно копировать, масштабировать, использовать в компонентах или как основу для анимации. Этот метод подходит для 90% случаев, особенно когда требуется статичный элемент.

Пошаговая инструкция

1. Выберите инструмент Ellipse (горячая клавиша O).
2. Зажмите Shift и нарисуйте фигуру, удерживая пропорции 1:1.
3. В правой панели найдите блок Fill и удалите цвет (нажмите крестик).
4. В блоке Stroke выберите цвет и задайте толщину (например, 2 px).
5. Убедитесь, что обводка находится в центре (по умолчанию — Center Align Stroke).

Настройка обводки: тип, толщина и выравнивание

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

Основные параметры Stroke:

• Цвет — можно выбрать любой из палитры, включая градиенты и прозрачность.
• Толщина (Weight) — задаётся в пикселях. Допустимо значение от 0.1 до 1000 px.
• Выравнивание (Align) — определяет, где проходит линия относительно контура фигуры.
• Тип линии — сплошная, пунктирная, штрихпунктирная и другие.
• Округление концов (Line Cap) — butt, round или square.

Особое внимание стоит уделить выравниванию обводки. В Figma три варианта:

• Center — линия делится поровну внутри и снаружи контура.
• Inside — вся обводка находится внутри фигуры.
• Outside — вся обводка смещается наружу.

Для круга без заливки чаще всего используется Center, так как это даёт симметричный вид. Однако если круг должен точно соответствовать определённым размерам (например, 100×100 px), лучше выбрать Inside, чтобы обводка не увеличивала габариты фигуры.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры иногда сталкиваются с проблемами при создании кругов без заливки. Чаще всего они связаны с неправильными настройками обводки, масштабированием или неверным восприятием размеров.

Одна из частых ошибок — выбор слишком большой толщины обводки при маленьком радиусе. Например, круг диаметром 20 px с обводкой 8 px будет выглядеть как почти сплошной диск, так как внутренняя часть останется всего 4 px. Это нарушает читаемость и визуальную иерархию.

Ещё одна ошибка — использование Outside Stroke без учёта общих размеров. Если вы создаёте компонент, который должен быть ровно 50×50 px, а обводка 4 px с выравниванием Outside, то фактический размер фигуры станет 54×54 px, что может сломать сетку или выравнивание.

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

Как проверить корректность круга без заливки

• Откройте панель Design и проверьте, что Fill = None.
• Убедитесь, что Stroke Weight > 0 и цвет задан.
• Проверьте выравнивание обводки в зависимости от задачи.
• Масштабируйте до 200–400%, чтобы увидеть, нет ли артефактов на краях.
• Используйте режим Outline (Ctrl+Alt+O), чтобы убедиться, что внутри фигуры нет скрытых слоёв.

Продвинутые методы: векторные маски и динамические круги

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

Один из подходов — создание двух концентрических кругов и использование операции Subtract. Нарисуйте большой круг, затем меньший поверх него, выровняйте по центру и примените Subtract. Результат — кольцо с заданной толщиной. Этот метод часто используется для прогресс-баров или радарных диаграмм.

Другой продвинутый способ — работа с векторными путями. Вы можете преобразовать круг в вектор (Object → Convert to Vector Path), а затем удалить заливку и настроить обводку вручную. Это полезно при создании анимированных линий или broken circle эффектов.

Также можно использовать плагины, такие как Progress Ring или Stroke Master, которые автоматически генерируют круги без заливки с настраиваемыми параметрами. Они экономят время и позволяют быстро менять толщину, угол, стиль линии.

Где применяются круги без заливки в дизайне

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

• Аватарки пользователей — часто добавляют обводку для выделения активного пользователя.
• Кнопки с иконками — круглая обводка вокруг значка создаёт четкий визуальный якорь.
• Прогресс-бары — кольцевые индикаторы загрузки строятся на основе круга без заливки с дуговой обводкой.
• Фокусные эффекты — подсветка элемента интерфейса через обводку.
• Иконки и логотипы — минимализм в современном дизайне часто использует контурные формы.

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

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

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

— Алексей Петров, руководитель дизайн-студии «Forma», 10 лет опыта в Figma

Он также отмечает, что в командной работе важно документировать такие решения: «Если в проекте используется 2 px обводка с выравниванием Inside, это должно быть зафиксировано в дизайн-системе. Иначе каждый дизайнер будет делать по-своему».

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

Заключение

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

Главное — помнить, что круг без заливки — это не просто отсутствие цвета внутри, а полноценный графический элемент с настраиваемыми параметрами. Использование правильного выравнивания обводки, контроль толщины и соблюдение принципов дизайн-системы делают работу профессиональной и масштабируемой.

• Всегда отключайте Fill и настраивайте Stroke для создания контурного круга.
• Выбирайте тип выравнивания обводки (Inside, Center, Outside) в зависимости от задачи.
• Используйте Subtract для создания колец и прогресс-баров.
• Документируйте параметры в дизайн-системе для командной работы.
• Экспортируйте с прозрачным фоном, чтобы сохранить целостность формы.