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

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

Создание пунктирной линии через обводку

Наиболее распространённый и правильный способ создания пунктирной линии в Figma — использование эффекта обводки (Stroke) с типом штриховки. Этот метод подходит для любых векторных объектов: прямых линий, кривых, фигур и контуров. Он не требует дополнительных инструментов и полностью контролируется через панель свойств справа.

Для начала создайте линию с помощью инструмента Line (L). Удерживайте Shift, чтобы провести строго горизонтальную или вертикальную линию. После этого перейдите в панель Properties (справа) и найдите раздел Stroke. Здесь вы увидите параметры толщины, цвета и типа линии. По умолчанию стоит Solid (сплошная), но нужно выбрать Dashed.

После выбора Dashed появятся два новых поля: Dash и Gap. В первом указывается длина штриха, во втором — длина промежутка между штрихами. Например, установив значения 8 и 4, вы получите чередующиеся отрезки длиной 8px и пробелы по 4px.

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

Пошаговый алгоритм

1. Выберите инструмент Line (L) в панели слева.
2. Щёлкните и потяните, чтобы нарисовать линию. Удерживайте Shift для ровного направления.
3. В правой панели найдите раздел Stroke.
4. Нажмите на значок рядом с цветом обводки и выберите тип Dashed.
5. Настройте параметры Dash и Gap под нужный стиль.
6. При необходимости измените толщину обводки и цвет.

Альтернативный способ: линия из прямоугольников

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

Для этого используйте инструмент Rectangle (R). Нарисуйте небольшой прямоугольник — это будет один штрих. Затем скопируйте его и вставьте нужное количество раз, оставляя равные промежутки. Чтобы быстро выровнять элементы, выделите все прямоугольники и воспользуйтесь функцией Distribute Horizontally или Vertically в панели справа.

Такой подход позволяет:

• Использовать нестандартные формы штрихов (круги, ромбы, иконки).
• Применять разные цвета к каждому элементу.
• Создавать анимационные заглушки (например, бегущий пунктир).
• Группировать элементы в компоненты для повторного использования.

Этот метод занимает больше времени, но даёт полный контроль над визуалом. Особенно он актуален при создании презентационных материалов, где важна детализация.

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

1. Выберите инструмент Ellipse (O).
2. Нарисуйте круг диаметром 6px.
3. Скопируйте его (Ctrl+C, Ctrl+V).
4. Разместите копии по прямой с шагом 10px.
5. Выделите все круги и нажмите Align → Distribute Horizontally.
6. Сгруппируйте (Ctrl+G) и при необходимости преобразуйте в компонент.

Использование плагинов для автоматизации

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

Один из самых популярных — Dotted Line Generator. Он позволяет задать точное количество точек, их размер и расстояние между ними. Также есть плагин Strokes & Dots, который работает с любыми путями и добавляет эффект пунктира с возможностью закругления углов.

Установка плагина проста: откройте меню Plugins → Find more plugins, введите название и нажмите Install. После этого плагин появится в списке и будет доступен через Plugins → Development.

Настройка параметров пунктирной линии

Качество пунктирной линии зависит не только от способа её создания, но и от тонкой настройки. Даже маленькие изменения в значениях Dash и Gap могут сильно повлиять на восприятие интерфейса.

Например, короткие штрихи с длинными промежутками (2 и 10) хорошо работают для обозначения границ, где пользователь должен что-то перетащить. Длинные штрихи с короткими промежутками (10 и 2) — для временных связей на диаграммах. А если вы хотите добиться эффекта «точечной» линии, установите одинаковые значения Dash и Gap, например, 1 и 1 — при толщине обводки 1–2px это будет выглядеть как цепочка точек.

Цвет и непрозрачность также важны. Слишком яркая пунктирная линия может отвлекать. Рекомендуется использовать цвета из дизайн-системы, но с пониженной непрозрачностью (30–50%). Например, серый #888888 с Opacity 40% — универсальный вариант.

Советы по визуальному балансу

• Избегайте слишком частой штриховки — она может сливаться в сплошную линию на маленьких экранах.
• Тестируйте линию в разных масштабах: 100%, 50%, 25%. На низких масштабах пунктир может терять чёткость.
• Не используйте пунктир для основных элементов интерфейса — он должен быть второстепенным.
• Для мобильных интерфейсов делайте штрихи чуть длиннее, чтобы они были различимы на маленьких экранах.

Распространённые ошибки и как их избежать

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

Одна из самых частых — попытка применить штриховку к заливке (Fill), а не к обводке (Stroke). Пунктир работает только с обводкой, поэтому если вы не видите эффекта, проверьте, включена ли у объекта обводка и выбран ли тип Dashed.

Другая ошибка — неправильное масштабирование. При увеличении или уменьшении объекта с пунктирной обводкой длина штрихов и промежутков не меняется автоматически. Это может привести к тому, что на большом масштабе линия выглядит нормально, а на маленьком — как набор точек.

Типичные проблемы и решения

• Линия выглядит сплошной — уменьшите значение Gap или увеличьте масштаб просмотра.
• Штрихи слишком короткие — увеличьте значение Dash до 6–10px в зависимости от толщины.
• Пунктир не сохраняется при экспорте — убедитесь, что вы экспортируете в формате PNG, SVG или PDF с поддержкой векторов.
• Пунктир «плавает» при анимации — при использовании Auto Layout или Constraints фиксируйте положение линии явно.

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

Пунктирная линия — не просто декоративный элемент. Она решает конкретные задачи в интерфейсах. Рассмотрим несколько реальных кейсов.

Зона перетаскивания файлов — один из самых распространённых сценариев. Пользователь видит рамку с пунктирной обводкой и понимает, что внутрь можно перетащить файл. В этом случае рекомендуется использовать толщину обводки 2px, Dash 8, Gap 6, цвет — серый с низкой непрозрачностью.

Связи между этапами воронки — в CRM или аналитических системах пунктирная линия соединяет блоки процесса. Здесь важно, чтобы линия не перегружала макет. Подойдёт тонкая линия (1px), Dash 4, Gap 4, светло-серый цвет.

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

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

По словам эксперта, ключ к успешному использованию пунктира — контекст. В административной панели он может быть более заметным, в consumer-приложении — едва различимым. Также важно тестировать восприятие: иногда пользователи не понимают, что пунктир означает интерактивность.

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

Заключение

Создание пунктирной линии в Figma — это простая, но многогранная задача. Основной способ — использование обводки с типом Dashed — подходит для 90% случаев. Он быстрый, гибкий и совместим с системами дизайна. Альтернативные методы, такие как ручное построение из фигур или использование плагинов, дают больше контроля и подойдут для сложных визуальных задач.

• Используйте обводку с типом Dashed для быстрого создания пунктирной линии.
• Настройте параметры Dash и Gap под конкретный контекст и устройство.
• Применяйте плагины для сложных или анимированных эффектов.
• Тестируйте восприятие пунктира на реальных пользователях.
• Сохраняйте стили как Shared Styles для командной работы.