Кляксы в фигме
Плагины, Уроки

Кляксы в фигме. Как сделать за 1 клик с плагином «Blobs».

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

Кляксы в фигме. Пример

Выше пример векторных клякс, которые вы можете создавать при помощи плагина «Blobs». Вы можете легко изменять цвет, размер и редактировать их как и другие векторные элементы.

Установка плагина с кляксами в фигме

Установка плагина, который делает кляксы в фигме.

Чтобы установить плагин с кляксами в фигме перейдите по ссылке. Устанавливается стандартным образом, для этого нажмите на кнопку «Install».

Активация плагина «Blobs» в Figma

Активация плагина Blobs в Figma

Чтобы активировать плагин «Blobs» в Figma, нажмите на левое, верхнее меню. Затем наведите на надпись «Plagins» и выберите «Blobs». Теперь разберёмся, что даёт этот плагин.

Как создать кляксы в фигме с помощью плагина «Blobs»

Изменение параметров плагина Blobs в figma

Чтобы создать кляксы с помощью плагина «Blobs» нужно в окне плагина изменить параметры «Сomplexity» (сложность) и «Сontrast» (контраст).

Создание кляксы в фигме с плагином Blobs

Чтобы создать новую кляксу просто нажмите на кнопку «Make blobs».

Изменение цвета кляксы в фигме

Цвет созданных клякс можно изменить стандартными инструментами фигмы. Для этого выберите кляксу и в правой панели внизу надписи «Fill» выберите нужный вам цвет.

Делаем кляксы с помощью сервиса blobs.app

Сервис для генерации клякс blobs.app

Также для создания клякс можно воспользоваться сервисом blobs.app

Изменение параметров в сервисе blobs.app

Для изменения формы создаваемых фигур вы можете изменять 2 парамтра «Randomness» и «Complexity». Первый переводится как «Случайность», второй как «Сложность» и отвечает за количество углов у кляксы.

Изменение цвета кляксы. Сервис blobs.app

Чтобы изменить цвет нажмите на первый круг внизу и задайте нужный цвет.

Изменение цвета на градиент в сервисе blobs.app

Если хотите создать градиент, то нажмите второй круг и задайте цвета градиента.

Добавление обводки для кляксы в сервисе blobs.app

Для изменения цвета обводки кликните на третий круг и задайте ему цвет. Можно выбрать из предлагаемых.

Скачивание кляксы из сервиса blobs.app

Чтобы сохранить или скопировать кляксу, нажмите на иконку </> слева снизу. В появившемся окне нажмите на надпись «Download», если хотите скачать кляксу себе на комьютер, либо «Copy» для того, чтобы скопировать.

Вставка кляксы в фигме из сервиса blobs.app

Чтобы вставить кляксу в Figma, перейдите в ваш проект и нажмите «Ctrl» + «V».

Изменение кляксы в Figma с помощью векторных точек.

Изменять форму фигуры можно нажав на Enter и затем потянув за векторные точки, которые появятся.

Примеры использования клякс в веб-дизайне

Давайте рассмотрим, как можно использовать кляксы в веб-дизайне. Рассмотрим простой приём обрезания фото внизу.

Использование клякс в дизайне сайта

Вставьте кляксу и разместите изображение без заднего фона.

Размещение объекта над кляксой

Совместите 2 элемента вместе, как показано на примере выше.

Дублирование объекта в фигме.

Выделите 2 этих элемента, нажмите на клавишу Alt и потяните в сторону, чтобы копировать.

Создание маски поверх фото с помощью кляксы

Выберите 2 фигуры слева и нажмите сверху на иконку маски «Use as mask».

Обрезание фотографии в фигме

Выберите изображение без фона справа и нажмите сверху на иконку «Crop image», чтобы обрезать изобаражение.

Обрезание фотографии в фигме

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

Совмещение фото, для создания эффекта обрезанного фото.

Совместите левое и правое изображение, чтобы из 2 частей собрать одно целое изображение. Можно сгруппировать все элементы выделив их и нажав на горячие клавиши Ctrl + G.

Пример использования кляксы в веб-дизайне

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

Заключение

Итак, вы этом видео вы узнали как создавать кляксы в фигме с помощью плагина «Blobs», как пользоваться сервисом blobs.app, а также как использовать эти кляксы в веб-дизайне.

P.S. Получите бонусные материалы по быстрому созданию дизайна Landing Page в Figma, то по этой ссылке.

Автор статьи: Владимир Чернышов

Теги