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

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

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

В современных дизайн-системах, таких как Material Design, Apple Human Interface Guidelines и других, контурные элементы активно используются для вторичных действий, фокусов и декоративных акцентов. Поэтому понимание, как корректно создавать и настраивать такие объекты, напрямую влияет на качество макета и удобство передачи его разработчикам.

Создание круга в Figma: пошаговая инструкция

Чтобы получить чистый круг без заливки, начните с создания базовой фигуры. Figma предлагает несколько способов, но самый надёжный — использовать векторный инструмент «Ellipse» (Эллипс).

1. Нажмите E на клавиатуре или выберите инструмент «Ellipse» в панели слева.
2. Удерживая Shift, перетащите курсор по рабочей области, чтобы нарисовать идеальный круг (Shift ограничивает пропорции 1:1).
3. Отпустите мышь. На холсте появится круг с заливкой по умолчанию (обычно чёрной или серой).
4. В правой панели свойств найдите блок Fills (Заливки). Нажмите на квадрат с цветом и выберите значок крестика, чтобы удалить заливку.
5. Теперь перейдите к блоку Strokes (Обводки). Нажмите «+ Add» и выберите цвет, толщину и стиль обводки.

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

Если вы работаете с компонентами или символами (в старых версиях Figma), убедитесь, что изменения применяются именно к текущему экземпляру, а не ко всем наследникам. Для этого разорвите связь с основой через иконку цепи в правой панели.

Альтернативные методы создания круга

Иногда дизайнеры используют другие подходы, особенно если нужно быстро дублировать или модифицировать фигуру.

• Дублирование существующего круга: Выделите любой круг, нажмите Ctrl+D (Cmd+D), затем измените обводку и уберите заливку. Подходит для массового создания однотипных элементов.
• Импорт SVG: Если у вас уже есть SVG-файл с контурным кругом, просто перетащите его в Figma. Программа автоматически преобразует его во встроенный вектор.
• Использование плагинов: Плагины вроде «Geometric» или «Shape Maker» позволяют быстро генерировать идеальные фигуры с нужными параметрами, включая отсутствие заливки.

Настройка обводки для идеального контура

Удаление заливки — только половина задачи. Чтобы круг выглядел чисто и корректно отображался при экспорте и в коде, важно правильно настроить обводку.

В Figma обводка может располагаться тремя способами:

• Inside (Внутри) — обводка рисуется строго внутри контура фигуры.
• Center (По центру) — обводка делит контур пополам: половина — внутри, половина — снаружи.
• Outside (Снаружи) — вся обводка находится за пределами исходного контура.

Для круга без заливки рекомендуется использовать режим Outside, особенно если он используется как рамка вокруг аватара, иконки или другого элемента. Это гарантирует, что обводка не будет наезжать на внутреннее содержимое.

Также обратите внимание на параметр Stroke Align — он как раз и отвечает за положение обводки. Его можно быстро изменить в правой панели, рядом с настройками цвета и толщины.

Толщина и стиль обводки

Стандартная толщина обводки для интерфейсов — 1–2 px. Однако в зависимости от масштаба макета и целей могут использоваться и другие значения:

• 1 px — для лёгких, минималистичных интерфейсов.
• 2 px — наиболее распространённый выбор, хорошо читается на экранах.
• 3–4 px — для акцентов, кнопок или мобильных интерфейсов с крупными элементами.

Вы можете задать пунктирную или штриховую обводку, изменив тип линии в разделе Stroke Style. Это полезно для создания эффектов выделения, загрузки или декоративных рамок.

Ошибки, которые недопустимы

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

Забыть убрать заливку

Самая частая ошибка — оставить прозрачную заливку вместо её полного удаления. Figma позволяет делать заливку с прозрачностью 0%, но это не то же самое, что её отсутствие.

• Прозрачная заливка всё равно занимает слой и может мешать при кликах в прототипе.
• При экспорте в CSS это может привести к лишнему свойству background-color: rgba(0,0,0,0);.
• Разработчики могут не заметить это и оставить ненужный код.

Неправильный режим обводки

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

• Для элементов, прилегающих к краям, лучше использовать Inside.
• Для центрированных декоративных кругов подойдёт Outside.
• Проверяйте отступы с помощью включённой сетки (G) и инструмента измерения (I).

Игнорирование масштаба и пиксельной чёткости

На маленьких кругах (до 20×20 px) даже 1-пиксельная обводка может выглядеть нечётко, особенно в режиме Center. Чтобы избежать этого:

• Убедитесь, что координаты круга и его размеры — целые числа (не 50.3×50.3).
• Включите опцию Constrain Proportions при изменении размеров.
• Используйте плагины вроде «Pixel Preview» для проверки чёткости на реальном разрешении.

Практические примеры использования

Круг без заливки — не просто геометрическая форма, а функциональный элемент интерфейса. Рассмотрим, где он применяется на практике.

Контурные кнопки (Outlined Buttons)

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

• Создайте круг 48×48 px с обводкой 2 px.
• Удалите заливку, установите цвет обводки, соответствующий бренду.
• Добавьте иконку по центру (например, «+» или «play»).
• При наведении можно добавить лёгкую заливку (10% opacity) для фидбэка.

Аватары с обводкой

Многие соцсети и мессенджеры используют кольца вокруг аватаров для обозначения статуса онлайн, активности или премиум-статуса.

• Создайте круг-обводку 60×60 px с толщиной 3 px.
• Расположите его поверх аватара.
• Для статуса «онлайн» используйте зелёную обводку, для «офлайн» — серую.
• При необходимости сделайте обводку анимированной (через плагины или prototyping).

Прогресс-бар в виде круга

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

• Создайте два круга: один — серый, тонкий (1 px), без заливки — фон.
• Второй — цветной, с обводкой, который будет анимироваться по дуге.
• Используйте маски или плагины типа «Progress Ring» для динамического отображения.

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

По словам эксперта, ключ к успеху — не только техническое исполнение, но и понимание контекста. «Если вы делаете интерфейс для детей, толстая обводка (3–4 px) и яркие цвета подойдут. Для бизнес-приложения лучше выбрать тонкую линию (1 px) и сдержанные тона. Figma даёт вам инструменты — ваша задача — применять их с учётом цели продукта.»

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

Заключение

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

• Всегда удаляйте заливку полностью, а не делайте её прозрачной.
• Выбирайте режим обводки (Inside, Center, Outside) в зависимости от контекста.
• Следите за пиксельной чёткостью — используйте целые значения размеров.
• Применяйте контурные круги осознанно: для кнопок, аватаров, прогресс-баров.
• Проверяйте результат на разных масштабах и при экспорте.