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

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

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

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

Толщина обводки задаётся в пикселях и может быть любой — от 0 до 1000. При этом даже нулевая толщина остаётся активной, если включена, что иногда вызывает путаницу у новичков. Цвет обводки выбирается через цветовой пикер, поддерживает HEX, RGB, HSL, альфа-канал и библиотеку цветов из дизайн-системы.

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

Цвет и прозрачность

Цвет обводки задаётся так же, как и заливка: через цветовой пикер или ввод кода. Поддерживаются сплошные цвета, градиенты и даже изображения (в виде fill-типа для stroke, начиная с некоторых обновлений). Прозрачность регулируется ползунком opacity или вводом значения в процентах.

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

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

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

1. Выберите нужную фигуру на холсте с помощью инструмента Selection (V).
2. На правой панели найдите раздел Stroke, расположенный ниже заливки (Fill).
3. Нажмите на значок цвета (по умолчанию серый) или введите значение толщины (например, 2 px).
4. Выберите цвет обводки через пикер или введите HEX-код.
5. При необходимости измените положение обводки: Inside, Center, Outside.

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

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

Рассмотрим практический пример. Допустим, вы создаёте кнопку с текстом и обводкой.

• Нарисуйте прямоугольник (R), размером 200×50 px.
• Установите заливку — белую (#FFFFFF).
• Перейдите к блоку Stroke, установите толщину 2 px, цвет — синий (#0066CC).
• Положение обводки — Outside, чтобы не уменьшать внутреннее пространство под текст.
• Добавьте текст (T), выровняйте по центру.

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

Положение обводки: внутри, по центру, снаружи — в чём разница?

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

• Inside — обводка рисуется внутри границ фигуры, уменьшая видимую область заливки.
• Center — обводка делится пополам: половина внутри, половина снаружи. Стандартное поведение в большинстве графических редакторов.
• Outside — вся обводка находится за пределами фигуры, не влияя на её внутренние размеры.

Выбор зависит от задачи. Например, если вы создаёте сетку карточек, где важна точная ширина 300 px, лучше выбрать Outside. Тогда обводка толщиной 4 px не уменьшит ширину карточки — она добавится сверху.

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

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

• Тип линии: Solid, Dashed, Dotted.
• Параметры пунктира: длина штриха и пробела.
• Форму углов: Join — Miter, Round, Bevel.
• Форму концов линии: Cap — None, Round, Square.
• Градиентную заливку для обводки (в режиме Gradient).

Для пунктирной линии достаточно выбрать тип Dashed, после чего появятся поля для настройки длины штриха и пробела. Например, значения 8 и 4 создадут классический пунктир.

Градиентная обводка: как реализовать

Хотя Figma изначально не поддерживал градиенты в обводке, сейчас это возможно. Алгоритм:

1. Выберите фигуру.
2. В блоке Stroke нажмите на цвет и выберите тип Gradient.
3. Настройте направление и цветовые узлы.
4. При необходимости измените положение обводки.

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

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

Работа с обводкой кажется простой, но даже опытные дизайнеры допускают ошибки. Вот самые распространённые.

• Обводка не отображается — чаще всего причина в нулевой толщине или прозрачном цвете. Проверьте параметры Stroke.
• Обводка «съедает» внутреннее пространство — если вы используете Inside, размер заливки уменьшается. Лучше переключиться на Outside.
• Обводка исчезает при масштабировании — если включено масштабирование обводки, она может стать слишком тонкой или толстой. Отключите опцию «Scale stroke» при необходимости.
• Несоответствие в компонентах — если вы создаёте компонент с обводкой, убедитесь, что все экземпляры используют одинаковые настройки.

Практические советы по использованию обводки в интерфейсах

Обводка — не просто декор, а функциональный элемент. Вот как её эффективно использовать.

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

В формах поля ввода часто имеют обводку 1–2 px. При фокусе толщина увеличивается до 2–3 px, а цвет меняется — это стандартный паттерн доступности.

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

«Многие недооценивают роль обводки в восприятии интерфейса. На самом деле, даже 1-пиксельная линия может менять визуальный вес элемента. В одном из проектов мы заменили сплошную обводку на пунктирную — и пользователи стали воспринимать блок как “временный” или “необязательный”. Это показывает: обводка — это не просто стиль, а сигнал.»

— Екатерина Шульгина, продуктовый дизайнер, ex-Yandex

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

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

Заключение

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

• Всегда проверяйте положение обводки: Outside — для фиксированных размеров, Inside — для плотных сеток.
• Используйте несколько обводок умеренно — они полезны, но могут усложнить макет.
• Стандартизируйте параметры обводки в дизайн-системе для единообразия.
• Не забывайте про масштабирование: отключайте «Scale stroke», если нужно сохранить толщину.
• Тестируйте обводку в разных темах — особенно в тёмной, где контраст критичен.