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

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

Как сделать линию толще в Figma: пошаговая инструкция

Первое, что нужно понимать: в Figma линия — это не просто «линия», а векторный путь с обводкой (stroke). Чтобы изменить её толщину, вы не растягиваете объект, а настраиваете параметр обводки. Вот как это сделать:

1. Выберите линию на холсте — кликните по ней один раз. Убедитесь, что вы не выбрали соседний объект.
2. Откройте панель свойств справа. Если она не видна — нажмите Cmd + Option + 4 (Mac) или Ctrl + Alt + 4 (Windows).
3. Найдите раздел Stroke. Здесь вы увидите поле с числом — это текущая толщина обводки в пикселях.
4. Увеличьте значение: введите 2, 3, 4, 8 или любое другое число. Для точного контроля используйте стрелки вверх/вниз или введите значение вручную.
5. Проверьте результат. Если линия выглядит смещённой — возможно, вы используете тип обводки «Inside» или «Outside».

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

Типы обводки: Inside, Center, Outside — в чём разница?

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

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

Для примера: если у вас линия длиной 100 пикселей, и вы установите толщину 4 пикселя:

— При типе Center — линия займёт ровно 100 пикселей в длину, а толщина будет распределена по 2 пикселя с каждой стороны.
— При типе Inside — линия останется внутри 100-пиксельного пространства, и вы потеряете 2 пикселя с каждой стороны (всего 4 пикселя «съедены»).
— При типе Outside — линия будет занимать 104 пикселя в длину, выйдя за пределы исходного контура.

Представьте, что вы создаёте карточку товара с тонкой линией под заголовком. Если вы используете тип Inside и толщину 1 пиксель, линия окажется внутри заголовка — и вы рискуете наложить её на текст. Лучший выбор — Center, чтобы линия оставалась визуально центрированной между заголовком и содержимым.

Частые ошибки при увеличении толщины линии и как их избежать

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

• Ошибка 1: Вы не видите изменений, потому что линия скрыта под другим объектом. Проверьте порядок слоёв: линия должна быть выше тех элементов, которые вы хотите «разделить».
• Ошибка 2: Вы увеличили толщину, но забыли изменить тип обводки — и линия «съехала» за границы. Всегда проверяйте, как линия ведёт себя в контексте соседних элементов.
• Ошибка 3: Вы используете линию как границу прямоугольника, но не применяете «Auto Layout». В результате при изменении размера контейнера линия не масштабируется. Решение: используйте Auto Layout для контейнеров и включите «Stretch» для линии.
• Ошибка 4: Вы рисуете линию вручную, не включив «Snap to Grid» — и она получается кривой. Включите Cmd + Shift + ' для включения сетки и привязки.
• Ошибка 5: Вы пытаетесь увеличить толщину линии, которая является частью компонента. Изменения не применяются ко всем экземплярам. Решение: редактируйте только основной компонент, а не экземпляр.

Также не забывайте: Figma не поддерживает «жирные линии» в стиле CSS — толщина ограничена технически (максимум 1000 пикселей), но визуально более 50–80 пикселей теряют смысл как линии и становятся просто прямоугольниками.

Линия vs прямоугольник: когда что использовать?

Многие задаются вопросом: а почему бы не использовать прямоугольник с высотой 1 пиксель вместо линии? Это логичный вопрос — и ответ зависит от контекста.

• Используйте линию, если вам нужна гибкость: поворот, кривая, изменение формы, привязка к точкам. Линия — это векторный путь, и она идеально подходит для разделителей в сложных макетах, иконок, диаграмм.
• Используйте прямоугольник, если вы работаете с фиксированными границами: например, нижняя граница карточки, горизонтальный разделитель в списке, где длина всегда одинакова. Прямоугольник проще в экспортном режиме и чаще корректно отображается в HTML/CSS.

Представьте, что вы создаёте интерфейс для приложения с динамическим контентом. В одном экране 3 элемента, в другом — 7. Линии между ними должны быть равномерными. Линия с Auto Layout идеально подойдёт — она автоматически растягивается и сохраняет толщину. Прямоугольник же придётся вручную масштабировать или копировать — это не масштабируемо.

Если вы планируете передавать макет разработчику, линия с толщиной 1–2 пикселя и типом «Center» — стандартный выбор. Разработчики легко преобразуют её в CSS: border-top: 1px solid #ccc;.

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

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

Чтобы создать стиль обводки:

1. Выберите линию с нужной толщиной, типом и цветом.
2. В панели свойств нажмите на значок + рядом с полем Stroke.
3. Присвойте имя, например: «Divider 1px Center».
4. Теперь вы можете применить этот стиль к любой другой линии — просто кликните по нему в списке стилей.

Теперь, если вам нужно изменить толщину всех разделителей с 1 на 2 пикселей — вы меняете стиль в одном месте, и все экземпляры обновляются автоматически.

Для ещё большей автоматизации создайте компонент: например, «Horizontal Divider». Внутри — линия с фиксированной толщиной и стилем. Затем используйте его как повторяющийся элемент. Это особенно полезно в системах дизайна, где вы управляете толщиной через переменные (Figma Variables), если используете Figma 2025+ с поддержкой Design Systems на уровне переменных.

Продвинутые советы: автоматизация, масштабирование, экспорт

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

• Создавайте разные версии — например, «Divider Mobile (1px)», «Divider Tablet (1.5px)», «Divider Desktop (2px)» — и используйте их в соответствующих макетах.
• Используйте плагины: например, “Auto Layout Plus” или “Line Spacing” — они помогают выравнивать линии по сетке и автоматически подстраивать толщину под размер контейнера.
• При экспорте в PNG/SVG — убедитесь, что вы не включили «Scale stroke with object». В SVG-экспорте это может привести к тому, что толщина линии будет масштабироваться вместе с объектом — и на маленьких экранах она станет слишком толстой.
• Для анимаций: если вы делаете анимацию роста линии (например, прогресс-бар), используйте маску и изменяйте ширину маски, а не толщину обводки — это даст более плавный эффект.

Экспертное мнение: как работают дизайнеры крупных продуктов

Он подчёркивает: толщина линии — это не вопрос эстетики, а вопрос доступности. Слишком тонкие линии могут быть не видны на экранах с низкой контрастностью или у пользователей со слабым зрением. Figma позволяет легко проверить это через плагин “Contrast Checker” — рекомендуем включить его в рабочий процесс.

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

Заключение

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

• Используйте тип обводки «Center» для большинства случаев — он предсказуем и безопасен.
• Создавайте стили обводки для быстрого применения и масштабирования.
• Избегайте нечётных значений (0.5px, 1.5px) — они плохо рендерятся на экранах.
• Для сложных сценариев переходите от линий к прямоугольникам — это даёт больше контроля.
• Всегда тестируйте линии на реальных устройствах и с помощью плагинов доступности.