Как в фигме сделать прерывистую линию

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

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

Создание прерывистой линии в Figma — это не задача для плагинов или сложных манипуляций. Всё, что вам нужно, — базовые инструменты, встроенные в интерфейс программы. Начните с выбора инструмента Line (Линия) или Rectangle (Прямоугольник). Для точной настройки лучше использовать Line — он создаётся как векторный объект с фиксированной толщиной, что идеально подходит для линий.

После создания объекта перейдите в панель Properties (Свойства) справа. Найдите раздел Stroke (Обводка). Здесь вы увидите поле Dash Pattern — именно оно отвечает за прерывистость. По умолчанию оно отключено. Нажмите на выпадающее меню и выберите один из готовых шаблонов: Dash, Dot, Dash Dot. Это самый быстрый способ получить результат.

Если нужен более точный контроль — выберите Custom (Пользовательский). В появившемся поле введите числовые значения через запятую. Первое число — длина штриха, второе — длина пробела. Например: `5,3` означает 5 пикселей штриха, 3 пикселя пробела. Для более сложных узоров добавьте третье и четвёртое значение: `5,3,2,4` — штрих 5, пробел 3, штрих 2, пробел 4.

Представьте, что вы проектируете мобильное приложение для трекинга активности. Прерывистая линия может визуально отделять блоки статистики, не перегружая интерфейс. Она создаёт лёгкое, почти незаметное разделение — идеально для современного минимализма.

Настройка пользовательского шаблона штрихов

Готовые шаблоны — это удобно, но редко подходят под конкретный дизайн. Пользовательские шаблоны позволяют точно подстроить линию под стиль бренда, масштаб интерфейса или даже анимацию. Например, для приложения с футуристическим стилем может подойти длинный штрих с коротким пробелом — `8,2`. Для детского приложения — короткие точки с равными интервалами: `1,3`.

Чтобы сохранить настройку для повторного использования, создайте компонент. Выделите линию, нажмите Ctrl+Alt+K (Cmd+Option+K на Mac) и дайте ей понятное имя: «Прерывистая линия — тонкая». Теперь вы сможете использовать её как шаблон в любом месте проекта. При изменении исходного компонента все экземпляры обновятся автоматически.

Для более сложных узоров — например, чередующихся штрихов и точек — используйте комбинации из 4–6 значений. Пример: `6,4,2,4,2,4` — длинный штрих, короткий пробел, короткий штрих, длинный пробел, короткий штрих, длинный пробел. Такой узор может имитировать ритм дыхания, шагов или сигналов.

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

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

• Неправильная толщина линии. Если вы используете Stroke 1px и шаблон `5,5`, штрихи могут сливаться. Решение: уменьшите длину штриха до 2–3px.
• Отсутствие синхронизации с сеткой. Прерывистые линии, не привязанные к пиксельной сетке, выглядят «дрожащими». Включите Pixel Snapping (Привязка к пикселю) в правом меню.
• Использование в анимациях без тестирования. Некоторые браузеры и устройства некорректно отображают сложные dash patterns. Всегда проверяйте результат на реальных устройствах.
• Слишком длинные пробелы. Если пробел больше 10px, линия теряет смысл как разделитель — она становится декорацией. Оптимальный диапазон: 1–6px.

Ещё одна частая ошибка — попытка создать прерывистую линию с помощью текста или копирования точек. Это не масштабируется, не адаптируется и нарушает принципы компонентного дизайна. Не делайте так.

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

Прерывистые линии — это не просто «красиво». Они решают конкретные задачи в интерфейсе. Вот три проверенных кейса:

• Разделение секций в дашбордах. Вместо сплошной линии, которая «давит», используйте лёгкую прерывистую — она визуально «отпускает» пространство. Особенно эффективно в финансовых и аналитических приложениях.
• Индикация незавершённых шагов. В процессе регистрации или настройки профиля прерывистая линия может показывать, где пользователь остановился. Например: «Шаг 1 — Шаг 2 — Шаг 3 (в процессе) — Шаг 4» — последний этап визуально «разорван».
• Эффект «разрыва» в анимациях. При загрузке данных или переходе между экранами прерывистая линия может анимироваться — плавно «заполняясь» штрихами. Это создаёт ощущение прогресса без анимации загрузки.

В интерфейсе Spotify прерывистые линии используются для разделения треков в плейлистах — они не перегружают, но чётко обозначают границы. В приложении Notion — для разделения блоков текста и медиа. Это не случайно: такие решения проходят A/B-тесты и доказывают лучшую читаемость.

Альтернативные методы: плагины и компоненты

Хотя встроенные инструменты Figma идеально справляются с задачей, иногда дизайнеры ищут альтернативы — например, для массового применения или сложных паттернов. Вот два надёжных варианта:

• Плагин Dashed Line. Позволяет рисовать прерывистые линии мышью, как обычную линию, с живой настройкой параметров. Подходит для быстрых макетов, но не для компонентного дизайна.
• Компоненты + Auto Layout. Создайте компонент из нескольких точек или коротких линий, расположенных с равными интервалами. Привяжите их к Auto Layout и используйте как шаблон. Этот метод полезен, если вы работаете с SVG-экспортом и хотите точный контроль над каждым элементом.

Однако будьте осторожны: плагины могут перестать работать после обновления Figma, а компоненты из точек увеличивают размер файла и замедляют производительность при большом количестве элементов. Всегда выбирайте встроенный Dash Pattern — он стабильнее, быстрее и масштабируемее.

Экспертное мнение: как используют прерывистые линии профессионалы

Анна Петрова, UX-директор компании «Техно-Дизайн», работает с крупными банками и государственными сервисами. Её команда внедрила прерывистые линии в интерфейс портала госуслуг — результат: снижение когнитивной нагрузки на 18% по данным A/B-тестов.

«Мы использовали прерывистые линии не для красоты, а как визуальный “дыхательный ритм” — чтобы пользователь не уставал от сплошных границ. Особенно важно в интерфейсах с высокой плотностью информации. Мы подбирали длину штрихов под размер шрифта: если заголовок — 16px, штрих — 4px, пробел — 2px. Это создаёт гармонию.»

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

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

Заключение

Прерывистая линия — это не технический трюк, а инструмент дизайна. Её правильное применение повышает читаемость, снижает визуальную нагрузку и создаёт ощущение лёгкости в интерфейсе. В Figma для этого не нужны плагины, сложные компоненты или манипуляции с SVG — достаточно встроенной функции Dash Pattern. Главное — не перегружать её. Часто дизайнеры забывают: если линия не несёт функциональной нагрузки, она не должна быть. Прерывистость — это не «декор», а подсказка.

• Используйте Stroke → Dash Pattern для создания прерывистых линий — это единственный надёжный способ в Figma.
• Настройте штрихи и пробелы вручную: оптимальные значения — от 2 до 6 пикселей.
• Создавайте компоненты для повторного использования — это экономит время и обеспечивает согласованность.
• Проверяйте линии на реальных устройствах: некоторые экраны искажают шаблоны.
• Не используйте прерывистые линии как декор — они должны решать задачу: разделение, индикация, ритм.