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

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

Основные настройки обводки в Figma

Figma предоставляет гибкий инструментарий для работы с обводкой, который доступен через правую боковую панель свойств. После создания круга с помощью инструмента Ellipse (E) вы можете добавить обводку, просто указав значение толщины в поле Stroke. По умолчанию обводка скрыта, поэтому её необходимо активировать вручную.

Для этого кликните по созданному кругу, затем найдите блок «Stroke» в разделе Design. Здесь вы увидите несколько ключевых параметров: цвет, тип линии (сплошная, пунктирная, штрихпунктирная), толщина и способ выравнивания. Каждый из них влияет на конечный вид фигуры. Например, изменение цвета происходит через выбор из палитры или ввод HEX/RGB значений.

Толщина обводки задаётся в пикселях и может быть дробной — например, 1.5 px. Это особенно полезно при работе с дизайн-системами, где требуется высокая точность. Также можно использовать разные типы окончаний линии (Cap) и соединений (Join), хотя для круга они менее критичны, поскольку контур замкнут.

Шаги: как добавить обводку к кругу

1. Нажмите клавишу E или выберите инструмент Ellipse в верхней панели.
2. Удерживая Shift, нарисуйте идеальный круг на холсте.
3. В правой панели перейдите к разделу Design.
4. Найдите параметр Stroke и установите нужную толщину (например, 2 px).
5. Выберите цвет обводки, кликнув по цветовому квадрату.
6. Настройте тип линии (Solid, Dashed, Dotted) при необходимости.

Типы выравнивания обводки: внутри, по центру, снаружи

Один из самых важных, но часто игнорируемых параметров — это положение обводки относительно контура фигуры. Figma предлагает три варианта: Inside, Center и Outside. От выбора зависит, будет ли обводка увеличивать габаритные размеры круга или останется в пределах исходного диаметра.

При выравнивании Inside обводка рисуется строго внутри границ круга. Это означает, что внешний диаметр остаётся неизменным, но внутренняя область уменьшается. Такой режим удобен, если вы работаете с ограниченным пространством, например, в сетке 44×44 px под тап-зону.

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

Режим Outside выносит всю обводку за пределы круга. Это полезно, когда нужно сохранить чистую внутреннюю область, например, для иконки с фоном. Однако общий размер фигуры увеличится на величину толщины обводки с каждой стороны.

Цвет и толщина обводки: как выбрать оптимальные значения

Цвет обводки должен соответствовать общему цветовому решению проекта. В Figma вы можете использовать как стандартные цвета из палитры, так и переменные (variables), если работаете с продвинутыми дизайн-системами. Рекомендуется использовать семантические названия цветов (например, «border-primary», «stroke-disabled»), чтобы упростить командную работу.

Толщина обводки — это не только визуальный параметр, но и функциональный. Слишком тонкая (0.5–1 px) может теряться на экранах с низким DPI, слишком толстая (свыше 4 px) — доминировать и нарушать баланс композиции. Оптимальные значения зависят от контекста:

• Для интерфейсов: 1–2 px;
• Для иконок: 1–1.5 px;
• Для акцентных элементов: до 3 px.

Если вы используете пунктирную или штрихпунктирную обводку, важно настроить длину штрихов и пробелов. Figma позволяет это делать вручную, задавая значения для Dash и Gap. Например, Dash 4 + Gap 4 даёт равномерный пунктир. Для круга стоит помнить, что суммарная длина контура должна быть кратна длине одного сегмента, чтобы избежать обрывов.

Как создать двойную или многослойную обводку

Figma не поддерживает несколько обводок на одном слое напрямую, в отличие, например, от Adobe Illustrator. Однако есть несколько рабочих методов, позволяющих добиться эффекта двойной обводки.

Первый способ — использовать два круга. Создайте основной круг, затем скопируйте его (Cmd+D) и увеличьте размер копии на удвоенную толщину второй обводки. Например, если первая обводка 2 px, а вторая — 4 px, то внешний круг должен быть на 4 px шире по диаметру. Затем примените к каждому кругу свою обводку и выставьте выравнивание Inside.

Второй способ — использовать плагины. Например, плагин Strokes или Multi Stroke позволяет добавлять несколько обводок с разными цветами и толщинами. Это особенно удобно при частом использовании такого эффекта. Плагины можно найти в меню Plugins → Find more plugins.

Третий подход — использовать стиль слоя с эффектом. Добавьте внешнее свечение (Effect → Drop Shadow), которое имитирует дополнительную обводку. Настройте X=0, Y=0, Blur=0, Spread=положительное значение. Цвет задаётся отдельно. Этот метод менее точен, но работает при экспортё в PNG.

Пример: двойная обводка для аватара

• Создайте круг 60×60 px с обводкой 2 px, цвет #FFFFFF, выравнивание Inside.
• Добавьте второй круг 64×64 px с обводкой 4 px, цвет #007AFF, выравнивание Inside.
• Поместите оба круга в группу и добавьте аватар в центр.
• При необходимости используйте маску, чтобы обрезать изображение по кругу.

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

Новички в Figma часто сталкиваются с непредсказуемым поведением обводки. Одна из самых частых проблем — изменение размера элемента после добавления обводки. Это происходит, когда выравнивание установлено на Center или Outside. Чтобы избежать этого, всегда используйте Inside, если размер должен оставаться строго заданным.

Ещё одна ошибка — смешение цветов при прозрачной заливке. Если круг имеет прозрачную заливку (Fill = none) и обводку, он может «теряться» на светлом фоне. Решение — добавить тонкую белую обводку под основную (через второй слой) или использовать фоновый круг чуть большего размера.

Также дизайнеры забывают, что обводка участвует в экспорте. Если вы экспортируете круг как SVG, обводка будет включена, но при этом её поведение может отличаться в зависимости от CSS-стилей. Рекомендуется проверять экспорт в браузере или передавать точные параметры разработчикам.

Чек-лист: контроль качества обводки

• Проверено ли выравнивание обводки?
• Соответствует ли толщина обводки гайдлайнам дизайн-системы?
• Не выходит ли обводка за пределы отведённого пространства?
• Правильно ли отображается обводка на разных фоновых цветах?
• Учтено ли поведение обводки при масштабировании?

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

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

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

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

Кейс: дизайн кнопки-иконки с обводкой

• Создайте круг 48×48 px с обводкой 2 px, цвет #D0D0D0, выравнивание Inside.
• Добавьте иконку в центр, размер 24×24 px.
• На hover измените цвет обводки на #007AFF.
• Используйте компоненты и варианты для управления состояниями.

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

«Многие дизайнеры недооценивают роль обводки. Но в реальности она — один из ключевых инструментов визуальной иерархии. Особенно в мобильных интерфейсах, где каждый пиксель на счету. Я рекомендую всегда тестировать обводку на реальных устройствах, потому что на экране Mac она может выглядеть чётко, а на Android — размыто. Также важно согласовать поведение обводки с разработчиками: например, в CSS border-box работает как Inside, а content-box — как Center.»

— Анна Смирнова, главный дизайнер продукта, ранее работала в Яндекс и Tinkoff

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

Заключение

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

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