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

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

Что такое контур (Stroke) в Figma и зачем он нужен

Контур, или Stroke — это векторная линия, которая рисуется по краю фигуры, не заполняя её внутреннюю область. В отличие от заливки (Fill), которая окрашивает пространство внутри формы, контур подчёркивает её границы. Это ключевой элемент в дизайне интерфейсов: контуры используются для выделения активных элементов, разделения блоков, создания иконок, кнопок с акцентом и даже для анимаций. В системах дизайна, таких как Material Design или Apple HIG, контуры часто задают визуальную иерархию — например, тонкая обводка 1px для второстепенных элементов, а 2px — для выделенных.

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

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

Добавить контур к любой фигуре в Figma — задача, выполняемая за 10 секунд. Вот пошаговый алгоритм:

1. Выберите объект на холсте: кликните по фигуре (прямоугольник, круг, многоугольник и т.д.).
2. Откройте панель свойств справа — она автоматически отобразит параметры выбранного объекта.
3. Найдите раздел Stroke — он находится ниже параметров Fill и выше Shadow.
4. Включите обводку, щёлкнув по иконке с линией (или поставив галочку в чекбоксе).
5. Выберите цвет: кликните по цветовому квадрату и используйте палитру, HEX-код или eyedropper для выбора из дизайна.
6. Задайте толщину: используйте ползунок или введите значение в пикселях (например, 1, 2, 4).

После этого контур сразу отобразится на фигуре. Если вы работаете с текстом, помните: контур можно добавить только к тексту, если он преобразован в контур (Right-click → Convert to Outline). Обычный текст не поддерживает Stroke напрямую.

Выравнивание контура: внутрь, наружу, по центру

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

• Center — контур рисуется симметрично относительно края фигуры. Полезен для симметричных элементов, но может «съедать» пространство при плотном расположении.
• Inside — обводка остаётся внутри границ фигуры. Идеально для кнопок, где важно сохранить внутреннюю область без смещения содержимого. Например, если у вас кнопка 48x48px с контуром 2px внутри — реальная область для текста остаётся 44x44px.
• Outside — контур выходит за пределы фигуры. Используется в дизайне иконок, где обводка должна «выделять» форму, не занимая место внутри. Особенно полезен при создании сеток с ячейками.

Представьте, что вы создаёте таблицу с ячейками 60x60px. Если вы используете контур 1px по центру, каждая ячейка будет занимать 61x61px визуально — это нарушит сетку. Выравнивание «Inside» сохранит точные размеры.

Стили обводки: пунктир, капли, ширина и прозрачность

Figma позволяет не просто менять толщину и цвет, но и настраивать сложные стили обводки. Нажмите на стрелку рядом с полем «Stroke» — откроются дополнительные параметры.

• Cap — определяет форму концов линии: Round (круглые), Square (квадратные), Butt (плоские). Для иконок и линий, заканчивающихся в углу, лучше использовать Butt — чтобы не было «выступов».
• Join — стиль соединения линий в углах: Miter (острые), Round (закруглённые), Bevel (срезанные). Для угловых форм, например, стрелок, Miter даёт чёткий эффект.
• Dash — создаёт пунктирную линию. Укажите длину штриха и интервал. Полезно для временных выделений, состояний «дизейбл» или визуальных разделителей.
• Opacity — прозрачность обводки. Снижает визуальное давление. Например, 30% для обводки на тёмном фоне создаёт эффект «лёгкого намёка».

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

Преобразование контура в путь: Outline Stroke

Когда контур становится частью формы — это уже не просто линия, а полноценный векторный путь. Функция Convert to Outline (или Outline Stroke) превращает обводку в отдельную фигуру, которую можно редактировать как обычный путь. Это необходимо, когда вы хотите:

— Вырезать контур из другого объекта;
— Применить градиент к обводке;
— Создать сложные анимации;
— Экспортировать в SVG с корректной векторной структурой.

Как это сделать:

1. Выберите фигуру с обводкой.
2. Перейдите в меню Object → Outline Stroke (или используйте сочетание Cmd+Shift+O).
3. Figma автоматически создаст новую фигуру, повторяющую форму обводки.
4. Теперь вы можете изменять её форму, применять заливки, вычитать, объединять — как с любым другим вектором.

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

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

Даже опытные дизайнеры допускают ошибки при работе с контурами. Вот пять самых распространённых:

• Ошибка 1: Контур 1px на экране 2x — визуально становится 2px. Решение: используйте масштаб 100% при проверке и проверяйте на реальном устройстве.
• Ошибка 2: Выравнивание «Outside» на границе сетки — объект выходит за пределы. Решение: всегда включайте «Snap to Grid» и проверяйте размеры в панели Properties.
• Ошибка 3: Контур не виден на тёмном фоне. Решение: используйте контрастный цвет или увеличьте толщину до 1.5–2px.
• Ошибка 4: Обводка не применяется к группе. Решение: контур работает только на уровне отдельного объекта. Объедините элементы в Frame, а не в Group.
• Ошибка 5: Использование Stroke для создания тени. Решение: для теней всегда используйте Shadow — Stroke не имитирует объём.

Проверяйте контуры в режиме «Preview» (Cmd+Shift+P) — это отключает все элементы интерфейса Figma и показывает, как будет выглядеть дизайн в реальном приложении.

Экспертное мнение: когда контур решает всё

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

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

Заключение

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

• Используйте выравнивание «Inside» для кнопок и полей ввода — сохраняйте внутреннее пространство.
• Преобразуйте Stroke в путь перед экспортом в SVG — это гарантирует корректное отображение.
• Контур с толщиной 1–2px и прозрачностью 30–50% идеален для разделителей на тёмных фонах.
• Никогда не используйте Stroke вместо Shadow — это разные инструменты для разных задач.
• Проверяйте контуры в режиме Preview и на разных масштабах — визуальное восприятие меняется.