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

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

Основы обводки в Figma: что нужно знать

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

Каждая обводка имеет три ключевых параметра: цвет, ширина (в пикселях) и расположение. Цвет выбирается из палитры, включая белый (#FFFFFF), который часто используется в дарк-модах, карточках с тёмным фоном или при создании светлых разделителей. Однако важно понимать, что даже идеально подобранный цвет может «потеряться», если не учитывать контекст — например, если белая обводка находится на белом фоне.

Figma также поддерживает прозрачность обводки. Это означает, что вы можете использовать белый цвет с альфа-каналом (например, #FFFFFF80), чтобы создать полупрозрачную светлую рамку. Такой подход часто применяется в современных дизайн-системах, таких как Material Design или Apple’s Human Interface Guidelines.

Чем обводка отличается от фона и теней

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

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

• Заливка (Fill) — внутренняя часть объекта.
• Обводка (Stroke) — внешний контур.
• Тень (Effect) — дополнительный визуальный слой.

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

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

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

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

Допустим, вы создаёте кнопку для мобильного приложения с тёмным интерфейсом. Фон кнопки — тёмно-серый (#1E1E1E), и вы хотите выделить её белой рамкой.

• Нарисуйте прямоугольник размером 200×50 px.
• Установите заливку: #1E1E1E.
• Активируйте обводку, задайте цвет #FFFFFF, толщину 2px, положение — Outside.
• Добавьте текст «Подробнее», цвет текста — белый.
• Проверьте, как кнопка выглядит на общем фоне — например, на чёрном (#000000).

Результат — контрастный, легко читаемый элемент, который визуально отделён от окружения.

Положение обводки: возможности и ошибки

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

• Outside — обводка рисуется снаружи границ объекта.
• Center — половина ширины обводки внутри, половина снаружи.
• Inside — вся обводка находится внутри объекта.

Выбор положения влияет на точность компоновки. Например, если вы используете положение «снаружи» для элемента размером 100×100 px с обводкой 4px, визуальные габариты станут 104×104 px, но система автолэйаута и выравнивания продолжит считать его 100×100 px. Это может вызвать перекрытие соседних элементов.

Типичные ошибки

• Обводка не видна — чаще всего из-за совпадения цвета с фоном. Проверьте, не стоит ли белая обводка на белом фоне.
• Непреднамеренное увеличение макета — особенно при использовании Outside. Это может нарушить сетку.
• Обводка исчезает при экспорте — если толщина меньше 0.5px, она может не отрендериться. Используйте минимум 1px для надёжности.

Цвет обводки и контраст с фоном: практические рекомендации

Белая обводка эффективна только тогда, когда она контрастирует с фоном. Согласно стандартам WCAG (Web Content Accessibility Guidelines), минимальный контраст для границ должен быть не менее 3:1 по отношению к смежным цветам. Это особенно важно для пользователей с нарушениями зрения.

Если ваш макет использует дарк-мод, белая обводка (#FFFFFF) на фоне #121212 даёт контраст около 21:1 — отлично. Но если фон — серый #DDDDDD, контраст упадёт до 1.3:1, что делает рамку почти невидимой.

Альтернативы чисто белому цвету

Иногда чисто белый цвет слишком резкий. Дизайнеры используют более мягкие оттенки:

• #F8F8F8 — чуть тёплый белый, лучше смотрится на тёмных фонах.
• #FFFFFFCC — белый с 80% непрозрачности, создаёт эффект стекла.
• #EEEEEE — светло-серый, менее агрессивный, чем белый.

Такие цвета особенно популярны в дизайне с эффектом frosted glass (матовое стекло), где требуется легкая, но заметная граница.

Дополнительные настройки обводки: стиль и сложные эффекты

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

• Dashed — пунктир. Полезен для временных рамок, зон дропа или неактивных состояний.
• Dotted — точки. Часто используется в формах или для декоративных рамок.
• Gradient Stroke — градиентная обводка. Можно задать несколько цветов, включая белый как один из этапов.

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

Когда использовать нестандартные стили

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

Не переусердствуйте: в большинстве UI-проектов предпочтительна сплошная белая обводка как наиболее универсальная и читаемая.

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

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

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

Заключение

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

• Белая обводка активируется через панель Stroke на правой панели.
• Выбирайте положение Outside для максимальной видимости и предсказуемости.
• Проверяйте контраст с фоном — используйте плагины для точности.
• Избегайте центрированной обводки — она может выглядеть размыто.
• Для текста и авто-лейаутов учитывайте влияние обводки на размеры и отступы.