Если вы задавались вопросом как делать волны в фигме, то вот вам простое решение. В этой инструкции вы узнаете о классном плагине «Get Waves». Ниже видео и инструкция в текстовом формате.
Пример созданных волн в Figma с помощью плагина «Get Waves»
![Какие волны в фигме можно создать с плагином get waves. Пример.](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme01-1024x581.jpg)
Выше пример созданной волны, которую я создал при помощи плагина Get Waves. Фигура имеет векторный формат. Вы легко можете изменять цвет с помощью стандартных инструментов в фигме.
Установка и активация плагина «Get waves» для Figma
![Установка плагина get waves для figma](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme02-1024x583.jpg)
Чтобы установить плагин «Get waves» перейдите по ссылке и нажмите на кнопку «Inatall» в верхнем правом углу.
![Активация плагина get waves для создания волны в фигме](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme03-1024x583.jpg)
Для активации плагина нажмите на меню слева и сверху в вашем проекте. Затем выберите «Plagins» — «Get waves».
![Get waves для figma. Обзор плагина.](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme04.jpg)
Появиться окно плагина, где вы можете изменять параметры создаваемых вами волн.
![Get waves. Тянем ползунок, чтобы создать больше волн](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme05.jpg)
Чтобы создать больше волн потяните ползунок вправо, как показано на скриншоте выше.
![Get waves. Меняем волны на ступени](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme06.jpg)
Чтобы вместо волн создать ступени, выберите соответствующую пиктограмму.
![Get waves. Замена волн на острые углы](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme07.jpg)
Также есть возможность создавать вместо волн углы.
![Get waves. Волна сверху.](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme08.jpg)
Если хотите сделать волну сверху, а не снизу, то выберите пиктограмму, которая показывает сверху вниз.
![Создание новой волны в фигме с помощью плагина get waves](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme09.jpg)
Чтобы создать новую волну, нажмите на кнопку «Create» внизу.
![Пример созданной волны в фигме](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme10-1024x582.jpg)
На примере выше показана волна, которую я создал.
![Замена цвета у волны в фигме](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme11-1024x583.jpg)
Вы можете изменять цвет этой волны стандартным образом. Для этого внизу надписи «Fill» нажмите на цвет и выберите необходимый вам цвет.
Как использовать волны для переходов в веб-дизайне?
![Пример использование волн в веб-дизайне на сайте (landing page)](https://web-design.center/wp-content/uploads/2021/09/volny-v-figme12-1024x653.jpg)
Вы можете использовать волны, которые создаёте с помощью плагина «Get waves» на сайте. Выше пример того как это может выглядеть. Здесь представлено 2 волны с разной прозрачностью.
Волны в фигме: в заключении
Итак, вы узнали как делать волны в фигме (Figma). Как видите это быстро и легко. Иногда этот инструмент может быть вам полезен при создании дизайна сайтов и т.д.
P.S. Если хотите узнать как ускорить работу при создании дизайна Landing Page, то переходите по этой ссылке и получите готовые материалы.
Автор статьи: Владимир Чернышов
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).