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

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

Зачем нужна прерывистая линия в дизайне

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

Исследования Nielsen Norman Group показывают, что визуальные маркеры, такие как прерывистые линии, снижают когнитивную нагрузку на пользователя: мозг быстрее распознаёт структуру, если элементы разделены не сплошными, а «разорванными» линиями. Особенно это актуально в плотных интерфейсах — например, в панелях управления или админках.

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

Метод 1: Использование Stroke Dasharray (новая функция Figma)

С 2023 года Figma внедрила поддержку свойства stroke-dasharray — аналог CSS-свойства, которое позволяет задавать шаблон прерывистой линии напрямую. Это самый близкий к «идеалу» способ, если вы используете актуальную версию Figma.

Чтобы применить его:

1. Нарисуйте линию с помощью инструмента Line (L) или создайте прямоугольник с высотой 1px.
2. Выберите объект и перейдите в панель Properties (справа).
3. Найдите раздел Stroke и раскройте опцию Dash.
4. В полях Dash и Gap введите числовые значения в пикселях. Например: Dash: 8, Gap: 4 — значит, 8 пикселей линии, затем 4 пикселя пробела.
5. При необходимости включите Cap → Square, чтобы избежать округлённых концов.

Этот метод идеален для быстрой настройки и динамического изменения. Если вы используете систему дизайна, где прерывистые линии применяются часто — создайте стилевые шаблоны: сохраните параметры как Style в панели Styles, чтобы применять их ко всем линиям в проекте.

Однако есть нюанс: если линия слишком короткая (менее 20 пикселей), Figma может некорректно отображать шаблон — штрихи схлопываются. В таких случаях лучше перейти к ручному методу.

Метод 2: Ручное создание прерывистой линии через повторяющиеся сегменты

Этот метод остаётся наиболее надёжным, особенно если вы работаете со старой версией Figma или вам нужен абсолютный контроль над каждым элементом.

Алгоритм:

1. Создайте короткую линию (например, 8px длиной, толщиной 1px) с помощью инструмента Line.
2. Сделайте её копию (Ctrl/Cmd + D) и сдвиньте на нужное расстояние — например, на 4px вправо. Это будет пробел.
3. Выделите оба элемента — линию и пробел — и выберите Arrange → Distribute Horizontal, чтобы выровнять их по центру.
4. Сгруппируйте их (Ctrl/Cmd + G) и скопируйте группу столько раз, сколько нужно, чтобы заполнить всю длину области.
5. При необходимости объедините все элементы в одну группу или используйте Auto Layout для автоматического масштабирования.

Такой подход позволяет точно задавать соотношение штрихов и пробелов, а также легко менять толщину, цвет или стиль (например, добавить скругление через Corner Radius).

Этот метод особенно полезен, когда вы проектируете анимированные элементы — например, линию, которая «заполняется» постепенно. С ручными сегментами проще создавать ключевые кадры для анимации в Figma или экспортировать в Lottie.

Метод 3: Создание компонента с переменными для масштабирования

Если вы работаете в команде или ведёте дизайн-систему, ручной метод становится неэффективным. Здесь на помощь приходит компонент с переменными.

Создайте компонент прерывистой линии:

1. Создайте линию длиной 100px с параметрами штрих-пробел, например: 8px / 4px.
2. Превратите её в компонент: выберите объект → Create Component.
3. В панели Component Properties добавьте переменную типа Number — назовите её dashLength и gapLength.
4. Привяжите параметры Stroke Dash и Gap к этим переменным: кликните на значение в свойствах Stroke → выберите «Add variable» и укажите созданную переменную.
5. Теперь, когда вы используете компонент в других местах, вы можете менять длину штриха и пробела через инспектор — без пересоздания линий.

Это особенно мощно, если вы используете Figma с плагинами вроде Component States или Variants. Можно создать варианты: «слабая линия» (8/8), «средняя» (12/6), «сильная» (20/2) — и переключаться между ними одним кликом.

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

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

• Несоответствие шаблона на разных разрешениях — если вы используете фиксированные значения (например, 8/4), а потом масштабируете элемент на 200%, штрихи становятся слишком длинными. Решение: используйте Auto Layout или компоненты с переменными.
• Неровные края — если линия не выровнена по пикселям, она «дребезжит» на экране. Включите Pixel Snapping (в панели Properties) и убедитесь, что координаты X и Y — целые числа.
• Использование тени вместо прерывистой линии — тень не является разделителем, она лишь добавляет глубину. Не путайте визуальные эффекты с функциональными разделителями.
• Забыть про контраст — прерывистая линия должна быть видна. Если вы используете серый цвет (#E0E0E0) на белом фоне — она исчезает. Минимальный контраст — 3:1 по WCAG, лучше 4.5:1.

Также будьте осторожны с экспортом: если вы экспортируете в PNG, а потом масштабируете изображение в браузере — штрихи могут «размазаться». Лучше экспортировать как SVG или использовать Figma в качестве источника для разработчиков через Export → SVG.

Экспертное мнение: Как работают профессионалы

Дмитрий также рекомендует использовать Figma с плагином Style Builder — он позволяет экспортировать стили в CSS-код, что упрощает передачу дизайна разработчикам. Если вы работаете в команде, где есть front-end-разработчики — это ключевой шаг к согласованности.

Не забывайте: прерывистая линия — это не «как в макете», а «как работает». Проверяйте её на реальных экранах: на 13-дюймовом MacBook и на 6-дюймовом телефоне. Если штрихи сливаются — уменьшайте длину. Если слишком частые — увеличивайте gap.

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

Заключение

Прерывистая линия в Figma — это не просто технический трюк, а важный элемент дизайнерской системы. Она влияет на восприятие структуры, иерархии и даже эмоционального отклика пользователя. Неважно, используете ли вы встроенный DashArray, ручное создание сегментов или компоненты с переменными — ключ в том, чтобы сделать этот элемент гибким, предсказуемым и масштабируемым.

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

• Используйте Stroke DashArray для быстрой настройки — если ваша версия Figma поддерживает её.
• Для сложных сценариев и дизайн-систем — создавайте компоненты с переменными.
• Всегда проверяйте контраст и пиксельное выравнивание — иначе линия исчезнет на экране.
• Не используйте прерывистые линии как декор — они должны нести семантическую нагрузку.
• Сохраняйте параметры как стили — это экономит время и обеспечивает согласованность.