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

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

Понимание структуры обводок в Figma

Figma — это векторный редактор, где все формы и линии строятся на основе геометрических принципов. Обводка (stroke) в Figma — это не отдельный объект, а свойство фигуры, которое можно настраивать по ширине, цвету, типу соединения углов и стилю линии. Существует три основных типа обводки: Solid (сплошная), Dashed (пунктирная) и Dotted (точечная).

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

Тип обводки применяется ко всем сторонам фигуры или кривой. Если вы используете прямоугольник, то пунктир будет по всему периметру. Для отдельных сегментов лучше использовать векторные линии (Vector Lines). Важно понимать, что Figma не позволяет задавать разные типы обводки для разных сторон одного объекта без использования масок или дополнительных фигур.

Какие бывают типы штриховки

• Solid — стандартная сплошная линия, используется повсеместно.
• Dashed — чередование линий и пробелов, подходит для разделителей, зон действия.
• Dotted — серия круглых точек, часто применяется для маркеров или легких декоративных линий.

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

Основной способ: использование опции Dashed Stroke

Самый быстрый и универсальный способ создать пунктирную линию — воспользоваться встроенной функцией Dashed Stroke. Этот метод подходит для 90% случаев и не требует установки дополнительных инструментов.

Пошаговая инструкция

1. Откройте Figma и создайте новый файл или откройте существующий проект.
2. Выберите инструмент Line (L) или Rectangle (R), если нужна рамка.
3. Нарисуйте линию или фигуру — например, горизонтальную черту длиной 200 пикселей.
4. В правой панели свойств найдите блок Stroke.
5. Нажмите на значок штриховки рядом с выбором цвета (по умолчанию — сплошная линия).
6. Выберите тип Dashed.
7. Появится поле с двумя числами: первое — длина штриха, второе — длина промежутка.
8. Настройте значения, например, 10 и 5 для среднего пунктира.

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

Особенности применения к разным фигурам

Ручное создание пунктирной линии

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

Алгоритм ручного пунктира

1. Создайте маленький прямоугольник (например, 8×2 пикселя) — это будет один штрих.
2. Скопируйте его (Ctrl+C, Ctrl+V) и переместите на нужное расстояние — например, 6 пикселей по горизонтали.
3. Выделите оба прямоугольника, нажмите Ctrl+D (Repeat) — Figma повторит последнее действие, создавая цепочку.
4. Продолжайте до нужной длины линии.
5. Для выравнивания используйте инструмент Auto Layout или вручную выставьте промежутки через панель свойств.

Этот метод даёт полный контроль над каждым элементом. Вы можете менять размер, цвет, поворот и даже добавлять анимацию в прототипах.

Когда использовать ручной метод?

• Когда нужен нестандартный ритм (например, два коротких штриха, затем длинный).
• Если пунктир должен быть криволинейным, но встроенная обводка искажается.
• Для создания декоративных эффектов — например, пунктир из иконок или градиентных линий.
• Когда требуется анимация отдельных элементов в прототипе.

Ручной подход требует больше времени, но открывает пространство для креатива.

Плагины для работы с пунктирными линиями

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

Топ-3 плагина для пунктира

Установка плагина занимает всего несколько кликов: откройте панель плагинов (внизу справа), найдите нужный, нажмите «Install». После этого он появится в списке доступных инструментов.

Как использовать Dash It!

1. Установите и запустите плагин Dash It! через меню Plugins.
2. Выделите линию или фигуру с обводкой.
3. Выберите один из предустановленных паттернов: например, «Short Dots» или «Long Dashes».
4. Плагин автоматически настроит параметры штриховки.
5. При необходимости отредактируйте значения вручную.

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

Советы по настройке и использованию пунктира

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

Рекомендации по проектированию

• Используйте пунктир для неактивных или второстепенных элементов — так пользователь не путает их с основными.
• Избегайте слишком мелкого пунктира на мобильных экранах — он может сливаться или быть неразличимым.
• Соблюдайте единые параметры по проекту: например, все пунктирные линии имеют штрих 8 px и промежуток 4 px.
• Тестируйте цвет: серый пунктир на светлом фоне может теряться, попробуйте добавить лёгкое затемнение.

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

• Ошибка: Применение пунктира к тексту.
  Решение: Текст нельзя сделать пунктирным напрямую. Используйте обводку вокруг текстового блока или конвертируйте текст в вектор (Outline Stroke).
• Ошибка: Неравномерный вид пунктира в углах.
  Решение: Измените тип соединения обводки на «Butt Cap» — это сделает начало и конец штриха прямыми.
• Ошибка: Пунктир исчезает при экспорте.
  Решение: Убедитесь, что в настройках экспорта выбран векторный формат (SVG) и масштаб корректен.

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

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

Также Дмитрий отмечает, что Figma продолжает развивать инструменты для работы с обводками. В roadmap компании упоминались функции: переменная толщина штриха, кастомные паттерны и поддержка анимированных обводок. Это значит, что уже скоро создание пунктира станет ещё проще и гибче.

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

Заключение

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

• Стандартный способ — использование типа обводки Dashed в панели Stroke.
• Для нестандартных паттернов применяйте ручное создание из отдельных фигур.
• Плагины вроде Dash It! ускоряют работу и обеспечивают согласованность.
• Пунктир должен быть читаемым, особенно на мобильных экранах и в темных темах.
• Сохраняйте стили пунктира в дизайн-системе для командного использования.