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

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

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

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

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

Для UI/UX-дизайнеров обводка — важный инструмент для создания карточек, кнопок, полей ввода и других интерактивных элементов. Например, активное состояние поля формы часто подсвечивается цветной обводкой. Также она применяется в дашбордах, где требуется чёткое разделение блоков данных.

Как в Figma сделать обводку по контуру: базовая настройка

Чтобы добавить обводку к любому объекту, сначала выделите его на холсте. Это может быть прямоугольник, эллипс, многоугольник или даже группа. После этого перейдите в правую панель, вкладку Design (если она не видна, нажмите Ctrl+Shift+I или Cmd+Shift+I).

В секции Stroke вы увидите несколько параметров: цвет, толщина и положение. Нажмите на значок квадрата с рамкой, чтобы активировать обводку. По умолчанию она серого цвета и имеет толщину 1 px. Чтобы изменить цвет, кликните по цветовому квадрату и выберите нужный оттенок из палитры, введите HEX-код или используйте eyedropper.

Толщину обводки можно задать вручную, введя значение в поле рядом с единицами измерения (px). Поддерживаются дробные значения, например, 0.5 px или 2.75 px. Это особенно полезно при работе с дизайн-системами, где требуется высокая точность.

1. Выделите объект на холсте.
2. Перейдите в панель Design справа.
3. Активируйте обводку через иконку Stroke.
4. Выберите цвет и установите толщину.
5. Настройте положение (по умолчанию — Center).

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

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

Когда обводка находится в режиме Center, она делится поровну между внутренним и внешним пространством. Это стандартное поведение, но оно может вызывать проблемы при выравнивании. Например, если у вас есть прямоугольник 100×100 px с обводкой 4 px по центру, его визуальные границы будут выходить за пределы на 2 px с каждой стороны.

Если выбрать Outside, вся обводка будет нарисована снаружи объекта. Это удобно, когда нужно сохранить внутренние размеры, например, при создании сетки или макета с жёсткими отступами. Режим Inside полностью помещает обводку внутрь фигуры, что уменьшает видимую область заполнения.

Расширенные настройки обводки: пунктир, скругления, градиенты

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

Чтобы создать пунктирную обводку, найдите параметр Stroke Style под цветом. Выберите Dashed или Dotted. Для Dashed можно задать длину штриха и промежуток между ними. Например, штрих 8 px и пробел 4 px создадут чёткий визуальный ритм.

Форма углов регулируется через выпадающее меню рядом с толщиной. Доступны три варианта:

• Butt — концы линии обрезаны по прямой;
• Round — закруглённые концы;
• Square — выступающие концы, увеличенные на половину толщины.

Для более сложных эффектов используйте градиентную обводку. Вместо сплошного цвета выберите Gradient в палитре. Доступны Linear, Radial, Angular и Diamond типы. Это особенно эффективно для современных дизайнов с акцентом на брендинг, например, для кнопок с эффектом «неон».

Особенности обводки текста и кривых путей

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

Если вы работаете с очень тонким шрифтом, обводка может «захламить» текст. В таких случаях лучше использовать более толстое начертание или увеличить размер. Также учтите, что обводка добавляет визуальный вес, поэтому при тёмном фоне и светлой обводке текст может казаться крупнее.

Для векторных путей (например, созданных Pen Tool) обводка ведёт себя аналогично, но требует внимания к соединениям. Углы могут иметь разные стили: Miter (острые), Bevel (срезанные) или Round (скруглённые). Эти настройки находятся в том же блоке, что и форма концов линий.

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

Одна из самых распространённых ошибок — игнорирование положения обводки. Дизайнеры часто оставляют обводку в режиме Center, не замечая, что объект «вылезает» за сетку. Это создаёт проблемы при передаче макета разработчикам, которые ожидают точных размеров.

Ещё одна частая проблема — использование слишком толстой обводки на маленьких элементах. Например, иконка 16×16 px с обводкой 3 px теряет детализацию. В таких случаях лучше отказаться от обводки или использовать её только в активном состоянии.

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

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

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

Мы поговорили с Татьяной Петровой, старшим дизайнером в компании UXStudio, которая более 10 лет работает с Figma и преподаёт курсы по интерфейсному дизайну.

Как правильно интегрировать обводку в дизайн-систему?

• Во-первых, стандартизируйте толщину. У нас в проектах используются только 1, 2 и 4 px — никаких промежуточных значений.
• Во-вторых, задайте правила использования: где допустима обводка, а где лучше использовать отступы или тени.
• И обязательно создайте компоненты с обводкой — например, кнопки с состоянием hover или disabled.

Какие новшества в Figma упрощают работу с обводкой?

Figma недавно добавила поддержку переменных для стилей обводки. Теперь можно создать стиль «Primary Border» и применять его по всей библиотеке. Это экономит время и снижает количество ошибок.

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

Заключение

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

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

• Всегда проверяйте положение обводки — Inside, Center или Outside влияют на габариты объекта.
• Используйте стандартные толщины (1, 2, 4 px) для согласованности.
• Градиенты и пунктир — мощные средства, но применяйте их осознанно.
• Для множественной обводки используйте плагины или вложенные фигуры.
• Тестируйте обводку на контрасте и в разных состояниях интерфейса.