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

В Figma линия — это базовый векторный элемент, который можно создать с помощью инструмента Line (Линия) или через ручное рисование с применением Pen (Перо). Линии используются для создания границ, стрелок, разделителей и других графических элементов интерфейса. Главное правило: выберите подходящий инструмент в зависимости от задачи — стандартная прямая линия создаётся быстро с помощью Line Tool, а сложные кривые или многосегментные линии требуют Pen Tool.

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

Инструмент Line: как нарисовать прямую линию

Самый быстрый способ создать линию в Figma — использовать встроенный инструмент Line, доступный по клавиатурной комбинации L. Этот инструмент идеально подходит для создания прямых горизонтальных, вертикальных или диагональных линий. Чтобы начать, выберите Line Tool на панели слева или нажмите L, затем кликните в рабочей области и потяните курсор в нужном направлении.

После того как линия создана, она становится объектом с параметрами обводки (stroke), которые можно изменять в правой панели свойств. По умолчанию линия имеет толщину 1 пиксель и чёрный цвет, но эти значения легко настраиваются. Длина и угол определяются движением мыши при создании, но могут быть точно заданы вручную в полях X, Y, Width и Height после выделения.

Для повышения точности при рисовании удерживайте клавишу Shift. Это ограничит движение курсора углами 0°, 45° и 90°, что особенно полезно при создании строго горизонтальных или вертикальных линий. Если нужно создать линию фиксированной длины, например 100 px, просто введите значение в поле ширины (Width) после создания.

Пошаговое руководство: создание линии

1. Нажмите L на клавиатуре, чтобы активировать инструмент Line.
2. Кликните в любом месте холста и, не отпуская кнопку мыши, потяните в сторону.
3. Отпустите кнопку мыши, чтобы завершить создание линии.
4. Удерживайте Shift во время рисования для фиксированных углов.
5. В правой панели настройте толщину, цвет и тип обводки.

Pen Tool: рисование сложных линий и кривых

Когда требуется создать не прямую, а кривую линию, стрелку, ломаную или произвольный контур, используется инструмент Pen (P). Он даёт полный контроль над формой линии, позволяя добавлять точки и регулировать кривизну с помощью направляющих.

Активируйте Pen Tool нажатием клавиши P. Кликните один раз — появится первая точка. Кликните ещё раз — между ними появится прямой отрезок. Чтобы создать кривую, после первого клика потяните мышь — появятся маркеры управления (handle), задающие форму кривой Безье.

Для замкнутого контура (например, треугольника или звезды) кликните на первой точке после последней. Чтобы завершить открытый путь, дважды нажмите на пустое место или выберите другой инструмент.

Работа с кривыми Безье

• После установки точки удерживайте мышь, чтобы вытянуть маркеры и задать направление кривой.
• Для симметричного изгиба удерживайте Shift при перетаскивании.
• Чтобы разъединить маркеры, удерживайте Alt (Option на Mac) при перемещении одного из них.
• Для создания прямого отрезка после кривой кликните с зажатым Alt.

Настройка линий: обводка, стиль, цвет

После создания линии её внешний вид можно полностью настроить в правой панели Properties. Основные параметры находятся в разделе Stroke (Обводка).

Толщина линии задаётся значением Stroke Weight — от 0.1 до 1000 px. Цвет выбирается через палитру, можно использовать HEX, RGB или ссылаться на цветовые стили бренда. Также доступны пунктирные и штрихпунктирные стили: Solid (сплошная), Dashed (пунктир), Dotted (точки).

Для линий с несколькими сегментами (например, созданных через Pen) можно настроить окончания (Caps) и соединения (Joints):

• Butt Cap — обрывается точно по краю.
• Round Cap — закруглённые концы.
• Projecting Cap — выступает за пределы точки.
• Miter Join, Round Join, Bevel Join — типы соединений углов.

Советы по точности и выравниванию

Figma предлагает множество встроенных инструментов для точного позиционирования и выравнивания линий. Использование этих функций экономит время и повышает качество макета.

Прежде всего, включите Snap to Pixel Grid (Привязка к пиксельной сетке) в настройках View (V). Это предотвратит размытие линий на экранах с низким DPI. Также полезны Smart Guides — они автоматически появляются при перемещении объектов и показывают расстояние до соседних элементов.

Для выравнивания нескольких линий используйте панель Align в правой части интерфейса. Можно выровнять по левому/правому краю, центру, верху или низу. При зажатой клавише Shift можно выбрать несколько линий и распределить их равномерно через Distribute Horizontally/Vertically.

Горячие клавиши для точности

• Shift — ограничение углов при рисовании.
• Alt + Shift — рисование из центра (для прямоугольников, но не для линий).
• → ← ↑ ↓ — перемещение на 1 пиксель.
• Shift + → ← ↑ ↓ — перемещение на 10 пикселей.
• Ctrl/Cmd + G — группировка линий.

Типичные ошибки и как их избежать

Даже опытные дизайнеры иногда допускают ошибки при работе с линиями. Знание этих ловушек помогает избежать проблем на этапе разработки.

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

Ещё одна частая проблема — нечёткая толщина, например 1.5 или 2.3 пикселя. Такие значения вызывают сглаживание на экранах, делая линию размытой. Решение — округлять толщину до целых чисел.

Неправильные окончания (Caps) могут испортить вид стрелок или иконок. Например, если вы рисуете стрелку, но используете Projecting Cap, она будет выступать за границы. Лучше использовать Round Cap для мягких форм или Butt Cap для точных границ.

Как исправить размытую линию

1. Выделите линию.
2. Проверьте значение Stroke Weight — должно быть целым числом.
3. Убедитесь, что координаты X и Y — целые числа (не 100.3, а 100).
4. Включите View → Snap to Pixel Grid.
5. При необходимости переместите линию на 1 пиксель в сторону.

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

Линии — не просто декоративный элемент. Они играют ключевую роль в юзабилити и визуальной иерархии.

В интерфейсах линии часто используются как разделители между блоками контента. Например, в списке сообщений — тонкая серая линия между элементами. В этом случае рекомендуется использовать линию толщиной 1 px, цвет #E0E0E0 и стиль Solid.

Стрелки и указатели создаются через Pen Tool с использованием Round Cap на конце и Butt Cap на начале. Можно нарисовать прямую линию, а затем вручную добавить треугольник в конце как отдельный объект.

Для диаграмм и графиков линии служат основой. Сложные кривые строятся через Pen с множеством точек. Здесь важна плавность — используйте Smooth Point при редактировании путей (кликните правой кнопкой на точке → Make Smooth).

Мини-чек-лист: когда использовать линию

• Разделитель между секциями — 1 px, серый, сплошной.
• Стрелка навигации — 2 px, чёрный/цветной, Round Cap.
• График — 2–3 px, цвет бренда, плавная кривая.
• Иконка карандаша/линии — Pen Tool, кастомная форма.
• Подчёркивание текста — лучше использовать Text Underline, а не линию.

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

Дмитрий отмечает, что в современных интерфейсах всё чаще используются микролинии — едва заметные штрихи толщиной 0.5–1 px, которые направляют взгляд пользователя. Он рекомендует создавать отдельный стиль обводки для таких элементов и использовать его системно.

Также эксперт подчёркивает важность согласованности: если в одном разделе используются пунктирные линии для второстепенных действий, такой же стиль должен быть везде. Это часть дизайн-системы.

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

Заключение

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

• Используйте Line Tool (L) для прямых линий и Pen Tool (P) для кривых и ломаных.
• Настройте обводку: толщину, цвет, стиль и тип окончаний (Caps).
• Следите за чёткостью: целые значения толщины и координат.
• Применяйте линии системно — как часть дизайн-системы.
• Используйте горячие клавиши и привязки для повышения точности.