Как сделать обводку в figma

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

Основы обводки в Figma

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

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

Доступ к настройкам обводки осуществляется через правую панель свойств. После выбора любого объекта вы увидите блок Stroke с полями: толщина, цвет, тип линии и расположение. Эти параметры можно комбинировать и сохранять в виде стилей для повторного использования.

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

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

1. Выберите объект на холсте (фигуру, текст, вектор или группу).
2. В правой панели найдите секцию Stroke.
3. Нажмите на значок цвета (по умолчанию серый квадрат с крестиком) и выберите нужный цвет из палитры.
4. Установите толщину обводки в поле рядом с цветом (например, 2 px).
5. При необходимости измените тип линии: Solid, Dashed или Dotted.
6. Настройте положение обводки: Inside, Center или Outside.

Если вы работаете с текстом, помните, что обводка применяется ко всему текстовому блоку, а не к отдельным символам. Для символьной обводки потребуется конвертировать текст в кривые (Create Outlines).

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

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

Типы обводок и настройки

Figma предлагает три основных типа обводки, каждый из которых решает свои задачи:

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

Тип линии можно выбрать в выпадающем меню рядом с цветом. Также доступны параметры длины штриха и промежутка между ними — полезно для кастомизации.

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

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

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

Выбор положения зависит от задачи. Например, для кнопки в сетке лучше использовать Inside, чтобы не нарушать выравнивание. А для иконки, которая должна чётко выделяться на светлом фоне, подойдёт Outside.

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

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

Чтобы применить градиент:

1. Выберите объект и откройте настройки Stroke.
2. Нажмите на цвет и выберите тип Fill — Gradient.
3. Настройте направление, цвета и точки остановки.
4. При необходимости измените угол градиента с помощью маркеров на холсте.

Градиентная обводка особенно эффективна в:

• Логотипах и брендированных элементах;
• Активных состояниях кнопок и табов;
• Декоративных рамках и анимационных прототипах.

Советы по использованию обводки в проектах

Правильное использование обводки повышает качество дизайна и упрощает работу команды. Вот ключевые рекомендации:

• Создавайте стили обводки (Stroke Styles) для единообразия. Например: Primary Button Border, Error Field Border.
• Используйте обводку вместо дополнительных фигур, когда нужно сэкономить слои.
• Тестируйте обводку на разных фоновых цветах — особенно при создании dark mode.
• Избегайте слишком толстых обводок (свыше 4 px) в мелких элементах — они могут искажать форму.
• Для компонентов с переменной шириной используйте обводку с положением Inside — это предотвращает смещение содержимого.

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

• Если объект уже имеет сложную заливку или тень — дополнительная обводка перегрузит визуал.
• В текстовых блоках с малым размером шрифта — обводка может сделать текст нечитаемым.
• При экспорте в форматы без поддержки векторных эффектов (например, JPEG).

Частые ошибки и как их избежать

Новички в Figma часто сталкиваются с проблемами, связанными с обводкой. Разберём самые распространённые:

• Обводка исчезает после изменения размера — причина в положении Outside. При масштабировании объекта обводка может обрезаться. Решение: использовать Inside или Center.
• Обводка не экспортируется — проверьте, не установлена ли толщина 0. Также убедитесь, что объект не скрыт или заблокирован.
• Градиент не отображается на обводке — возможно, выбран неправильный тип заливки. Убедитесь, что в настройках Stroke указан Gradient, а не Solid.
• Обводка «плавает» при выравнивании — это происходит при смешивании положений Inside и Outside в одном фрейме. Рекомендуется унифицировать настройки.

Экспорт и совместимость обводки

При экспорте макетов важно понимать, как обводка ведёт себя в разных форматах.

• PNG — обводка экспортируется как растровое изображение. Тонкие линии могут размыться, особенно при низком DPI.
• JPEG — аналогично PNG, но без прозрачности. Не подходит для элементов с альфа-каналом.
• SVG — лучший формат для обводки. Сохраняет векторную структуру, включая градиенты и пунктир.
• PDF — подходит для презентаций и печати, но может терять некоторые эффекты.

Для разработчиков важно, чтобы обводка была легко реализуема в коде. CSS поддерживает большинство типов:

• Сплошные границы — border: 2px solid #000;
• Пунктир — border: 2px dashed #000;
• Градиентные границы — через background-image и clip-path.

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

Интервью с Артёмом Лебедевым, старшим UI-архитектором, 10 лет в цифровом дизайне

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

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

— Также важно тестировать обводку на разных устройствах. На экранах с низким DPI тонкая линия может быть почти незаметна. Мы стандартизировали минимальную толщину в 1.5 px для всех проектов.

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

Заключение

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

• Обводка не влияет на размеры объекта при положении Inside или Center.
• Градиентная и пунктирная обводка расширяют дизайнерские возможности.
• Сохраняйте стили обводки для единообразия в проектах.
• Тестируйте обводку при экспорте и на разных фоновых цветах.
• Используйте обводку осознанно — она должна служить цели, а не перегружать интерфейс.