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

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

Основные настройки обводки в Figma

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

Первый параметр — толщина (Weight). Она задаётся в пикселях и может быть любой, включая дробные значения (например, 1.5 или 0.5). Это особенно полезно при работе с ретина-экранами, где нужна высокая детализация. Второй — цвет. Цвет обводки выбирается через палитру, HEX-код, RGB или альфа-канал. Можно использовать как сплошные заливки, так и градиенты.

Для быстрого доступа к цветам рекомендуется использовать библиотеку стилей, особенно если вы работаете в команде. Это обеспечивает единообразие и ускоряет процесс. Например, если в дизайн-системе есть стандартный цвет для активного состояния поля ввода, его можно сохранить как «Stroke/Primary/Active» и применять одним кликом.

Пошаговое добавление обводки

1. Выделите нужный объект с помощью инструмента «Selection» (V).
2. В правой панели найдите блок «Strokes». Он расположен под «Fill» и над «Effects».
3. Нажмите на значок квадрата с плюсом, чтобы активировать обводку (по умолчанию она отключена).
4. Установите толщину: введите значение в поле Weight или используйте стрелки.
5. Выберите цвет, кликнув по цветовому квадрату.
6. Настройте расположение (Position) — внутри, по центру или снаружи.

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

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

Когда обводка находится по центру, половина её толщины накладывается внутрь объекта, а другая — снаружи. Это стандартное поведение, но оно может вызвать проблемы при точной верстке. Например, если у кнопки ширина 200 px и обводка 4 px по центру, то визуально она займёт 204 px, но только наполовину — 2 px сверху и снизу выходят за границы.

Если обводка установлена снаружи, весь её вес добавляется к внешним размерам. Это удобно при создании ховер-эффектов, когда нужно, чтобы рамка появлялась без сдвига содержимого. Однако при этом важно учитывать отступы (padding и margin) в макете.

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

• Inside — когда нужно сохранить точные габариты элемента. Подходит для иконок, чекбоксов, полей ввода.
• Center — универсальный вариант для большинства случаев, особенно если обводка тонкая (1–2 px).
• Outside — для акцентных рамок, таких как фокус-состояние или выделение группы элементов.

Как добавить более одной обводки

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

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

Пример: кнопка с двойной обводкой — внутренняя тонкая (1 px, серый), внешняя — более толстая (3 px, синий). Такой эффект делает кнопку объёмной и привлекательной. При этом внешняя обводка может быть смещена наружу, а внутренняя — внутрь, чтобы не было наложения.

Практический кейс: кнопка с неоновым эффектом

1. Создайте прямоугольник 160×48 px.
2. Добавьте первую обводку: 4 px, цвет #00FFFF, Position — Outside.
3. Добавьте вторую: 2 px, цвет #0080FF, Position — Outside.
4. Добавьте третью: 1 px, цвет #000000, Position — Inside (для имитации тени).
5. Примените эффект Blur к первым двум обводкам через панель Effects.

Такой подход часто используется в дизайне игр, технологических платформ и футуристических интерфейсов.

Создание пунктирной и кастомной обводки

Помимо сплошной линии, Figma позволяет делать пунктирную (Dashed) и точечную (Dotted) обводку. Это полезно для создания зон перетаскивания, временных рамок или визуальных подсказок. Тип обводки выбирается в выпадающем меню рядом с цветом.

Пунктирная обводка настраивается двумя параметрами: длина штриха (Dash) и длина пробела (Gap). По умолчанию они равны, но вы можете задать любые значения. Например, Dash 8, Gap 4 — длинные штрихи с короткими паузами.

Если стандартных опций недостаточно, можно создать кастомную пунктирную обводку. Для этого используются векторные маски: нарисуйте линию, преобразуйте её в вектор (Ctrl+B), затем удалите части с помощью Pen Tool или Scissors. Так получится уникальный рисунок — например, волнистая линия или стрелки.

Пример: зона загрузки файла

• Создайте прямоугольник с заливкой прозрачной.
• Добавьте обводку: 2 px, серый цвет, Dashed (Dash 6, Gap 6).
• Установите Position — Inside, чтобы рамка не выходила за границы.
• Добавьте текст «Перетащите файл сюда».
• При активности измените цвет обводки на синий и добавьте анимацию через Prototype.

Этот паттерн широко используется в веб-формах и десктопных приложениях.

Практические примеры использования обводки

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

1. Выделение активного элемента

В навигации или списке компонентов активный пункт часто выделяется цветной обводкой. Например, в боковом меню текущий раздел подсвечивается синей рамкой. Это улучшает ориентацию пользователя.

2. Состояние фокуса для доступности

Для клавиатурной навигации обязательна визуальная подсказка. Обводка 2 px с цветом контраста (например, #005fcc) помогает пользователям с ограниченными возможностями понимать, где находится фокус.

3. Ограничение зоны действия

В редакторах (например, Figma внутри Figma) рамка выделяет область канваса. Это помогает отделить рабочее пространство от интерфейса.

4. Декоративные рамки

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

5. Системные сообщения

Уведомления типа «Ошибка» или «Предупреждение» часто имеют цветную обводку: красную для ошибки, жёлтую — для предупреждения, зелёную — для успеха.

Типичные ошибки и как их избежать

Новички в Figma часто допускают ошибки при работе с обводкой. Вот самые частые:

• Забывают про расположение обводки. Из-за этого элементы «прыгают» при наведении или теряют точность в макете. Решение — всегда проверять Position.
• Используют слишком толстую обводку. 5 px рамка на маленькой иконке выглядит громоздко. Оптимальная толщина — 1–2 px для большинства случаев.
• Не согласовывают обводку с дизайн-системой. Разные цвета и стили создают визуальный шум. Решение — создать стили обводок в библиотеке.
• Добавляют обводку к тексту без учёта межстрочного интервала. Обводка может «наехать» на соседние строки. Лучше использовать её умеренно.
• Забывают, что обводка влияет на экспорт. При экспорте в PNG или SVG рамка может выйти за границы фрейма. Проверяйте clipping.

Экспорт обводки для разработчиков

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

Для однослойной обводки генерируется правило border: 2px solid #1a73e8;. Если обводок несколько, Figma создаёт box-shadow с inset или multiple borders через псевдоэлементы. Это важно учитывать при верстке.

Чтобы упростить коммуникацию:

• Создайте компонент с обводкой и опишите его состояния (default, hover, focus).
• Используйте плагины, например, «Tokens Studio», чтобы связать обводки с переменными.
• Добавьте комментарии в Figma с пояснением, когда применяется каждая обводка.

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

По его словам, лучшие практики включают:

• Создание библиотеки обводок (например, Primary Stroke, Error Border).
• Автоматизацию через плагины, такие как «Styler» или «Blush».
• Тестирование на разных фоновых цветах — обводка должна быть видна при любом контрасте.

Он также отмечает, что Figma продолжает развивать функционал обводки: в будущем возможна поддержка градиентных пунктирных линий и анимированных рамок.

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

Заключение

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

Главное — понимать, как работает расположение обводки, уметь настраивать несколько слоёв и следовать принципам дизайн-системы. Не стоит забывать и про практическое применение: обводка должна решать задачу, а не просто быть красивой.

• Всегда проверяйте положение обводки: Inside, Center, Outside.
• Используйте до четырёх обводок для создания сложных визуальных эффектов.
• Создавайте стили обводок для единообразия в команде.
• Учитывайте влияние обводки на размеры элементов, особенно в Auto Layout.
• Передавайте параметры обводки разработчикам через режим Inspect и комментарии.