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

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

Зачем нужна пунктирная обводка в дизайне

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

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

Пошаговая инструкция: как сделать пунктирную обводку

Создание пунктирной обводки в Figma — это простая операция, если вы знаете, где искать нужные параметры. Вот пошаговый алгоритм:

1. Выберите фигуру, к которой хотите добавить пунктирную обводку — прямоугольник, овал, полигон или даже текстовую рамку.
2. Перейдите в панель свойств (Properties) справа. Убедитесь, что включён параметр Stroke (обводка). Если он отключён — включите его, выбрав цвет обводки.
3. Найдите раздел Dash и Gap. По умолчанию они установлены в 0. Нажмите на поле Dash и введите значение, например, 4.
4. В поле Gap введите значение, например, 6. Это определит расстояние между штрихами.
5. Проверьте результат. Если штрихи слишком плотные — увеличьте Gap. Если они сливаются — уменьшите Gap или уменьшите Dash.

Продвинутые настройки: Dash, Gap, Cap и Join

Для профессионального результата нужно учитывать не только длину штрихов и расстояния между ними, но и параметры завершения линий — Cap и Join.

• Cap — определяет форму концов штрихов. Выберите Butt (плоские), Round (закруглённые) или Square (квадратные). Для пунктирных линий чаще всего используют Round — они выглядят мягче и естественнее.
• Join — влияет на углы. Для замкнутых фигур (кругов, прямоугольников) лучше выбрать Miter или Round. Bevel может создавать неожиданные разрывы в углах при малых значениях Dash.

Также обратите внимание на толщину обводки: если вы используете Dash = 2 и Gap = 4 при Stroke = 8px, штрихи могут выглядеть как сплошные полосы. Оптимальное соотношение — Stroke 1–3px, Dash 3–6px, Gap 4–8px. Для тонких линий (например, в таблицах) подойдут значения Dash=2, Gap=3.

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

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

• Использование ползунков вместо числовых значений. Ползунки округляют значения, что приводит к неоднородности штрихов при масштабировании.
• Неправильное соотношение Dash и Gap. Если Gap меньше Dash, штрихи сливаются — это уже не пунктир, а волнистая линия.
• Игнорирование Cap и Join. Плоские концы (Butt) на углах прямоугольников создают визуальные «разрывы». Решение — всегда использовать Round для закруглённых концов.
• Применение пунктирной обводки к сложным полигонам без проверки. На изогнутых или многоугольных формах штрихи могут «скакать» или неравномерно распределяться. Проверяйте результат в режиме Preview.
• Экспорт без проверки на разных DPI. При экспорте в PNG или SVG с высоким разрешением (2x, 3x) пунктир может превратиться в сплошную линию. Тестируйте экспорт на 1x, 2x и 3x.

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

Пунктирные обводки находят своё применение в самых разных сценариях:

• Формы с состоянием “готово к заполнению” — например, поле ввода, которое активируется при клике. Пунктирная рамка визуально отличает его от активного (сплошная) или заполненного (зелёная обводка).
• Границы между колонками в таблицах — особенно в сложных дашбордах, где сплошные линии перегружают интерфейс.
• Обозначение зон для перетаскивания — в drag-and-drop интерфейсах пунктирная рамка показывает, куда можно поместить элемент.
• Разделители в списках — вместо горизонтальных линий используйте пунктирные вертикальные или горизонтальные обводки для разделения пунктов.
• Декоративные элементы в брендинге — логотипы, иконки и анимации часто используют пунктирные линии для создания эффекта «эфемерности» или «технологичности».

Представьте, что вы проектируете интерфейс для медицинского приложения. Пунктирная обводка вокруг неотмеченной записи о приёме — это не просто стиль, это подсказка пользователю: «Вы ещё не заполнили это поле». Такой подход снижает количество ошибок на 18% по данным A/B-тестов в медицинских приложениях (источник: Nielsen Norman Group, 2024).

Плагины против встроенных инструментов: стоит ли использовать?

Существует множество плагинов, обещающих «один клик — пунктирная обводка». Например, Dashed Stroke, Stroke Dash или Line Dash. Но на практике они не нужны.

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

• Замедлять работу Figma при большом количестве элементов;
• Не совместимы с автоматическими компонентами и variants;
• Сбрасывать настройки при обновлении Figma;
• Не поддерживать экспорт в SVG с сохранением стилей.

Единственное исключение — если вы работаете с очень сложными кривыми Безье и вам нужно автоматически распределить штрихи по контуру. В таких случаях можно использовать плагин Dashed Stroke, но только как временное решение. Лучше — перейти на ручную настройку через Stroke + Dash/Gap.

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

Анна Петрова, старший UX-дизайнер компании «Тинькофф», рассказывает: «Мы используем пунктирные обводки в 70% наших интерфейсов — от мобильного банка до веб-панели для бизнес-клиентов. Но не как декор, а как системный элемент. У нас есть стиль-гайд: Dash = 4, Gap = 6, Stroke = 1, Cap = Round. Это наш стандарт. Мы проверяем его на всех устройствах — от iPhone SE до 4K-мониторов. Если линия выглядит как сплошная — мы увеличиваем Gap. Если штрихи “прыгают” на изгибах — мы пересчитываем контур вручную».

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

Часто задаваемые вопросы

Заключение

Пунктирная обводка в Figma — это не сложная фича, а важный инструмент точного дизайна. Она позволяет создавать интерфейсы, которые не просто выглядят красиво, но и понятны пользователям. Настоящий профессионал не ищет плагины — он знает, как управлять базовыми параметрами Stroke, Dash и Gap, чтобы добиться идеального результата.

• Используйте ручной ввод значений Dash и Gap — не ползунки.
• Оптимальные значения: Dash 3–6px, Gap 4–8px, Stroke 1–3px.
• Всегда применяйте Cap = Round для плавных концов.
• Сохраняйте настройки как компоненты для повторного использования.
• Проверяйте результат на разных масштабах и при экспорте в SVG.