Как сделать волнистую линию в Фигме: пером, зигзагом и обводкой

Чтобы сделать волнистую линию в Фигме, возьмите Pen (клавиша P) и ставьте точки щелчком с протяжкой: каждая протяжка выгибает отрезок дугой. Если волна нужна ровная, нарисуйте зигзаг и скруглите его углы полем Corner radius. Для рисованной, чуть неровной волны подойдёт обычная прямая с обводкой Dynamic stroke. А идеально одинаковые гребни проще всего получить из SVG-файла или плагина.

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

Рекомендуем курсы по Figma

• Bonnie & Slide9.5 ★Основы дизайна в Figma42 800 ₽4 недели
• Skillbox9.5 ★Figma 2.029 394 ₽2 месяца
• Академия Синергия9.5 ★Figma с нуля до PRO31 836 ₽2 месяца
• Cloudlessons9.6 ★Супер Figma23 990 ₽1 месяц
• НАДПО9.6 ★Веб-дизайн в редакторе Figma. Повышение квалификации33 400 ₽2 месяца
• PurpleSchool9.5 ★Основы дизайна и Figma3 999 ₽2 месяца

Все 357 курсов→

Какой способ выбрать

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

Короткое правило: для интерфейса берите зигзаг или SVG, для иллюстрации подойдёт Pen или Dynamic stroke.

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

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

1. Выберите инструмент Pen на панели инструментов или нажмите P.
2. Щёлкните там, где начинается линия, чтобы поставить первую точку.
3. Переведите курсор вправо, нажмите кнопку мыши и, не отпуская, протяните вверх. Отрезок выгнется дугой, а длина и наклон протяжки зададут форму изгиба.
4. Следующую точку поставьте так же, но протяните вниз. Чередуйте «вверх» и «вниз», пока линия не станет нужной длины.
5. Нажмите Escape, чтобы оставить линию открытой. Если щёлкнуть по первой точке, контур замкнётся.

Ровные гребни пером получаются только с опорой. Включите сетку в Фигме или поставьте направляющие на верхнюю и нижнюю границу волны и на каждый шаг по горизонтали. Тогда точки лягут на одинаковом расстоянии, и волна не «поплывёт».

Как поправить изгиб после рисования

Выделите линию и нажмите Enter, чтобы открыть режим редактирования вектора. Перетаскивать точки можно инструментом Move (клавиша V), а прямой отрезок превратить в дугу помогает Bend на дополнительной панели инструментов.

1. Выберите Bend.
2. Щёлкните по точке или отрезку, где нужен изгиб.
3. Тяните появившиеся ручки, чтобы задать длину и наклон кривой.

Чтобы гребень был симметричным, в настройках Mirroring выберите Mirror angle and length: вторая ручка повторит и угол, и длину первой. Вариант Mirror angle копирует только угол, а No mirroring позволяет двигать ручки независимо. Это написано в статье справки о редактировании векторов.

Ровная волна из зигзага и Corner radius

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

1. Возьмите Pen и простыми щелчками, без протяжки, нарисуйте зигзаг: точка внизу, точка вверху, снова внизу. Расстояние между точками держите одинаковым по сетке.
2. Нажмите Escape, затем выделите линию и нажмите Enter.
3. Выделите все точки зигзага. Лишнюю точку, поставленную случайно, выделите и удалите, подробнее в инструкции о том, как удалить объект в Фигме.
4. В правой панели в поле Corner radius введите радиус. Начните с половины шага по горизонтали и подбирайте, пока углы не превратятся в плавные дуги.

У этого способа есть оговорка. В справке о скруглении углов сказано, что радиус нельзя применить к линиям, стрелкам и векторным сетям с одним-единственным отрезком. Если поле неактивно, проверьте, что у зигзага хотя бы три точки. Не помогло — изогните отрезки через Bend.

Крайние точки открытой линии радиус не скругляет: для них есть концы обводки, о них ниже.

Волнистая обводка через Dynamic stroke

Этот способ превращает в волну любую обводку: прямую линию, круг, рамку вокруг фото. Как вставить картинку в фигуру, чтобы обвести её волной, мы показывали отдельно. Получается не строгая синусоида, а неровная линия, как будто её провели маркером. В справке об обводках Dynamic stroke описан как обводка с «бугристым», нарисованным от руки видом.

1. Нарисуйте пером прямую из двух точек или выделите готовую фигуру с обводкой.
2. В правой панели найдите раздел Stroke и откройте Advanced stroke settings.
3. Перейдите к настройкам Dynamic stroke.
4. Подберите три параметра из таблицы.

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

Dynamic stroke работает только с обводкой по центру. В той же справке сказано, что такой тип обводки можно расположить только в центре контура. И ещё одно ограничение: на слое с Dynamic stroke не работает инструмент Variable width, которым меняют толщину линии по длине.

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

CheckroiПодборка курсов по Figma356 курсов • 56 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Идеально ровная волна из SVG

Когда волна должна быть точно 600 пикселей в длину, с четырьмя гребнями по 20 пикселей, рисовать её руками долго. Проще собрать SVG-файл и перетащить его на холст. В справке Figma об импорте сказано, что SVG после импорта превращается в редактируемый векторный слой, а не остаётся картинкой.

Вот короткий скрипт на Python. Он пишет файл wave.svg с волной из квадратичных кривых:

# Волнистая линия как SVG: длина, высота волны и число гребней
length = 600      # ширина линии в пикселях
amplitude = 20    # на сколько гребень поднимается над серединой
waves = 4         # сколько полных волн уложить в длину

step = length / (waves * 2)   # половина волны
mid = amplitude + 4           # середина по вертикали с запасом под обводку
d = f"M0 {mid}"
for i in range(waves * 2):
    x0 = i * step
    # контрольная точка вдвое дальше: тогда вершина кривой ровно на amplitude
    ctrl = mid - 2 * amplitude if i % 2 == 0 else mid + 2 * amplitude
    d += f" Q{x0 + step / 2:g} {ctrl:g} {x0 + step:g} {mid:g}"

svg = (f'<svg xmlns="http://www.w3.org/2000/svg" width="{length}" height="{mid * 2}">'
       f'<path d="{d}" fill="none" stroke="#1E1E1E" stroke-width="3" stroke-linecap="round"/></svg>')
with open("wave.svg", "w") as f:
    f.write(svg)
print(svg)

Вывод в терминале:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="48"><path d="M0 24 Q37.5 -16 75 24 Q112.5 64 150 24 Q187.5 -16 225 24 Q262.5 64 300 24 Q337.5 -16 375 24 Q412.5 64 450 24 Q487.5 -16 525 24 Q562.5 64 600 24" fill="none" stroke="#1E1E1E" stroke-width="3" stroke-linecap="round"/></svg>

Контрольная точка стоит в 40 пикселях от середины, вдвое дальше нужной высоты: квадратичная кривая Безье доходит только до половины пути к ней. Поэтому линия в файле занимает по высоте от 4 до 44 пикселей: ровно по 20 вверх и вниз от середины.

Дальше всё просто:

1. Запустите скрипт командой python3 wave.py, рядом появится wave.svg.
2. Перетащите файл с компьютера на холст Figma.
3. Меняйте цвет и толщину в разделе Stroke, как у любой линии.

Обратный путь тоже есть: нарисованную в Figma волну можно выгрузить в SVG для сайта. Форматы и настройки экспорта разобраны в инструкции о том, как сохранить проект в Фигме.

CheckroiПодборка курсов по Python570 курсов • 53 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

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

Плагин Wavy Lines

В сообществе Figma есть бесплатный плагин Wavy Lines от Headout Inc., в ноябре 2026 года у него 35,4 тысячи пользователей. На странице плагина работа описана в три шага:

1. Выберите тип линии: Curvy (волна) или Jagged (зубцы).
2. Задайте параметры линии. Автор советует ширину не меньше 100 пикселей.
3. Нажмите Create Line.

В версии 19 от 7 июня 2024 года в плагин добавили прямоугольную и пилообразную волну.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как настроить толщину, концы и пунктир

Какой бы способ вы ни выбрали, внешний вид волны задаётся в разделе Stroke. Все пункты ниже есть в справке по свойствам обводки.

• Толщина. Поле Weight задаёт толщину в пикселях. Толщина обводки не входит в размеры слоя, поэтому толстая волна может вылезти за рамку фрейма.
• Концы. У открытой линии с двумя концами их стиль выбирают прямо в разделе Stroke. Round скругляет кончики, None обрезает их ровно, а варианты со стрелками превращают волну в указатель.
• Положение. В меню Position у линий по умолчанию стоит центр. Обводки Inside и Outside при экспорте в SVG упрощаются до центральной, поэтому для волн, которые уйдут в код, сразу ставьте центр.

Если по волне нужно пустить подпись, пригодится инструкция о том, как сделать текст по кругу и по дуге: текст ложится на любой контур, и на волнистый тоже.

Волнистая пунктирная линия

Пунктир накладывается поверх любой из волн. Шаги из справки:

1. В разделе Stroke откройте меню Advanced stroke.
2. Выберите стиль Dashed.
3. В поле Dash введите длину штриха в пикселях, в поле Gap задайте промежуток.
4. Выберите вид концов штриха: None, Round или Square.

Для точек вместо штрихов справка советует Dash длиной 1 пиксель и Dash cap Round при обводке по центру. Учтите, что Figma начинает и заканчивает пунктир половинкой штриха. Если она мешает, переведите обводку в контур через пункт Outline stroke в контекстном меню и удалите лишнее вручную.

CheckroiПодборка курсов по векторной графике48 курсов • 27 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Частые ошибки и как их исправить

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

Где освоить Figma системно

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

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
Основы дизайна в Figma Перейти на сайт курса	Bonnie & Slide	42 800 ₽	2366 ₽/мес.	4 недели	Обзор курса
Figma 2.0 Перейти на сайт курса	Skillbox	29 394 ₽	4899 ₽/мес.	2 месяца	Обзор курса
Figma с нуля до PRO Перейти на сайт курса	Академия Синергия	31 836 ₽	2653 ₽/мес.	2 месяца	Обзор курса
Figma с нуля до PRO Перейти на сайт курса	Skillbox	39 334 ₽	1091 ₽/мес.	2 месяца	Обзор курса

• 

  Основы дизайна в Figma

  Bonnie & Slide42 800 ₽2366 ₽/мес4 недели
  Перейти на сайт курсаОбзор
• 

  Figma 2.0

  Skillbox29 394 ₽4899 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Figma с нуля до PRO

  Академия Синергия31 836 ₽2653 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Figma с нуля до PRO

  Skillbox39 334 ₽1091 ₽/мес2 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по Figma