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

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

Основные настройки границ

Добавление границ в Figma начинается с выбора любого векторного объекта: прямоугольника, круга, кривой или текстового блока. После выделения элемента перейдите в правую боковую панель — Properties Panel — и найдите секцию Strokes. По умолчанию она скрыта, если границы не заданы, но появляется сразу после активации.
В этом разделе доступны базовые параметры: цвет обводки, её толщина (в пикселях), стиль линии (сплошная, пунктирная, штрихпунктир) и способ наложения относительно контура объекта. Цвет выбирается через палитру, HEX-код, RGB или ссылку на цвет из библиотеки стилей. Это особенно важно при работе с дизайн-системами, где требуется единообразие.
Толщина границы задаётся числом — от 0.1 до 1000 px. Увеличение значения делает обводку более заметной, но может повлиять на геометрию макета, особенно если используется внешнее или центрированное положение. Важно помнить, что границы учитываются при автоматических расчётах размеров фреймов, если включены соответствующие опции Auto Layout.

Как добавить границу пошагово

1. Выберите объект с помощью инструмента Selection (V).
2. Перейдите в правую панель и найдите кнопку «+» рядом с надписью «No strokes».
3. Выберите цвет из палитры или введите HEX-значение.
4. Установите толщину в поле «Stroke weight».
5. Настройте тип линии: Solid, Dashed или Dotted.
6. Выберите положение обводки: Outside, Inside или Center.

Типы линий и формы соединения

Figma поддерживает три основных типа обводки: сплошную, пунктирную и точечную. Сплошная линия (Solid) используется чаще всего — для кнопок, карточек, иконок. Пунктирная (Dashed) часто применяется в интерфейсах для обозначения зон перетаскивания, временных рамок или недоступных элементов. Точечная (Dotted) редка, но эффективна для декоративных акцентов или маркеров.
Кроме типа линии, можно настроить форму соединения углов — Corner Stroke Cap. Доступны три варианта: Miter (острые углы), Round (скруглённые) и Bevel (срезанные). Выбор зависит от стилистики проекта. Например, в минималистичном UI чаще используют Round, чтобы сохранить мягкость форм.
Длина штрихов и промежутков в пунктирной линии настраивается через поля Dash и Gap. Значения указываются в пикселях. Это позволяет создавать уникальные паттерны: короткие штрихи с длинными паузами или частые точки. Однако будьте осторожны — слишком мелкий пунктир может теряться на экранах с низким разрешением.

Примеры использования разных типов линий

• Сплошная линия: активные кнопки, поля ввода, рамки модальных окон.
• Пунктирная: зоны загрузки файлов, контуры перетаскиваемых элементов.
• Точечная: декоративные разделители, временные метки на диаграммах.

Положение обводки (Stroke Alignment)

Один из самых непонятных, но важнейших параметров — Stroke Alignment. Он определяет, где будет располагаться граница относительно контура объекта: снаружи, внутри или по центру. От этого зависит, как изменится занимаемое пространство.
При значении Outside обводка выходит за пределы исходного объекта. Это увеличивает общую ширину и высоту элемента. Такой подход удобен, когда нужно выделить элемент, не сжимая его содержимое. Например, при ховере на карточке.
Если выбрать Inside, граница будет нарисована строго внутри контура. Это уменьшает доступное пространство для содержимого, поэтому может повлиять на текст или иконки. Используется редко — в основном для рамок, которые не должны выходить за границы сетки.
Center — значение по умолчанию. Обводка делится пополам: половина внутри, половина снаружи. Этот вариант универсален, но требует учёта при точной верстке. Например, если у вас кнопка шириной 200 px и граница 4 px, то фактически она займет 204 px (2 px снаружи + 200 px + 2 px снаружи).

Работа с несколькими границами

Figma не поддерживает несколько границ «из коробки», как в Photoshop или CSS. Но есть рабочие обходные пути. Самый простой — дублирование слоя. Создайте копию объекта, уберите заливку у верхнего слоя, сделайте тонкую обводку, а у нижнего — более толстую. Так можно имитировать двойную рамку.
Другой способ — использовать Plugins. Популярные плагины вроде *Multi Stroke* или *Stroke Master* позволяют добавлять до 10 обводок с разными цветами, толщиной и положением. Они интегрируются в интерфейс Figma и работают быстро. Некоторые даже поддерживают экспорт в код.
Если вы работаете с дизайн-системой, рекомендуется создать стили обводки. Перейдите в раздел Local Styles (в правом верхнем углу панели), нажмите «+» рядом с Strokes и сохраните комбинацию цвета и толщины. После этого её можно применять к любым объектам через одну клик.

Пошагово: как добавить двойную границу

1. Создайте фигуру (например, прямоугольник).
2. Дублируйте её (Ctrl+D / Cmd+D).
3. У верхнего слоя установите тонкую обводку (например, 1 px) и удалите заливку.
4. У нижнего — более толстую (например, 4 px), другой цвет.
5. Выровняйте слои по центру с помощью Align Tools.
6. Сгруппируйте (Ctrl+G / Cmd+G), чтобы упростить управление.

Границы в компонентах и вариантах

Компоненты — основа масштабируемого дизайна в Figma. Границы в них ведут себя особо. Если вы зададите обводку в главном компоненте, она унаследуется всеми экземплярами. Однако в экземпляре можно переопределить цвет, толщину или отключить границу — это называется property override.
При создании кнопки с состояниями (default, hover, disabled) удобно использовать варианты (Variants). В состоянии hover можно добавить границу или изменить её цвет. Это делается через свойства компонента: в режиме Variant settings выберите нужный state и настройте Strokes.
Важно: если вы используете Auto Layout внутри компонента, границы будут влиять на размеры только при условии, что они расположены снаружи. Иначе система может игнорировать их при расчёте padding.

Ошибки и как их избежать

Новички часто сталкиваются с проблемами при работе с границами. Одна из самых частых — неожиданное изменение размеров макета. Происходит это из-за того, что граница снаружи увеличивает габариты объекта, но дизайнер этого не замечает. Результат — смещение соседних элементов.
Другая ошибка — использование слишком толстых обводок на маленьких элементах. Граница в 8 px на иконке 24×24 px сделает её почти невидимой. Рекомендуемая толщина: 1–2 px для иконок, 2–4 px для кнопок, до 6 px — для акцентных блоков.
Также распространена путаница с порядком слоёв. Если вы дублируете объект для мультиграниц, но не выровняете слои, обводка может съехать. Всегда используйте инструменты выравнивания (Align Center, Align Middle).

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

• Обводка не отображается: проверьте, не установлена ли толщина в 0. Также убедитесь, что цвет не прозрачный.
• Размеры прыгают при включении границы: измените положение на Inside или пересчитайте отступы.
• Граница обрезается в Auto Layout: увеличьте padding или измените направление фрейма.
• Невозможно применить несколько границ: используйте плагины или дублирование слоёв.

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

При экспорте макета границы экспортируются как часть изображения. Но если вы передаёте макет разработчику, важно понимать, как границы будут реализованы в коде. В CSS обводка задаётся через border, но поведение отличается: CSS-граница всегда ведёт себя как «outside» в Figma, если не используется box-sizing: border-box.
Чтобы избежать недопонимания, используйте плагины вроде *Tokens Studio* или *Zeplin*, которые автоматически преобразуют ваши настройки Strokes в CSS-свойства. Также можно добавлять комментарии к элементам с указанием толщины, цвета и типа линии.
Для SVG-экспорта важно, чтобы границы были правильно векторизованы. Figma делает это автоматически, но при сложных формах могут возникнуть артефакты. Проверяйте экспорт в редакторах вроде Illustrator или просмотрщиках SVG.

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

Границы — это не просто украшение, а инструмент коммуникации. Они помогают пользователям ориентироваться в интерфейсе, показывают иерархию и уровень взаимодействия. Хороший дизайнер использует их осознанно, а не по умолчанию.
Современные тренды движутся в сторону минимализма. Многие продукты отказываются от границ в пользу теней, отступов и цветовых контрастов. Однако в enterprise-интерфейсах, административных панелях и инструментах аналитики обводки остаются актуальными.
Главное правило: каждая граница должна иметь смысл. Если вы не можете объяснить, зачем она нужна — удалите её. Чистый интерфейс без лишних линий воспринимается легче и выглядит современнее.

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

Заключение

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

• Используйте Stroke Alignment осознанно — он влияет на размеры и поведение элементов.
• Для нескольких границ применяйте дублирование слоёв или специализированные плагины.
• Сохраняйте стили обводки как Local Styles для единообразия в проекте.
• Избегайте лишних границ — каждая должна иметь смысл.
• Учитывайте особенности экспорта и согласовывайте параметры с разработчиками.