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

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

Основные параметры обводки

В Figma обводка (Stroke) — это не просто рамка вокруг фигуры. Это полноценный стиль, который можно настраивать под любые задачи: от минималистичного дизайна до сложных интерфейсов с множеством визуальных акцентов. При выборе любого векторного объекта — прямоугольника, круга, кастомной формы — в правой панели свойств становится доступен блок «Stroke», содержащий все необходимые инструменты.

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

Цвет обводки задаётся через стандартный цветовой пикер, поддерживающий HEX, RGB, HSL и ссылки на библиотеку стилей. Если вы работаете в команде, использование стилизованных обводок из Design System позволяет обеспечить единообразие во всех макетах. Например, состояние «focus» у кнопки может использовать обводку из брендинговой палитры с фиксированной толщиной 2 px.

Где находится панель обводки

После выделения фигуры прокрутите вниз правую панель до блока «Stroke». Он расположен сразу после разделов «Fill» и «Effects». По умолчанию обводка отключена (значение толщины — 0). Чтобы активировать её, достаточно установить значение больше 0. Цвет выбирается кликом по цветовому квадрату, а тип линии — через значок рядом с настройками пунктира.

Если вы используете переменные (Variables), начиная с 2024 года Figma позволяет привязывать цвет обводки к переменным, что особенно удобно при создании тем (светлая/тёмная). Это повышает масштабируемость проектов и упрощает глобальные изменения.

Как нанести обводку на фигуру

Процесс добавления обводки в Figma прост, но требует внимания к деталям. Начните с выделения нужной фигуры — будь то прямоугольник, эллипс или кривая Безье. Затем перейдите в правую панель и найдите блок «Stroke». Первое, что нужно сделать — установить толщину обводки. Даже значение 1 px уже сделает линию видимой.

Далее выберите цвет. Вы можете использовать цветовые заливки, градиенты или даже изображения. Для стандартных задач чаще всего применяются сплошные цвета. Кликните по квадрату цвета и выберите нужный оттенок из палитры, введите HEX-код или выберите из библиотеки стилей. Если вы работаете с Design System, цвет обводки лучше брать из заранее определённых стилей.

• Выделите фигуру на холсте
• В правой панели установите толщину обводки (например, 2 px)
• Выберите цвет через пикер или библиотеку
• При необходимости измените тип линии (сплошная, пунктирная и т.д.)
• Настройте расположение обводки: внутри, по центру или снаружи

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

Типы обводок и их использование

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

Пунктирная обводка часто применяется для обозначения зон перетаскивания (drag-and-drop), временных рамок или неактивных состояний. Например, при загрузке файла область загрузки может иметь пунктирную рамку, сигнализирующую пользователю о том, куда можно перетащить файл.

Настройка пунктирной линии осуществляется через параметры «Dash» и «Gap». Вы можете задать длину штриха и промежутка между ними. Например, значение 4 и 2 создаст короткие штрихи с небольшими разрывами. Это особенно полезно при создании уникальных визуальных эффектов или брендированных интерфейсов.

Градиентная обводка — более продвинутая функция. Чтобы использовать её, выберите в пикере тип заливки «Gradient», затем настройте направление и цвета. Такой подход подходит для креативных проектов, презентаций или анимированных прототипов. Однако в production-интерфейсах градиентные обводки используются редко из-за снижения читаемости.

Расположение обводки: внутри, снаружи, центр

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

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

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

Центральное расположение (Center) — значение по умолчанию. Обводка делится поровну: 50% внутри, 50% снаружи. Этот вариант универсален, но может вызвать проблемы при точном позиционировании, особенно при использовании автолейаутов.

Как выбрать правильное расположение

• Используйте Inside, если фигура должна сохранить свои размеры (например, ячейка таблицы)
• Выбирайте Outside, если обводка служит акцентом и не должна затрагивать содержимое (например, highlight при hover)
• Применяйте Center для общих случаев, когда точное положение не критично

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

Советы по работе с обводкой

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

Ещё один совет — использовать стили обводки. В Figma можно создавать переиспользуемые стили, которые включают цвет, толщину и тип линии. Это особенно полезно при работе над большими проектами. Например, стиль «Error Border» может быть красным, 2 px, сплошной, а «Success Border» — зелёным, 1 px.

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

Чек-лист перед публикацией макета

1. Проверьте, не выходит ли обводка за границы фрейма
2. Убедитесь, что цвет обводки соответствует дизайн-системе
3. Подтвердите, что толщина обводки согласована с типографикой (например, 1 px для текста 14 pt)
4. Проверьте поведение обводки при автолейаутах
5. Протестируйте макет в режиме прототипа на наличие визуальных артефактов

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

По её словам, при проектировании интерфейсов стоит придерживаться принципа «одна обводка — одно назначение». Не стоит использовать несколько типов рамок без четкой логики. Также важно тестировать обводки на разных фоновых цветах, чтобы гарантировать достаточный контраст.

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

Заключение

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

• Всегда задавайте обводке осмысленное значение в рамках интерфейса
• Используйте стили обводки для единообразия в командной работе
• Контролируйте расположение обводки — inside, center или outside
• Тестируйте обводку при экспорте и на разных устройствах
• Применяйте обводку как часть системы визуальной коммуникации, а не как декор