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

В Figma изменение толщины линии — базовая, но важная операция, от которой зависит читаемость контуров, точность визуализации и соответствие макетов дизайн-системе. Толщину линий регулируют через параметр Stroke (обводка), доступный для фигур, векторных объектов, фреймов и артбордов. Главное правило: выберите нужный элемент на холсте, затем в правой панели инспектора свойств найдите блок «Stroke» и установите требуемое значение в поле ширины.

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

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

Чтобы изменить толщину линии в Figma, необходимо работать с параметром Stroke. Он доступен для большинства векторных объектов, прямоугольников, эллипсов, линий и фреймов. После выбора объекта откройте правую панель свойств и найдите секцию «Stroke». Здесь вы увидите несколько ключевых элементов: цвет обводки, её ширина, стиль (сплошная, пунктирная, штрихпунктирная) и тип выравнивания.

Ширину обводки можно задать вручную, введя значение в пикселях, или использовать стрелки в поле ввода для увеличения/уменьшения. Поддерживается дробная ширина, например 0.5 или 1.75 px, что особенно важно при работе с ретина-экранами или высокоточными макетами. Figma автоматически округляет значения только при экспорте, если это требуется форматом.

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

Как выбрать объект и где найти параметры обводки

Для изменения толщины линии начните с выбора объекта с помощью инструмента «Selection» (V). Щёлкните по нужному элементу на холсте. Если объект составной, убедитесь, что выделен именно тот слой, которому нужно изменить обводку. Для группированных объектов может потребоваться разгруппировка (Ctrl+Shift+G).

После выбора объекта перейдите в правую панель. Раздел «Stroke» находится сразу под заливкой (Fill) и имеет чёткую иконку — квадрат с контуром. Если вы не видите этот блок, прокрутите вниз или проверьте, не свёрнута ли панель. При работе с текстом обводка также доступна, но применяется она к символам как к векторным контурам.

• Выберите объект на холсте
• Откройте правую панель свойств
• Найдите блок «Stroke»
• Увеличьте значение в поле «Stroke weight»
• При необходимости измените цвет, стиль и положение

Типы выравнивания обводки: центр, внутри, снаружи

Figma предлагает три варианта выравнивания обводки: Outside (снаружи), Center (по центру) и Inside (внутри). Этот параметр критически важен, так как он определяет, как будет вести себя толщина линии относительно границ объекта. Например, при значении 2 px и выравнивании по центру по 1 px обводки будет находиться снаружи и внутри контура.

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

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

Выбор типа выравнивания зависит от задачи:

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

Работа с векторными линиями и контурами

Если вы создаёте произвольные линии с помощью Pen Tool (P) или Line Tool (), принцип управления толщиной остаётся тем же — через параметр Stroke. Однако здесь есть особенности: векторные линии по умолчанию имеют направляющие точки, и толщина применяется равномерно ко всему контуру.

Для более сложных эффектов можно использовать переменную толщину. Figma поддерживает pressure-sensitive stroke, но только при импорте из сторонних инструментов (например, iPad с Apple Pencil). В самом Figma нет встроенного инструмента для рисования линий с изменяющейся толщиной, как в Illustrator или Procreate.

Создание толстых линий с закруглёнными концами

Для линий часто используются закруглённые окончания — Cap. Figma предлагает три типа: Butt (прямоугольный обрез), Round (круглый конец) и Square (удлинённый конец). При большой толщине линии использование Round Cap делает её визуально мягче и профессиональнее.

• Выберите линию
• В разделе Stroke найдите «Line endings»
• Выберите Round для скруглённых концов
• Настройте углы соединения (Corner) при необходимости

Совместимость и экспертные советы

Толщина обводки влияет на совместимость макетов с разными устройствами и системами. Например, в iOS рекомендуют использовать чётные значения (1, 2, 3 px), чтобы избежать субпиксельного рендеринга. В Material Design Google также даёт конкретные рекомендации по толщине границ.

Использование стилей и компонентов

Чтобы обеспечить единообразие, создавайте повторяющиеся стили обводки. Выделите объект с нужной толщиной и стилем, кликните по полю Stroke в правой панели и выберите «Create style». Дайте имя, например «Border / Thick / Primary», и примените к другим элементам.

• Создайте стиль обводки
• Примените его через панель Styles
• Обновляйте стили глобально при изменениях
• Синхронизируйте с библиотекой команды

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

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

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

• Обводка не отображается — проверьте, включена ли она и не перекрыта ли другими слоями.
• Линия выглядит тоньше, чем задано — возможно, стоит режим сглаживания или масштаб отличается от 100%.
• Размеры объекта изменились после увеличения обводки — проверьте тип выравнивания: Outside увеличивает габариты.
• Обводка исчезает при группировке — убедитесь, что группа не имеет собственных параметров Stroke.

Экспорт и точность размеров

При экспорте важно понимать, как обводка влияет на итоговый файл. Если выравнивание установлено на Outside, обводка будет добавлена к общим размерам объекта. Например, прямоугольник 100×100 px с обводкой 4 px снаружи займёт 104×104 px в PNG или SVG.

Для разработчиков в Figma есть встроенный Inspect, где они видят точную толщину обводки. Однако при использовании CSS или Android XML нужно учитывать, что там обводка (border) обычно ведёт себя как Inside или не влияет на размер — в отличие от Figma. Это может вызвать расхождения.

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

«Многие начинающие дизайнеры не осознают, насколько важна последовательность в настройках обводки. Уже на этапе прототипирования стоит определить стандарты: какие толщины использовать для разделителей, кнопок, иконок. В моей команде мы завели чек-лист: 1 px — для границ, 2 px — для акцентных элементов, 4 px — для крупных разделителей. Это экономит часы на согласовании и исправлениях.»

— Марина Козлова, арт-директор, 12 лет в digital-дизайне

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

Заключение

Изменение толщины линии в Figma — простая, но многогранная задача. Успешное выполнение зависит от понимания параметров обводки, правильного выбора выравнивания и учёта контекста использования. Будь то создание интерфейса, иконки или презентационного макета, контроль над Stroke позволяет добиться точности, профессионализма и соответствия стандартам.

• Толщину линии меняют через параметр Stroke в правой панели
• Выбирайте тип выравнивания: Outside, Center или Inside — в зависимости от задачи
• Используйте стили обводки для единообразия в проекте
• Проверяйте поведение обводки при экспорте и в Inspect
• Избегайте дробных значений при работе с низкоплотными экранами