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

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

Чтобы сделать пунктирную линию в Figma, выберите инструмент Line, настройте Stroke в панели Properties, включите Dashed и задайте значения Dash и Gap. Для гибкого контроля используйте компоненты или векторные сетки. Главное — не полагайтесь на стандартные настройки, а тестируйте пунктир под разные разрешения экрана.

Содержание статьи:

Как создать пунктирную линию в Figma
Продвинутые настройки пунктира: Dash и Gap
Пунктирная линия vs векторная сетка: когда что использовать
Частые ошибки и как их избежать
Создание компонентов и стилей для пунктиров
Как сделать пунктирные линии адаптивными
Экспертное мнение: как используют пунктиры в крупных продуктах
Вопросы и ответы
Заключение

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

Создание базовой пунктирной линии в Figma занимает меньше минуты, но именно правильный старт определяет качество всего дальнейшего процесса. Начните с выбора инструмента Line (или нажмите L на клавиатуре). Нарисуйте линию в любом направлении — горизонтально, вертикально или под углом. После этого перейдите в панель свойств справа (Properties).

В разделе Stroke найдите опцию Dashed и включите её. По умолчанию Figma применит стандартный шаблон пунктира: короткие отрезки с равными промежутками. Это удобно для быстрого макета, но редко подходит для точного дизайна. Чтобы изменить внешний вид, вы можете вручную задать значения Dash (длина отрезка) и Gap (длина промежутка). Например, введите 4 и 8 — это даст вам короткие чёткие точки с умеренными промежутками.

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

Полезно знать: Не используйте «Stroke» с нулевой шириной — даже 0.5px может быть недостаточно для чёткого отображения пунктира на Retina-экранах.

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

Стандартные значения по умолчанию (Dash: 8, Gap: 8) часто выглядят слишком грубо или слишком плотно. Для профессионального дизайна важно подбирать параметры под контекст. Например, в мобильных интерфейсах предпочтительны более мелкие и частые пунктиры — они воспринимаются как тонкие разделители, а не как «зачёркнутые» элементы.

Рекомендуемые комбинации:
— Мобильный интерфейс: Dash 2, Gap 4 — мелкие точки, подходит для списков и разделителей.
— Десктопный дизайн: Dash 4, Gap 6 — классический баланс, часто используется в формах и карточках.
— Декоративные элементы: Dash 10, Gap 10 — длинные штрихи для визуального акцента.

Вы можете использовать нечётные значения — например, Dash 3, Gap 7 — это создаёт асимметричный, более живой эффект. Важно: Figma не сжимает или не растягивает пунктир при изменении длины линии. Если вы удлините линию, количество точек увеличится пропорционально, сохраняя заданный ритм.

«Пунктир — это ритм. Как в музыке, он должен быть предсказуемым, но не монотонным. Лучше 3–4 варианта на проект, чем 10 случайных.» — Анна Козлова, Lead UI-дизайнер, Tinkoff

Если вам нужно создать линию с чередованием разных длин отрезков (например, длинный-короткий-длинный), Figma не поддерживает это напрямую. В таком случае используйте векторный редактор: нарисуйте линию вручную из нескольких сегментов, объедините их в группу и сохраните как компонент.

Пунктирная линия vs векторная сетка: когда что использовать

Многие дизайнеры путают пунктирные линии с векторными сетками или повторяющимися элементами. Это разные инструменты для разных задач.

Критерий	Пунктирная линия	Векторная сетка (повторяющиеся точки)
———-	——————	—————————————
Создание	Один объект, настройка Stroke	Множество отдельных элементов (точек)
Производительность	Высокая — один элемент	Низкая — десятки/сотни элементов
Масштабирование	Сохраняет ритм	Может «разрываться» при изменении размера
Гибкость	Ограниченная (только Dash/Gap)	Полная — можно менять форму, размер, цвет каждого элемента
Использование	Разделители, границы, анимации	Декоративные фоны, текстуры, паттерны

Если вам нужна линия, которая будет вести себя как единый элемент — используйте пунктир. Если вы хотите, чтобы каждая точка была отдельным объектом (например, для анимации по отдельности или для интерактивного клика) — создавайте сетку из точек. Для этого используйте инструмент Ellipse (O), нарисуйте одну точку, скопируйте её (Ctrl+D), и выровняйте с помощью Auto Layout или Grid.

Полезно знать: При экспорте в PNG/SVG пунктирные линии сохраняются как векторные, но в некоторых браузерах могут отображаться с артефактами — всегда проверяйте на реальном устройстве.

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

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

1. Игнорирование масштаба. Пунктир, который выглядит идеально на 100%, при увеличении до 200% становится нечитаемым. Решение: всегда проверяйте пункттир на 200% и 300% в режиме Preview.
2. Использование слишком тонкой линии. При Stroke 0.25px пунктир может исчезать на экранах с низким DPI. Минимально допустимое значение — 0.5px.
3. Несовместимость с компонентами. Если вы изменяете Dash/Gap внутри компонента, это не всегда обновляется во всех экземплярах. Решение: используйте Component Properties для настройки стилей.
4. Пунктир на закруглённых углах. При применении к прямоугольнику с радиусом углов пунктир может «ломаться» — отрезки становятся неравномерными. Обходной путь: используйте отдельные линии, а не замкнутый контур.
5. Неправильная цветовая контрастность. Пунктирная линия серого цвета на белом фоне может быть не видна. Проверяйте контрастность через инструмент Contrast Checker в Figma (плагин Accessible Color Palette).

«Если вы не можете увидеть пунктир на телефоне с включённой яркостью — он не подходит для продукта.» — Дмитрий Смирнов, UX-консультант, Яндекс

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

Для масштабных проектов с десятками разделителей важно стандартизировать пунктирные линии. Создайте компонент: нарисуйте линию с нужными параметрами Dash и Gap, выделите её, нажмите Ctrl+Alt+C (или «Create Component» в панели). Теперь вы можете переиспользовать её в любом месте.

Чтобы управлять стилями, перейдите в раздел Styles слева. Создайте новый Stroke Style и назовите его, например, «Dashed Divider — Mobile». Присвойте ему нужные параметры: цвет, толщину, Dash, Gap. Теперь вы можете применять этот стиль к любой линии — и при изменении стиля все элементы обновятся автоматически.

Если вы работаете в команде, экспортируйте стили в библиотеку Figma (Figma Library) и подключайте её в другие проекты. Это ускоряет согласованность между дизайнерами и разработчиками.

Полезно знать: Стили Stroke не наследуются в компонентах по умолчанию — убедитесь, что вы применяете стиль вручную, а не через «Override».

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

Адаптивность — ключевая задача для современных интерфейсов. Пунктирная линия должна выглядеть одинаково хорошо на iPhone 15, iPad и десктопе. Figma не имеет встроенной адаптивной системы для пунктира, но есть эффективные обходные пути.

Первый способ: используйте Auto Layout с фиксированной высотой линии и масштабируемой шириной. При изменении ширины контейнера линия растягивается, а ритм пунктира сохраняется. Это работает, если вы не меняете Dash/Gap.

Второй способ: создайте несколько компонентов с разными настройками (например, «Dashed — Mobile», «Dashed — Tablet», «Dashed — Desktop») и используйте Variant Groups. Внутри группы вы можете переключаться между вариантами в зависимости от контекста.

Третий способ — самый продвинутый: используйте плагин Auto Layout Pro или Responsive Resize для автоматического подбора Dash/Gap в зависимости от ширины контейнера. Хотя Figma не делает это встроенными средствами, плагины позволяют задать логику: «если ширина > 768px → Dash=6, Gap=10».

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

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

«В нашем дизайне банковского приложения пунктирные линии — это не просто декор. Они обозначают переход между состояниями: “выбрано”, “в процессе”, “не начато”. Мы используем три варианта: тонкий пунктир (неактивное), полужирный (активное), и прерывистый с анимацией (загрузка). Это позволяет пользователю мгновенно понять, где находится его действие.»

— Елена Белова, UX-директор, СберБанк.

Елена и её команда провели A/B-тестирование: интерфейс с пунктирами показал на 23% выше вовлечённость, чем с обычными сплошными линиями. Почему? Пунктир создаёт ощущение «незавершённости» — это психологически побуждает пользователя продолжить действие. Особенно эффективно это работает в onboarding-процессах и формах.

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

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

Можно ли сделать пунктирную линию с разной толщиной по длине?

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

Почему пунктир не отображается при экспорте в SVG?

Иногда это происходит из-за того, что браузер или редактор не поддерживают определённые значения Dash/Gap. Решение: упростите параметры (например, Dash=4, Gap=4) и проверьте в браузере Chrome или Firefox. Также убедитесь, что Stroke не имеет атрибута «stroke-linecap: square» — лучше использовать «round».

Как сделать пунктирную линию с анимацией?

Figma не поддерживает анимацию внутри самого редактора, но вы можете экспортировать линию как SVG и добавить анимацию через CSS — например, с помощью stroke-dashoffset и stroke-dasharray. Для прототипирования используйте плагин ProtoPie или Figma to Lottie.

Можно ли применить пунктир к тексту?

Нет. Текст в Figma не принимает параметры Stroke в виде пунктира. Если вам нужно подчеркнуть текст пунктиром — используйте линию под ним, выровненную с текстом через Align или Auto Layout.

Как быстро скопировать настройки пунктира с одной линии на другую?

Выделите линию с нужным пунктиром, нажмите Ctrl+Shift+C (Copy Style), затем выделите другую линию и нажмите Ctrl+Shift+V (Paste Style). Это скопирует только Stroke — цвет, толщину, Dash, Gap.

Заключение

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

Чтобы работать с ними эффективно, не ограничивайтесь стандартными настройками. Создавайте стили, используйте компоненты, тестируйте на разных экранах и всегда задавайте себе вопрос: «Что эта линия говорит пользователю?»

Пунктир — это не просто линия. Это язык. И как любой язык, он требует точности, последовательности и понимания контекста.

Всегда настраивайте Dash и Gap вручную — не полагайтесь на значения по умолчанию.
Используйте Stroke Styles для стандартизации пунктиров в команде.
Проверяйте пунктир на реальных устройствах — особенно на мобильных экранах.
Для сложных сценариев переходите от пунктира к векторным сеткам или анимированным SVG.
Пунктир — это не декор, а часть пользовательского опыта. Используйте его с намерением.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.