Линии в дизайне интерфейсов разделяют блоки контента, направляют взгляд пользователя и создают визуальную иерархию. В Figma доступны различные типы линий: сплошной, волнистый, пунктирный и другие стили. Настройка пунктирных линий требует понимания специфических параметров редактора.
Многие дизайнеры ошибочно полагают, что создание пунктирной линии в Figma ограничивается базовыми настройками. На практике редактор позволяет тонко настраивать расстояние между штрихами, размер каждой точки и даже применять градиенты к прерывистым элементам.
Интерфейс Figma содержит все необходимые инструменты для создания пунктирных линий в панели Stroke. Правильная настройка параметров Dash и Gap определяет внешний вид и ритм пунктира. При этом можно комбинировать различные значения для получения уникальных декоративных элементов.
Настройка рабочего пространства и базовых параметров линии
Перед созданием пунктирной линии в Figma настройте оптимальный масштаб рабочей области - 100-200%. Активируйте сетку через меню View > Layout Grid для точного позиционирования элементов.
Выберите инструмент Line (L) и создайте базовую сплошной линию нужной длины. В правой панели свойств установите толщину stroke от 1 до 4px - это оптимальный диапазон для пунктирных линий.
Задайте цвет линии через Color Picker. Для контрастности используйте темные оттенки на светлом фоне. Проверьте, чтобы параметр Opacity был установлен на 100% для четкой видимости точек.
Отключите сглаживание в настройках stroke, установив Corner = Sharp. Это обеспечит четкие края каждой точки пунктира. При необходимости активируйте привязку к пиксельной сетке через Snap to Pixel Grid.
Проверьте выравнивание линии относительно других элементов через панель Align. Для идеальной геометрии используйте горячие клавиши Shift + стрелки при создании прямых горизонтальных или вертикальных линий.
Выбор инструмента Line и установка длины пунктирной линии
После открытия Figma выберите инструмент Line (L) на панели инструментов. Удерживая Shift при рисовании, создайте прямую линию нужной длины.
- Зажмите Alt и перетащите линию для создания копии
- Используйте клавиши со стрелками для точного позиционирования
- Нажмите R для поворота линии на произвольный угол
В панели Stroke настройте параметры пунктира:
- Выберите тип линии: сплошной, пунктирный или волнистый
- Установите толщину stroke в пикселях
- Задайте длину штриха (Dash) и промежутка (Gap)
- Отрегулируйте отступы между точками для равномерности
Точные значения для стандартных пунктирных линий:
- Мелкий пунктир: Dash 2, Gap 2
- Средний пунктир: Dash 4, Gap 4
- Крупный пунктир: Dash 8, Gap 4
- Точка-тире: Dash 8, Gap 4, с добавлением точки размером 1px
Для изменения длины готовой линии используйте маркеры по краям или введите точное значение в поле Width на панели свойств.
Применение свойства Stroke и настройка типа штриха
В панели Stroke Figma предлагает четыре базовых типа штриха: сплошной, пунктирный, точка и волнистый. Для создания пунктирной линии выберите тип штриха 'Dashed' и настройте параметры Dash и Gap, определяющие длину штрихов и промежутков между ними.
Для точного контроля над внешним видом линии используйте следующие значения:
- Dash: 8-12 пикселей для стандартных штрихов
- Gap: 4-6 пикселей для равномерных интервалов
- Weight: 1-2 пикселя для четкой видимости
При работе с волнистыми линиями в настройках Stroke доступны дополнительные параметры:
- Amplitude: регулирует высоту волны
- Wavelength: определяет расстояние между пиками
- Phase: смещает волну вдоль линии
Точечный тип штриха (Dotted) требует особого внимания к соотношению Gap и Weight. Оптимальное расстояние между точками должно быть в 2-3 раза больше толщины линии для сохранения читаемости. Для создания микроточек установите Weight: 1px и Gap: 3px.
Комбинируйте разные типы штрихов на отдельных сегментах одной линии через функцию 'Convert to path'. В режиме редактирования узлов назначайте уникальные настройки Stroke каждому сегменту для создания сложных визуальных эффектов.
Регулировка интервалов между штрихами через Dash и Gap
Точные настройки Dash и Gap для популярных стилей пунктира:
- Классический пунктир: Dash 10, Gap 10
- Точка: Dash 1, Gap 5
- Штрих-точка: Dash 15, Gap 5
- Волнистый пунктир: Dash 3, Gap 3
При работе с параметром Stroke учитывайте толщину линии - чем она больше, тем заметнее становятся интервалы. Для тонких линий (1-2px) оптимально использовать малые значения Dash и Gap (2-5). Для толстых (4px и более) - увеличивайте пропорционально.
Создание неравномерного пунктира требует ввода нескольких значений через пробел в поле Dash. Например, '15 5 2' создаст паттерн из длинного штриха, короткого штриха и точки. Gap в этом случае задает единый интервал между элементами.
Добавление стилей и сохранение пунктирной линии в библиотеку
После настройки параметров пунктирной линии создайте стиль для многократного использования. Кликните на иконку из четырех точек в панели свойств справа и выберите 'Create Style'. Назовите стиль описательно, например 'dash-line-2px'.
Варианты стилизации линий:
- сплошной контур с точками
- волнистый пунктир
- комбинация штрихов разной длины
- чередование точка-тире
В Figma стили сохраняются в разделе 'Team Library'. Нажмите кнопку Share в верхнем меню и включите публикацию стилей. Опубликованные стили автоматически синхронизируются между файлами проекта.
Для организации библиотеки используйте префиксы в названиях:
- line/dash - пунктирные линии
- line/dot - точечные линии
- line/wave - волнистые линии
Экспорт созданных линий:
1. Выделите линию
2. В панели справа выберите формат (SVG/PNG)
3. Нажмите кнопку 'Export'
При необходимости изменить стиль линии позже откройте 'Team Library', найдите нужный стиль и отредактируйте его параметры. Изменения применятся ко всем элементам с этим стилем.
Создание вариаций пунктирной линии для разных состояний интерфейса
Для состояний hover, active и disabled в Figma можно создать различные модификации пунктирных линий. При наведении курсора (hover) используйте увеличенное значение stroke до 2px и измените цвет на более насыщенный. Для активного состояния подойдет волнистый паттерн штрихов с уменьшенным интервалом Gap.
Неактивное состояние (disabled) оформляйте через снижение прозрачности до 50% и увеличение расстояния между точками. Добавьте компонент Auto Layout для автоматического изменения длины линии при масштабировании интерфейса.
Для создания анимированных состояний определите свойство stroke-dasharray с разными значениями для каждого кадра. При переходе между состояниями используйте Smart Animate для плавного изменения параметров Dash и Gap.
Сгруппируйте все вариации в один компонент с вложенными состояниями через Property Controls. Это позволит быстро переключаться между стилями линии и поддерживать консистентность интерфейса. Для каждого состояния настройте отдельные значения толщины, цвета и паттерна штрихов.
