В этом уроке вы узнаете как быстро делать векторные кляксы в фигме с помощью плагина «Blobs», как пользоваться специальный сервисом для этого и как можно использовать эти кляксы в дизайне сайтов. Это поможет вам, если вы хотите разнообразить ваш дизайн необычными фигурами.
![Кляксы в фигме. Пример](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-01-1024x585.png)
Выше пример векторных клякс, которые вы можете создавать при помощи плагина «Blobs». Вы можете легко изменять цвет, размер и редактировать их как и другие векторные элементы.
Установка плагина с кляксами в фигме
![Установка плагина, который делает кляксы в фигме.](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-02-1024x582.png)
Чтобы установить плагин с кляксами в фигме перейдите по ссылке. Устанавливается стандартным образом, для этого нажмите на кнопку «Install».
Активация плагина «Blobs» в Figma
![Активация плагина Blobs в Figma](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-03.png)
Чтобы активировать плагин «Blobs» в Figma, нажмите на левое, верхнее меню. Затем наведите на надпись «Plagins» и выберите «Blobs». Теперь разберёмся, что даёт этот плагин.
Как создать кляксы в фигме с помощью плагина «Blobs»
![Изменение параметров плагина Blobs в figma](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-04.png)
Чтобы создать кляксы с помощью плагина «Blobs» нужно в окне плагина изменить параметры «Сomplexity» (сложность) и «Сontrast» (контраст).
![Создание кляксы в фигме с плагином Blobs](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-05-1024x587.png)
Чтобы создать новую кляксу просто нажмите на кнопку «Make blobs».
![Изменение цвета кляксы в фигме](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-06-1024x582.png)
Цвет созданных клякс можно изменить стандартными инструментами фигмы. Для этого выберите кляксу и в правой панели внизу надписи «Fill» выберите нужный вам цвет.
Делаем кляксы с помощью сервиса blobs.app
![Сервис для генерации клякс blobs.app](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-07-1024x569.png)
Также для создания клякс можно воспользоваться сервисом blobs.app
![Изменение параметров в сервисе blobs.app](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-08-1024x571.png)
Для изменения формы создаваемых фигур вы можете изменять 2 парамтра «Randomness» и «Complexity». Первый переводится как «Случайность», второй как «Сложность» и отвечает за количество углов у кляксы.
![Изменение цвета кляксы. Сервис blobs.app](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-11-1024x568.png)
Чтобы изменить цвет нажмите на первый круг внизу и задайте нужный цвет.
![Изменение цвета на градиент в сервисе blobs.app](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-09-1024x570.png)
Если хотите создать градиент, то нажмите второй круг и задайте цвета градиента.
![Добавление обводки для кляксы в сервисе blobs.app](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-10-1024x568.png)
Для изменения цвета обводки кликните на третий круг и задайте ему цвет. Можно выбрать из предлагаемых.
![Скачивание кляксы из сервиса blobs.app](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-12-1024x569.png)
Чтобы сохранить или скопировать кляксу, нажмите на иконку </> слева снизу. В появившемся окне нажмите на надпись «Download», если хотите скачать кляксу себе на комьютер, либо «Copy» для того, чтобы скопировать.
![Вставка кляксы в фигме из сервиса blobs.app](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-13-1024x583.png)
Чтобы вставить кляксу в Figma, перейдите в ваш проект и нажмите «Ctrl» + «V».
![Изменение кляксы в Figma с помощью векторных точек.](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-14-1024x580.png)
Изменять форму фигуры можно нажав на Enter и затем потянув за векторные точки, которые появятся.
Примеры использования клякс в веб-дизайне
Давайте рассмотрим, как можно использовать кляксы в веб-дизайне. Рассмотрим простой приём обрезания фото внизу.
![Использование клякс в дизайне сайта](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-15-1024x583.png)
Вставьте кляксу и разместите изображение без заднего фона.
![Размещение объекта над кляксой](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-16-1024x580.png)
Совместите 2 элемента вместе, как показано на примере выше.
![Дублирование объекта в фигме.](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-17-1024x584.png)
Выделите 2 этих элемента, нажмите на клавишу Alt и потяните в сторону, чтобы копировать.
![Создание маски поверх фото с помощью кляксы](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-18-1024x582.png)
Выберите 2 фигуры слева и нажмите сверху на иконку маски «Use as mask».
![Обрезание фотографии в фигме](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-19-1024x584.png)
Выберите изображение без фона справа и нажмите сверху на иконку «Crop image», чтобы обрезать изобаражение.
![Обрезание фотографии в фигме](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-20-1024x584.png)
Потяните нижний угол, при необходимости можно обрезать правый угол.
![Совмещение фото, для создания эффекта обрезанного фото.](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-21-1024x584.png)
Совместите левое и правое изображение, чтобы из 2 частей собрать одно целое изображение. Можно сгруппировать все элементы выделив их и нажав на горячие клавиши Ctrl + G.
![Пример использования кляксы в веб-дизайне](https://web-design.center/wp-content/uploads/2021/09/klyaksy-v-figme-22-1024x587.png)
Вот пример как это может выглядеть в дизайне сайта. Кстати, если вас интересует тема веб-дизайна в фигме, то смотрите уроки на эту тему в рубрике посвященной этой теме.
Заключение
Итак, вы этом видео вы узнали как создавать кляксы в фигме с помощью плагина «Blobs», как пользоваться сервисом blobs.app, а также как использовать эти кляксы в веб-дизайне.
P.S. Получите бонусные материалы по быстрому созданию дизайна Landing Page в Figma, то по этой ссылке.
Автор статьи: Владимир Чернышов
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).