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

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

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

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

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

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

• Линия (Line): Используйте инструмент Line (Клавиша L). Зажмите Shift для создания идеально прямой линии под углом 0°, 45° или 90°.
• Произвольная фигура: Прямоугольник (R), Эллипс (O), Многоугольник или любая фигура, созданная пером (P). Пунктир будет применен к обводке (Stroke) этой фигуры.

Переход к панели свойств Stroke. Выделите созданный объект. В правой панели свойств найдите секцию Stroke. Убедитесь, что обводка включена (иконка глаза активна). Задайте ей желаемый цвет, толщину (Weight) и положение (Inside, Center, Outside).

Применение пунктирного стиля. Это ключевой момент. Рядом с полем ввода толщины обводки вы увидите иконку с тремя точками — меню дополнительных настроек обводки. Нажмите на нее. Откроется окно, где находятся параметры Dashed и Gap. По умолчанию они неактивны.

• Активация: Нажмите на иконку из четырех маленьких квадратиков слева от надписей Dashed и Gap. Она подсветится, и поля станут доступными для редактирования.
• Настройка паттерна: В поля Dashed (Длина штриха) и Gap (Длина промежутка) можно вводить числовые значения. Они работают в паре, формируя повторяющийся паттерн: сначала отрисовывается отрезок длиной Dashed, затем следует пробел длиной Gap, и цикл повторяется.

Тонкая настройка и эксперименты. Figma позволяет создавать сложные пунктирные паттерны, используя до трех пар значений Dashed и Gap. Это открывает двери для создания стилей типа "штрих-точка-штрих" или других комбинаций. Просто добавляйте значения в следующие строки. Например:

• Первая строка: Dashed: 5, Gap: 3
• Вторая строка: Dashed: 1, Gap: 3

Результат: длинный штрих (5px), короткий промежуток (3px), точка (1px), снова промежуток (3px), и повтор.

Понимание взаимосвязи параметров — залог создания именно того пунктира, который нужен для вашей задачи. Каждый параметр влияет на восприятие.

• Толщина обводки (Weight): Определяет "жирность" и заметность линии. Тонкий пунктир (1-2 px) выглядит технически и минималистично, толстый (4+ px) — более графично и активно.
• Длина штриха (Dash): Длинные штрихи делают линию более сплошной и весомой, короткие — более "воздушной" и пунктирной.
• Длина промежутка (Gap): Большие промежутки увеличивают ритмичность и разрывность, маленькие — создают эффект плотной, но прерывистой структуры.
• Скругление концов (Stroke Cap): Этот параметр, расположенный в том же выпадающем меню, критически важен для эстетики. Вариант Round Cap скругляет концы каждого штриха, делая пунктир более мягким и современным. Flat Cap оставляет острые, угловатые концы.

Продвинутые техники и практическое применение

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

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

• Точечная линия: Установите равные, небольшие значения для Dashed и Gap (например, 1 и 1), а также выберите Round Cap. При увеличении толщины обводки точки становятся круглее.
• Штрихпунктирная линия: Используйте две или три пары значений, как описано выше. Классический паттерн "длинный штрих - точка" создается комбинацией Dashed: 10, Gap: 3 и Dashed: 1, Gap: 3.

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

Для расширения возможностей экосистема плагинов Figma предлагает решения для задач, которые сложно реализовать стандартными средствами:

• Dashed Lines: Помогает создавать сложные паттерны, визуализировать их и применять к кривым.
• Arrowfy: Позволяет легко добавлять стрелки и другие маркеры к концам пунктирных линий, что полезно для диаграмм и потоковых схем.
• Stroke Dashes: Предоставляет дополнительные опции для управления пунктиром вдоль контура.

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

Тип линии	Пример параметров Stroke в Figma (Weight, Dash, Gap, Cap)	Основные сферы применения в UI/UX
Сплошная линия	Weight: 1px, Dash: —, Gap: —	Разделение секций (Dividers), рамки полей ввода, подчеркивание, простые рамки.
Пунктирная (базовая)	Weight: 2px, Dash: 5, Gap: 3, Cap: Round	Обозначение зоны дропа (для Drag&Drop), выделение области для взаимодействия, схематические указания.
Точечная	Weight: 2px, Dash: 1, Gap: 2, Cap: Round	Декоративные разделители, легкие направляющие, фоновые элементы в иллюстративном стиле.
Штрихпунктирная	Weight: 1px, Dash: 8, Gap: 3 + Dash: 1, Gap: 3, Cap: Flat	Обозначение границ карт или схем, выделение сфокусированного состояния нестандартных элементов, учебные подсказки (onboarding).
Крупный пунктир	Weight: 4px, Dash: 10, Gap: 6, Cap: Round	Акцентирование внимания, создание игрового или броского стиля в иллюстрациях и маркетинговых блоках.

 

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

1. Создавайте стили Stroke. Выделите объект с настроенным пунктиром, нажмите + в разделе Stroke панели свойств и создайте стиль с именем, например, Stroke / Dashed / M / Primary. Это позволит применять его одним кликом к любым новым объектам и поддерживать консистентность.
2. Учитывайте состояния. Продумайте, как пунктирная линия будет вести себя в разных состояниях (Default, Hover, Focused, Disabled). Меняется ли ее цвет, толщина или паттерн?
3. Документируйте. В файле дизайн-системы или на специальной странице с гайдлайнами покажите примеры использования каждого типа пунктира, его параметры и предназначение. Это поможет всей команде дизайнеров и разработчиков говорить на одном языке.

При передаче макета в разработку важно, чтобы пунктир был корректно реализован в коде. Figma автоматически экспортирует CSS-свойство stroke-dasharray, которое содержит все значения Dash и Gap. Обязательно проверяйте этот момент на этапе приемки верстки, так как визуальное совпадение может быть неидеальным из-за особенностей рендеринга браузеров.

 

Заключение

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

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