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

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

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

Несмотря на кажущуюся простоту, настройка обводки в Figma имеет множество нюансов, особенно когда речь идёт о точном позиционировании, совместимости с разными фигурами или работе с компонентами и вариантами. Многие новички сталкиваются с тем, что обводка «съедает» часть площади объекта или не отображается должным образом при экспорте. Эти проблемы легко решаются, если понимать, как работает система обводки в Figma на техническом уровне.

Основы обводки: что это и зачем она нужна

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

В пользовательском интерфейсе обводка используется для множества целей: выделение активных кнопок, обозначение полей ввода, создание карточек, подсветка состояний (например, focused или disabled). В дизайн-системах часто прописываются стандартные значения толщины обводки — например, 1px для границ, 2px для акцентов.

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

Когда использовать обводку

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

Как добавить обводку в Figma: пошаговая инструкция

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

1. Выберите объект на холсте с помощью инструмента Selection (V).
2. Перейдите в правую панель свойств (Inspector).
3. Найдите секцию Stroke, расположенную ниже раздела Fill.
4. Нажмите на значок цвета рядом с надписью «Stroke» и выберите нужный цвет из палитры.
5. Установите толщину обводки в поле ввода (по умолчанию 1).
6. При необходимости измените положение обводки: Inside, Center, Outside.

Если обводка не отображается, проверьте, не установлено ли значение толщины равным 0. Также убедитесь, что цвет обводки отличается от фона — иначе она будет незаметна. Для быстрого доступа можно использовать горячие клавиши: S для активации инструмента Stroke в контекстном меню, хотя сама настройка всё равно происходит через панель.

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

Figma предоставляет широкие возможности для кастомизации обводки. После того как вы активировали обводку, можно настроить следующие параметры:

• Цвет — можно выбрать из палитры, ввести HEX, RGB или использовать цвета из библиотеки стилей.
• Толщина — задаётся в пикселях, допускаются дробные значения (например, 0.5).
• Стиль линии — сплошная (solid), пунктирная (dashed), штрихпунктирная (dotted).
• Закругление углов — для обводки доступны варианты: Miter, Round, Bevel.
• Кап-стиль — определяет концы линии: Butt, Round, Square.

Цвет обводки можно брать прямо с холста с помощью пипетки (горячая клавиша I). Это удобно при подборе точного соответствия. Толщину лучше привязывать к сетке 4px или 8px, чтобы сохранить согласованность с общим дизайном. Например, 1px — стандарт для границ, 2px — для акцентов.

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

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

• Inside — обводка рисуется строго внутри контура объекта. Не увеличивает размеры, но может частично закрывать содержимое.
• Center — обводка делится пополам: половина внутри, половина снаружи. Самый распространённый режим по умолчанию.
• Outside — вся обводка находится за пределами объекта. Увеличивает визуальные габариты, но не затрагивает содержимое.

Выбор режима зависит от задачи. Например, при создании кнопки с внутренним отступом (padding) лучше использовать Outside, чтобы обводка не «съедала» пространство. А при работе с иконками, где важна точность форм, предпочтительнее Inside.

Особенности обводки для разных типов элементов

Не все элементы в Figma реагируют на обводку одинаково. Ниже — разбор по категориям.

Фигуры и векторы

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

Текстовые блоки

Обводка применяется к контуру текста. Полезно для создания эффектов типа «outlines» или теней. Однако при этом увеличивается сложность рендеринга. Не рекомендуется использовать обводку толще 1px для обычного текста.

Фреймы и группы

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

Компоненты и экземпляры

Обводка может быть переопределена в экземпляре, если она не заморожена в мастер-компоненте. Это позволяет создавать варианты с разными рамками (например, активный/неактивный).

Распространённые ошибки и советы по использованию

Даже опытные дизайнеры иногда допускают ошибки при работе с обводкой. Вот самые частые:

• Обводка исчезает при увеличении масштаба — причина в том, что толщина слишком мала (например, 0.1px). Используйте минимум 0.5px.
• Обводка «съедает» содержимое — произошло из-за положения Inside. Переключите на Outside.
• Обводка не применяется к группе — группы не поддерживают обводку. Преобразуйте в фрейм (Ctrl+Alt+G).
• Разница в отображении на макете и при экспорте — проверьте режим сглаживания и масштаб.

Совет: всегда тестируйте обводку на реальных устройствах или в режиме презентации. Иногда на экранах с низким DPI тонкие обводки становятся неразличимыми.

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

Дмитрий отмечает, что в последних проектах его команда перешла к минимальному использованию обводок, заменив их тенями и отступами. «Мы используем обводку только там, где она необходима — в формах, таблицах, модальных окнах. Во всём остальном полагаемся на цвет и глубину.»

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

Заключение

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

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