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

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

Как добавить обводку к объекту в Фигме

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

Для быстрого доступа можно использовать горячие клавиши: выделите объект и нажмите Cmd+Shift+B (Mac) или Ctrl+Shift+B (Windows). Это мгновенно активирует обводку с параметрами по умолчанию — толщиной 1px и цветом #000000. После этого вы можете настроить её под свои нужды.

Представьте, что вы проектируете кнопку «Купить» в интерфейсе мобильного приложения. Без обводки она может слияться с фоном. С тонкой обводкой — выделяется, но не бросается в глаза. С толстой — становится акцентом. Именно так обводка формирует визуальную иерархию.

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

После включения обводки вы получаете доступ к четырём основным параметрам: толщина, цвет, стиль линии и положение. Толщина задаётся в пикселях — от 0,1 до 100. Для интерфейсов чаще всего используют 0,5–2 px. В дизайне систем, где важна точность (например, корпоративные дашборды), применяют 1 px как стандарт. Для выделения элементов в анимациях или на экранах привлечения внимания — до 3–5 px.

Цвет обводки выбирается через палитру — можно использовать как предустановленные цвета, так и вводить HEX, RGB или HSL вручную. Особенно полезно, когда вы работаете в рамках дизайн-системы с заранее заданными цветовыми переменными. Фигма поддерживает цвета из библиотек, поэтому вы можете создать цвет «Primary Border» и применять его везде — при обновлении одного значения он изменится во всех местах.

Стиль линии — это не просто сплошная линия. Фигма позволяет задавать пунктирные и штриховые обводки. Нажмите на поле «Dash» и введите значения: первое — длина штриха, второе — пробел. Например, «4, 2» даст штрих 4px, пробел 2px. Это особенно актуально для статусных индикаторов, временных меток или элементов, которые должны выглядеть как «незавершённые».

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

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

— Inside — обводка рисуется внутрь формы, не изменяя её внешние размеры. Идеально для кнопок, карточек и других элементов, где важно сохранить фиксированную ширину и высоту. Например, если у вас прямоугольник 100×50 px и вы добавляете обводку 2 px внутри — внутренняя область остаётся 96×46 px.
— Center — обводка делится пополам: половина идёт внутрь, половина — наружу. Это удобно для элементов, где важна симметрия, но не критична точная геометрия.
— Outside — обводка расширяет объект. Если у вас прямоугольник 100×50 px и обводка 2 px снаружи — итоговый размер станет 104×54 px. Это может сломать макет, если вы не учли это при верстке.

В большинстве случаев дизайнеры выбирают «Inside», потому что это предсказуемо и совместимо с системами верстки. Особенно это важно при работе с компонентами, которые должны быть одинаковыми по размеру независимо от наличия обводки.

Применение обводки к группам и компонентам

Обводка в Фигме работает не только на отдельных объектах — она может быть применена к группам и компонентам. Это критически важно для масштабирования дизайна. Представьте, что у вас 20 кнопок с одинаковой обводкой. Если вы измените её в одном компоненте — обновление распространится на все экземпляры. Это экономит часы ручной правки.

Чтобы применить обводку к группе: выделите все элементы, нажмите Cmd+G, затем настройте Stroke в панели свойств. Обводка будет охватывать всю группу как единый контур. Если вам нужно, чтобы обводка обводила только внешний контур группы, а не каждый элемент внутри — используйте режим «Union» в режиме Boolean Operations.

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

Создание и использование стилей обводок

Фигма позволяет создавать глобальные стили обводок — это как CSS-классы для дизайна. Чтобы создать стиль: настройте обводку нужного объекта, затем в панели свойств нажмите на значок «+» рядом с названием «Stroke». Дайте стилю понятное имя — например, «Border/Primary/1px» или «Border/Secondary/Dashed».

Теперь вы можете применить этот стиль к любому другому объекту через выпадающий список в разделе «Stroke». Это особенно полезно в командах: дизайнеры могут использовать единые стили, а разработчики — легко находить соответствия в коде. Стили обводок можно экспортировать в библиотеки, делиться с коллегами и интегрировать в дизайн-системы.

Не забывайте: стили обводок не наследуются автоматически. Если вы измените стиль, он обновится только для тех объектов, которые явно его используют. Это даёт контроль, но требует дисциплины.

Частые ошибки при работе с обводками и как их избежать

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

• Использование обводки снаружи без учёта сетки. Это сдвигает элементы и ломает вертикальный ритм. Решение: всегда используйте «Inside» для элементов в сетке.
• Слишком толстая обводка на маленьких элементах. Например, обводка 3 px на иконке 16×16 px — это визуальный шум. Решение: максимум 1 px для иконок до 24 px.
• Обводка на тексте без проверки читаемости. Текст с толстой обводкой может казаться «размытым». Решение: используйте обводку только для заголовков, и то с толщиной не более 0,5 px.
• Несогласованные цвета обводок. Разные оттенки серого для границ — выглядит непрофессионально. Решение: создайте стили обводок и используйте только их.
• Отсутствие теста на разных фонах. Белая обводка на белом фоне — не видна. Чёрная на тёмном — может «выпирать». Решение: всегда проверяйте обводки на светлом и тёмном фонах.

Проверяйте свои макеты в режиме «Preview» — это покажет, как обводки будут выглядеть на реальном устройстве.

Экспертное мнение: как обводка влияет на UX

В исследованиях Nielsen Norman Group показано, что чёткие, но тонкие границы (0,5–1 px) повышают воспринимаемую точность интерфейса на 23% по сравнению с отсутствием границ. Обводки помогают пользователям визуально группировать элементы, понимать зоны взаимодействия и чувствовать стабильность системы. Особенно это важно в сложных интерфейсах — например, в CRM, аналитических панелях или системах управления контентом.

Но есть и обратная сторона: избыточные обводки вызывают когнитивную перегрузку. Исследование 2023 года, проведённое в MIT Media Lab, показало, что интерфейсы с более чем 3 типами обводок на одной странице снижают скорость выполнения задач на 17%. Поэтому — меньше, но точнее.

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

Заключение

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

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

• Используйте положение «Inside» для элементов в сетке — это сохраняет стабильность макета.
• Создавайте стили обводок как часть дизайн-системы — это ускоряет работу команды.
• Толщина обводки: 0,5–1 px — стандарт для интерфейсов; больше — только для акцентов.
• Проверяйте обводки на светлом и тёмном фонах — они должны быть читаемы в обоих режимах.
• Избегайте избыточных обводок: меньше — значит лучше.