Как увеличить линию в фигме

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

Что такое Stroke и почему он важен

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

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

Понимание Stroke — это основа профессионального дизайна интерфейсов. В таких системах, как Material Design или Apple HIG, толщина линий строго регламентирована: 1px, 2px, 4px — и каждое значение имеет смысл. Например, 1px используется для разделителей в списках, 2px — для акцентных рамок, 4px — для выделения активных элементов. Неправильная толщина линии может сделать интерфейс «грязным» или «слабым».

Как увеличить толщину линии в Figma

Увеличение толщины линии в Figma — простая операция, но только если вы знаете, где искать. Вот пошаговый алгоритм:

1. Выберите объект с линией (прямоугольник, линия, путь или многоугольник).
2. Откройте панель свойств справа — она активируется автоматически при выборе элемента.
3. Найдите раздел Stroke. Если его нет, убедитесь, что у объекта включён Stroke (в некоторых случаях он может быть отключён).
4. В поле Weight (толщина) введите нужное значение в пикселях (например, 2, 3, 4). Можно использовать ползунок или клавиатуру.
5. Нажмите Enter для подтверждения.

Если вы работаете с линией, проведённой инструментом «Line», то после изменения толщины вы можете поворачивать её, не теряя пропорций. Для более сложных форм, например, для контура фигуры, толщина Stroke будет применяться ко всему периметру.

При увеличении толщины до значений выше 4px задумайтесь: действительно ли вам нужна толстая линия? Возможно, лучше использовать заливку (Fill) или тень (Shadow) для визуального выделения. Толстые линии — это ресурс. Их применяют целенаправленно, а не как «запасной вариант».

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

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

• Inside — линия рисуется внутрь объекта. Полезно, когда вы хотите, чтобы линия не выходила за границы контейнера. Например, при создании рамки вокруг карточки, где граница должна быть строго внутри.
• Center — линия делится пополам: половина внутри, половина снаружи. Это стандартное поведение, но оно нарушает сетку, если вы используете пиксельную сетку (например, 8px grid).
• Outside — линия рисуется полностью снаружи. Применяется, когда нужно, чтобы линия «обрамляла» объект, не влияя на его внутреннее пространство. Полезно для акцентных рамок, выделения активного элемента.

Представьте, что у вас есть прямоугольник 48x48px, и вы добавляете Stroke 2px с выравниванием по центру. Общая ширина станет 52px — потому что по 1px добавляется с каждой стороны. Это сбивает с толку, если вы работаете с сеткой 8px. Чтобы сохранить размер 48x48px, установите выравнивание Inside — тогда линия «впишется» внутрь, и размер останется прежним.

Типы линий: сплошные, пунктирные, штрих-пунктир

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

• Сплошная — стандартный вариант. Используется в 90% случаев: разделители, рамки, границы.
• Пунктирная — создаётся через настройки Dash и Gap. Полезна для временных состояний: «недоступно», «в процессе», «для редактирования».
• Штрих-пунктирная — комбинация длинных и коротких штрихов. Редко используется в интерфейсах, но применима в диаграммах и технических схемах.

Чтобы настроить пунктирную линию:

1. Выберите объект с Stroke.
2. В панели свойств найдите опцию Dash и введите значение (например, 4px).
3. В поле Gap введите расстояние между штрихами (например, 2px).
4. Для штрих-пунктирной — используйте массив значений: 6,2,2,2 — длинный штрих, короткий пробел, короткий штрих, короткий пробел.

Пунктирные линии часто используются в мобильных приложениях для обозначения зон перетаскивания или временных состояний. Но будьте осторожны: на низких DPI-экранах они могут выглядеть как «размытые» или «прерывистые». Всегда проверяйте их на реальных устройствах.

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

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

• Использование толщины 1.5px — на большинстве экранов это приводит к размытию. Figma рендерит только целые пиксели. Используйте 1px или 2px.
• Неправильное выравнивание — если вы используете выравнивание Center для рамок, которые должны быть строго внутри, объекты съезжают с сетки.
• Игнорирование масштабирования — при изменении размера прямоугольника линия не масштабируется пропорционально, если не включена опция «Scale stroke with object» (в Figma она включена по умолчанию, но стоит проверить).
• Создание линий как отдельных объектов — вместо Stroke для прямоугольника вы рисуете отдельную линию. Это усложняет поддержку, делает макет тяжелее и нарушает иерархию.
• Перегрузка линиями — использование более 3 типов линий в одном экране создаёт визуальный шум. Лаконичность — ключ к ясности.

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

Масштабирование линий при изменении размеров объекта

Когда вы изменяете размер прямоугольника, линия может вести себя непредсказуемо. Например, если вы увеличили прямоугольник с 48x48px до 96x96px, а Stroke остался 1px — он стал визуально слишком тонким. Это не ошибка — это логика. Figma не масштабирует Stroke автоматически, если вы не настроили его правильно.

Чтобы линия масштабировалась пропорционально:

1. Выберите объект.
2. В панели свойств найдите раздел Stroke.
3. Убедитесь, что опция Scale stroke with object включена (галочка активна).
4. Теперь при изменении размера объекта через драг-н-дроп или вручную, толщина Stroke будет увеличиваться пропорционально.

Это особенно важно для адаптивных компонентов. Например, если вы создали кнопку с толщиной линии 1px и используете её в разных размерах (маленькая, средняя, большая), вы хотите, чтобы линия оставалась визуально сбалансированной. Без масштабирования она будет выглядеть как «тонкая черта» на большой кнопке.

Использование стилей линий для масштабируемых систем

Самый мощный способ работать с линиями в Figma — это создание Style. Это позволяет стандартизировать толщину, цвет, тип и выравнивание линий по всей системе дизайна.

Как создать стиль линии:

1. Создайте линию с нужными параметрами: толщина 1px, выравнивание Inside, цвет #E0E0E0.
2. Выделите её, нажмите + в панели Styles (справа).
3. Назовите стиль: «Border / 1px / Light».
4. Примените его к другим объектам — все изменения в стиле будут применены автоматически.

Такой подход решает сразу несколько проблем:
— Вы не теряете согласованность.
— Разработчики видят точные значения в инспекторе.
— Вы можете легко обновить все линии в проекте, изменив один стиль.

Создайте систему стилей:

• Border / 1px / Light
• Border / 1px / Dark
• Border / 2px / Accent
• Border / 2px / Dashed

Экспертное мнение: как линии влияют на восприятие интерфейса

Дмитрий работает над дизайн-системами для крупных продуктов с миллионами пользователей. По его опыту, 70% всех жалоб на «неудобный интерфейс» связаны с визуальной неоднородностью — и линии в этом виноваты чаще всего.

Он рекомендует следующее:
— Используйте линии как «пассивные» элементы — они не должны конкурировать с текстом или кнопками.
— Связывайте толщину линии с типографикой: если вы используете шрифт 16px, линия 1px — идеальный баланс.
— Тестируйте линии на чёрно-белом мониторе. Если они исчезают — они слишком тонкие.
— Избегайте «всё-сразу»: не используйте линии для разделения каждого элемента. Иногда достаточно отступа.

Часто задаваемые вопросы

Заключение

Увеличение линии в Figma — это не просто изменение числа в поле Weight. Это глубокая работа с визуальной иерархией, масштабируемостью и согласованностью. Правильное использование Stroke позволяет создавать интерфейсы, которые выглядят профессионально, предсказуемо и легко поддерживаются. Отказ от хаотичных значений в пользу системных стилей — это переход от «дизайнера-рисовальщика» к «архитектору интерфейса».

Ключевые принципы, которые стоит запомнить:

• Всегда используйте целочисленные значения толщины: 1px, 2px, 4px.
• Выбирайте выравнивание Stroke в зависимости от контекста: Inside — для рамок, Outside — для акцентов.
• Создавайте стили линий — это экономит время и гарантирует единообразие.
• Проверяйте линии в режиме Preview и на реальных устройствах — что выглядит хорошо в Figma, может исчезать на экране.
• Не перегружайте интерфейс линиями — иногда отступы и цвета эффективнее.