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

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

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

Добавить линию в Figma проще, чем кажется. Первый шаг — выбор инструмента. В левой панели инструментов найдите значок «Line» (иконка с диагональной чертой) или нажмите клавишу L на клавиатуре. После активации курсор превратится в крестик. Нажмите и удерживайте левую кнопку мыши на холсте, затем проведите в нужном направлении — горизонтально, вертикально или под углом. Figma автоматически создаст векторную линию с двумя точками-анкерами.

После создания линия появится в панели Layers слева. Выделите её, чтобы увидеть параметры в правой панели Properties. Здесь вы можете изменить толщину (Stroke Weight), цвет (Stroke Color), стиль (Dash Pattern), выравнивание (Stroke Alignment) и даже прозрачность. Для точного размещения включите сетку (View → Show Grid) и функцию «Snap to Grid» — линия будет «прилипать» к точкам сетки. Если нужно создать идеально горизонтальную или вертикальную линию, удерживайте клавишу Shift во время рисования.

Альтернативные способы добавления линии

Если вы не хотите рисовать линию вручную, есть другие методы. Например, можно создать прямоугольник с шириной 1 пиксель и задать ему нужную длину и цвет. Этот подход полезен, когда линия должна быть частью группы или когда требуется точное позиционирование по координатам. Также линию можно добавить через «Auto Layout»: создайте контейнер, включите его, и добавьте пустой элемент с высотой 1 пиксель — Figma автоматически сделает его линией.

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

Типы линий и их применение в интерфейсах

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

• Разделительные линии — тонкие (1–2 пикселя) горизонтальные или вертикальные линии, используемые для визуального разделения элементов в списках, меню или карточках. Пример: разделение пунктов в навигации или блоков в форме.
• Контурные линии — более толстые (2–4 пикселя) линии, обрамляющие элементы, такие как кнопки, поля ввода или карточки. Они создают границы и усиливают тактильность интерфейса.
• Декоративные линии — изогнутые, пунктирные или анимированные линии, применяемые для акцента, направления взгляда или создания динамики. Часто используются в лендингах и рекламных баннерах.

Представьте, что вы проектируете приложение для онлайн-банкинга. Разделительные линии между транзакциями помогают пользователю быстро сканировать список, не перегружая глаза. Если линии слишком толстые или яркие — они отвлекают. Слишком тонкие — теряются на фоне. Это вопрос баланса, который определяет уровень профессионализма дизайна.

Продвинутые настройки линий: стили, выравнивание, анимации

Параметры линии в Figma гораздо глубже, чем кажется на первый взгляд. В панели Properties, под параметром Stroke, вы найдёте несколько важных опций.

• Stroke Weight — толщина линии. Рекомендуется использовать чётные значения (1, 2, 4 пикселя) для лучшей рендеринга на экранах с пиксельной сеткой.
• Stroke Alignment — выравнивание линии относительно её пути. Варианты: «Center» (по центру), «Inside» (внутри контура), «Outside» (снаружи). Для разделителей лучше использовать «Center», чтобы линия не смещала соседние элементы.
• Dash Pattern — позволяет создавать пунктирные, штриховые или сложные узоры. Можно задать длину штриха и пробела в пикселях. Например, «5,3» — это 5 пикселей штриха, 3 пикселя пробела.
• Cap/Join — форма концов линии (Round, Square, Butt) и углов (Miter, Round, Bevel). Для разделителей подойдёт «Butt», чтобы избежать выступов.

Для анимаций используйте Figma’s Prototyping. Выделите линию, перейдите на вкладку Prototype, создайте переход и примените эффект «Move» или «Fade». Например, линия может «раскрываться» при наведении, подсказывая пользователю доступность дополнительного контента. Такие детали повышают восприятие интерфейса как «живого».

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

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

• Неправильное выравнивание: если линия выровнена по краю (Outside), а рядом находится элемент с отступом — возникает визуальное смещение. Решение: всегда используйте Center для разделителей.
• Использование прямоугольников вместо линий: прямоугольники с высотой 1 пиксель не масштабируются одинаково при изменении размера контейнера. Линии — векторные и всегда остаются точными.
• Отсутствие стилей: если каждая линия имеет свой цвет и толщину, система становится неподдерживаемой. Решение: создавайте стили линий через Styles → Stroke Style.
• Перегрузка: слишком много линий в интерфейсе создают ощущение «хлама». Лучше меньше, но точнее. Применяйте линии только там, где они решают задачу — разделение, направление, акцент.

Часто дизайнеры забывают, что линии влияют на доступность. Если линия используется как разделитель между текстом и кнопкой, а её цвет слишком близок к фону — пользователи с нарушениями зрения могут не заметить границу. Проверяйте контрастность с помощью плагина «Contrast Checker» или встроенной функции Figma — она отображает уровень AA/AAA по WCAG.

Линии как компоненты и стили: масштабируемость и контроль

Самый мощный способ работы с линиями — превращение их в компоненты и стили. Создайте одну линию с нужными параметрами (толщина 1 пиксель, цвет #E0E0E0, выравнивание Center), выделите её и нажмите Ctrl/Cmd + K — Figma создаст компонент. Теперь вы можете дублировать его, и все экземпляры будут обновляться одновременно.

Для ещё большей эффективности создайте стили линий. Перейдите в панель Styles → Stroke Style → New Style. Присвойте имя, например, «Divider — Light». Теперь любой элемент, к которому вы примените этот стиль, автоматически получит одинаковые параметры. Это особенно ценно в командах: дизайнеры не тратят время на подбор цветов и толщин — всё стандартизировано.

Не забывайте использовать «Auto Layout» вместе с компонентами. Если вы создадите компонент «Divider» внутри контейнера с Auto Layout, он автоматически подстроится под ширину родительского блока — идеально для адаптивных интерфейсов.

Экспертное мнение: как дизайнеры используют линии для улучшения UX

Сегодняшние стандарты требуют не просто «нарисовать линию», а создать систему: компоненты, стили, правила применения. Линии должны быть предсказуемыми, легко настраиваемыми и масштабируемыми. Используйте стили для цвета, компоненты для повторения, а Auto Layout — для адаптивности. Не забывайте про доступность и проверку контрастности.

• Всегда используйте инструмент Line (L), а не прямоугольники, для создания линий.
• Применяйте Stroke Alignment → Center для разделителей, чтобы избежать смещений.
• Создавайте стили линий и компоненты — это экономит время и обеспечивает согласованность.
• Проверяйте контрастность линий с фоном для доступности.
• Используйте анимации и прототипирование для интерактивных линий — это повышает вовлечённость.