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

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

Что такое обводка в Figma и зачем она нужна

Обводка — это линия, проходящая по периметру фигуры, фрейма или текстового блока. В отличие от заливки (fill), которая определяет внутреннюю область объекта, обводка работает с его границей. Это визуальный акцент, который помогает отделить элемент от фона, подчеркнуть его функциональность или указать на взаимодействие. Например, кнопка с обводкой может означать её неактивное состояние, а при наведении — изменение толщины или цвета обводки сигнализирует о готовности к клику.
В UI/UX-дизайне обводка используется повсеместно: в полях ввода, карточках, кнопках, иконках и даже в сетках макетов. Она особенно важна при создании доступных интерфейсов, где контраст между элементами должен быть очевиден. Согласно рекомендациям WCAG, минимальный контраст между обводкой и фоном должен составлять 3:1 для элементов размером от 3 пикселей и выше.
Figma предоставляет полный контроль над обводкой: вы можете менять её толщину от 0,1 до 1000 px, использовать сплошные, пунктирные или штрихпунктирные линии, применять градиенты и управлять положением относительно контура фигуры. Такая гибкость делает Figma мощным инструментом для прототипирования и создания дизайн-систем.

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

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

1. Создайте или выберите существующую фигуру с помощью инструментов Rectangle, Ellipse, Polygon или Pen.
2. Убедитесь, что панель свойств (Inspector) открыта справа. Если её нет, нажмите правой кнопкой на объект и выберите «Show in Properties».
3. Найдите раздел «Stroke» — он расположен сразу под заливкой (Fill). По умолчанию количество обводок равно нулю.
4. Нажмите на значок «+» рядом с надписью «Add stroke», чтобы добавить первую линию.
5. Выберите цвет обводки, щёлкнув по цветовому квадрату. Откроется палитра, где можно выбрать из текущих стилей, ввести HEX-код или использовать eyedropper (пипетку).
6. Установите толщину обводки в поле «Stroke weight». Значение можно вводить вручную или использовать стрелки.

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

Как быстро дублировать обводку

Если нужно создать вторую обводку, аналогичную первой, проще всего продублировать её. Щёлкните правой кнопкой мыши по уже добавленной обводке в панели свойств и выберите «Duplicate stroke». После этого измените параметры новой линии по необходимости.

Использование горячих клавиш

Figma поддерживает сочетания клавиш для быстрого доступа. Например, Ctrl/Cmd + Shift + C копирует стиль обводки, а Ctrl/Cmd + Shift + V вставляет его на другой объект. Это ускоряет работу при создании однотипных элементов.

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

После добавления обводки становится доступен целый набор параметров. Разберём каждый из них подробно.
Цвет обводки можно задать несколькими способами: через палитру, ввод HEX/RGB/HSL-значений, выбор из библиотеки цветов или использование пипетки (eyedropper). Figma позволяет создавать стили обводки, которые можно применять к другим объектам. Для этого нажмите на значок звёздочки рядом с цветом — он появится в разделе «Local styles» или в библиотеке, если вы работаете с командным файлом.
Толщина обводки (stroke weight) измеряется в пикселях. Минимальное значение — 0.1 px, максимальное — 1000 px. На практике чаще всего используются значения от 1 до 4 px для интерфейсов. Важно помнить, что толщина обводки влияет на общие габариты фигуры, особенно если обводка расположена снаружи.
Стиль линии может быть:

• Сплошной (Solid) — стандартный вариант;
• Пунктирный (Dashed) — чередование линий и пробелов;
• Штрихпунктирный (Dotted) — серия круглых точек.

Для пунктирных и точечных стилей можно настроить длину штриха и расстояние между элементами. Эти параметры находятся под выпадающим списком стиля линии.

Положение обводки: Inside, Center, Outside

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

• Inside — обводка рисуется внутри контура фигуры;
• Center — линия проходит по центру контура (половина внутри, половина снаружи);
• Outside — вся обводка находится за пределами фигуры.

Выбор положения критически важен при работе с точными размерами. Например, если у вас кнопка 100×40 px и вы добавляете 2-пиксельную обводку снаружи, её визуальные габариты станут 104×44 px, что может нарушить выравнивание в сетке.

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

Даже опытные дизайнеры иногда сталкиваются с проблемами при использовании обводки. Ниже — самые частые ошибки и пути их решения.
Первая ошибка — игнорирование положения обводки. Многие дизайнеры оставляют обводку по умолчанию (Center), не задумываясь, как это влияет на размеры. В результате при передаче макета разработчику возникают расхождения: «Кнопка в Figma 100 px, а в коде — 102». Чтобы избежать этого, всегда проверяйте положение обводки и согласуйте стандарты с командой.
Вторая ошибка — использование слишком тонкой обводки на светлом фоне. Обводка толщиной 1 px с низким контрастом может быть плохо различима, особенно на мобильных устройствах. Рекомендуется использовать минимум 2 px для обводок, если они несут смысловую нагрузку.
Третья ошибка — множественные обводки без системы. Добавляя несколько обводок, легко потерять контроль над стилями. Лучше создать переиспользуемые стили (например, «Border/Primary 2px») и применять их последовательно.

Пример: обводка в состоянии фокуса

Многие дизайн-системы используют обводку для состояния фокуса (focus state). Но если обводка внешняя, она может сдвигать соседние элементы. Решение — использовать обводку внутри или добавлять прозрачную внешнюю обводку в неактивном состоянии, чтобы резервировать место.

Продвинутые техники: пунктир, градиентная обводка, обводка для текста и фреймов

Figma позволяет делать больше, чем просто сплошную линию. Рассмотрим продвинутые возможности.
Пунктирная обводка настраивается через параметры Dash and Gap. Например, чтобы создать стиль «через одну», установите Dash = 8, Gap = 8. Это часто используется в зонах перетаскивания (drop zones) или для обозначения временных элементов.
Градиентная обводка — одна из самых мощных функций. Чтобы её применить, выберите тип заливки Gradient в настройках цвета обводки. Доступны линейные, радиальные, угловые и диаметральные градиенты. Однако будьте осторожны: не все платформы поддерживают градиентные обводки в коде (например, CSS border-image требует дополнительных усилий).
Обводка для текста работает так же, как и для фигур. Выделите текстовый блок, добавьте обводку — и она будет повторять контуры букв. Это полезно для заголовков, логотипов или эффектов типа «вырезанного текста». Учтите, что толстая обводка может сделать шрифт нечитаемым, особенно с тонкими гарнитурами.
Фреймы и группы тоже могут иметь обводку. Это удобно для выделения секций макета, создания карточек или сеток. Однако если фрейм содержит много вложенных элементов, обводка может конфликтовать с внутренними отступами. Используйте Auto Layout, чтобы контролировать поведение.

Чек-лист: Проверка обводки перед презентацией

• Соответствует ли цвет обводки дизайн-системе?
• Правильно ли установлено положение (inside/center/outside)?
• Достаточна ли толщина для восприятия на всех устройствах?
• Есть ли конфликты с соседними элементами при изменении состояний?
• Поддерживается ли стиль (например, градиент) в целевой платформе?

Обводка в дизайн-системах и компонентах

В профессиональной разработке дизайн-систем обводка стандартизируется. Команда определяет набор типовых обводок: например, Primary Border (2 px, solid, #0066CC), Dashed Border (1 px, dashed, #CCCCCC) и Focus Ring (2 px, solid, #0050A0, outside).
Такие стили сохраняются как Local или Library Styles, чтобы любой участник проекта мог применить их одним кликом. Это исключает ошибки и обеспечивает консистентность. При работе в Figma Teams эти стили синхронизируются между файлами.
Компоненты с обводкой, такие как кнопки, поля ввода и карточки, должны иметь варианты состояний: default, hover, focus, disabled. Обводка — ключевой индикатор этих состояний. Например, поле ввода может иметь серую обводку в состоянии default и синюю при фокусе.

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

1. Откройте фигуру с нужной обводкой.
2. В панели свойств найдите строку Stroke.
3. Нажмите на значок звёздочки справа от цвета.
4. Введите имя стиля, например, «Border/Primary 2px Solid».
5. Нажмите «Create style».

Теперь этот стиль доступен во всех новых фигурах через выпадающий список цветов.

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

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

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

Заключение

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

• Обводка — ключевой элемент визуальной иерархии и состояний интерфейса.
• Положение обводки (inside/center/outside) влияет на габариты объекта — выбирайте осознанно.
• Создавайте переиспользуемые стили обводки для консистентности в дизайн-системе.
• Тестируйте обводку на контраст, читаемость и совместимость с целевыми платформами.
• Используйте обводку экономно — она должна помогать пользователю, а не отвлекать.