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

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

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

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

Активируйте обводку, кликнув по полю цвета или установив значение толщины больше 0. После этого появятся дополнительные настройки: тип линии (сплошная, пунктир, штрихпунктир), закругление концов линий (butt, round, square) и соединений углов (miter, round, bevel). Эти параметры особенно важны при создании иконок, рамок или технических чертежей.

Цвет обводки можно задать через палитру, HEX-код, RGB или использовать стили из библиотеки. Если вы работаете в команде, рекомендуется использовать глобальные стили (Local Styles), чтобы обеспечить единообразие. Например, все кнопки с обводкой должны использовать один и тот же стиль с именем «Stroke/Primary».

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

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

Один из ключевых моментов при работе с обводкой — её положение относительно контура объекта. В Figma есть три варианта:

• Center (по центру) — обводка рисуется наполовину внутри, наполовину снаружи контура. Это значение по умолчанию.
• Inside (внутри) — вся обводка располагается строго внутри границ объекта.
• Outside (снаружи) — обводка полностью вынесена за пределы контура.

Выбор типа зависит от задачи. Например, при создании рамки вокруг карточки лучше использовать Outside, чтобы обводка не «съедала» внутреннее пространство. При работе с иконками 24×24 пикселя Inside позволяет сохранить чёткие границы без увеличения габаритов.

Как нарисовать обводку по контуру изображения

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

Шаги для создания обводки по контуру:

1. Загрузите изображение на холст через меню File → Place Image или перетащите файл.
2. Создайте новый векторный фрейм (Vector) или используйте Pen Tool (P), чтобы начать обводить контур вручную.
3. Точечно следуйте за краями объекта, добавляя узлы. Используйте Smooth Node для плавных кривых.
4. Закончив контур, примените к нему обводку через панель Stroke.
5. При необходимости скройте или удалите исходное изображение.

Если контур сложный (например, силуэт дерева или животного), можно воспользоваться сторонними инструментами: Adobe Illustrator (функция Image Trace), Vector Magic или онлайн-сервисами вроде Autotracer.org. Экспортированный SVG-файл затем импортируется в Figma.

Для быстрого прототипирования можно использовать обводку вокруг прямоугольной рамки с изображением. Хотя это не «по контуру», такой подход часто достаточен для макетов экранов.

Работа с векторными масками и трейсингом

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

Пример использования:

• Поместите изображение внутрь векторного контура (например, круга или произвольной формы).
• Выделите оба объекта и нажмите Ctrl+Alt+M (Cmd+Option+M на Mac).
• Теперь изображение будет видно только внутри контура.
• Добавьте обводку к самому контуру — она станет рамкой по краю.

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

Для автоматического трейсинга Figma пока не предлагает встроенных решений, но в экосистеме есть плагины:

• Vectorizer — преобразует растровые изображения в векторные контуры.
• Image Tracer — позволяет быстро создать обводку по изображению с настройкой детализации.
• Trace Path — удобен для простых форм и логотипов.

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

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

Ошибка 1: Обводка «съедает» содержимое

При использовании Inside обводка может частично перекрывать текст или иконку внутри фигуры. Особенно заметно на малых размерах (например, 24×24 пикселя).

Решение: Переключитесь на Outside или Center, либо увеличьте размер объекта с учётом толщины обводки. Например, для обводки 2 пикселя добавьте по 2 пикселя с каждой стороны.

Ошибка 2: Неправильное поведение в Auto Layout

Если объект с обводкой Outside находится в Auto Layout, его визуальные границы могут выходить за пределы фрейма, что ломает выравнивание.

Решение: Добавьте внутренние отступы (padding) в Auto Layout, равные половине толщины обводки. Или используйте отдельный слой для обводки вне основного потока.

Ошибка 3: Обводка не экспортируется

При экспорте в PNG или JPG иногда кажется, что обводка пропала. Это происходит, если объект выходит за пределы видимой области фрейма.

Решение: Убедитесь, что фрейм достаточно большой, чтобы вместить обводку Outside. Активируйте «Include outside elements» в настройках экспорта, если нужно.

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

По словам эксперта, стандартная толщина обводки для интерфейсов — 1–2 пикселя. Более толстые линии (3 и более) используются редко — обычно для выделения модальных окон или состояния драг-н-дроп.

Также Дмитрий отмечает, что в дизайн-системах стоит заранее определить набор стилей обводки: например, Primary Stroke (1px, #0066CC), Error Stroke (2px, #D32F2F), Success Stroke (1px, #388E3C). Это ускоряет работу и снижает количество ошибок при передаче макетов.

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

Заключение

Обводка по контуру в Figma — это не просто визуальный элемент, а важный инструмент коммуникации в интерфейсе. Правильно настроенная обводка помогает выделить интерактивные элементы, передать состояние и улучшить читаемость макета. Главное — понимать различия между типами положения (Inside, Center, Outside) и учитывать влияние обводки на размеры и поведение объектов в Auto Layout.

• Всегда проверяйте положение обводки — Outside чаще всего подходит для рамок.
• Используйте плагины для автоматического трейсинга сложных контуров.
• Включайте Scale Stroke при масштабировании объектов.
• Создавайте глобальные стили обводки для единообразия в проекте.
• Тестируйте обводку на разных фонах и в темной теме.