Дизайн
#Руководства

5 полезных плагинов для Figma: создание паттернов

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

Иллюстрация: Оля Ежак для Skillbox Media

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

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

Pattern Hero

Этот плагин генерирует последовательности из выбранных объектов — ими могут быть фигуры, картинки, группы или фреймы.

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma и выделите объекты, из которых хотите сделать паттерн.
  3. Нажмите правой кнопкой мыши на выделенные объекты, в выпадающем меню перейдите в пункт Plugins и выберите Pattern Hero.
  4. В появившемся окне выберите количество колонок, строк и отступы между элементами. Если вы хотите получить случайную последовательность элементов, нажмите на переключатель в пункте Shuffle Nodes.
  5. Нажмите кнопку Create Pattern.
Изображение: Skillbox Media

Confetti

Генерирует узор, напоминающий конфетти. Работает только с геометрическими фигурами — треугольниками, кругами, квадратами.

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, создайте фрейм и поместите в него несколько разноцветных фигур.
  3. Нажмите правой кнопкой мыши на фигуры внутри фрейма, в выпадающем меню перейдите в пункт Plugins и выберите Confetti.
  4. В появившемся окне выберите количество колонок и строк. По желанию разрешите плагину указывать случайные размер, прозрачность и угол наклона.
  5. Нажмите кнопку Run.
Изображение: Skillbox Media

Fizzy

Этот плагин делает паттерны только из кругов, но зато предварительно их рисовать не нужно. Пользователь может задать их размер, количество и цвета.

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma и создайте любую фигуру — круг, квадрат, треугольник.
  3. Нажмите правой кнопкой мыши на фигуру, в выпадающем меню перейдите в пункт Plugins и выберите Fizzy.
  4. В появившемся окне выберите количество кругов, их размеры и цвета.
  5. Нажмите кнопку Fizzy it. Получившийся паттерн будет находиться внутри фигуры, которая превратится в маску.
Изображение: Skillbox Media

CoShuffler

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

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma и создайте несколько фигур с нужными цветами — их плагин будет использовать как палитру.
  3. Нажмите правой кнопкой мыши на фигуру, в выпадающем меню перейдите в пункт Plugins и выберите CoShuffler.
  4. Выделите фигуры с нужными цветами и в появившемся окне нажмите Set colors.
  5. Выделите все объекты вашего паттерна и в окне плагина нажмите кнопку Go. Каждый раз, когда вы будете её нажимать, цвета объектов будут меняться.
Изображение: Skillbox Media

Hero Patterns

Если у вас нет времени на создание собственного паттерна, попробуйте поискать подходящий в библиотеке Hero Patterns. Там собрано несколько десятков узоров, которые могут подойти в разных ситуациях.

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma и создайте фрейм, внутри которого появится будущий паттерн.
  3. Нажмите правой кнопкой мыши на фрейм, в выпадающем меню перейдите в пункт Plugins и выберите Hero Patterns.
  4. В появившемся окне выберите цвет и сам паттерн. Как только вы нажмёте на узор, он тут же появится на макете. По желанию цвет фона можно изменить в стандартных настройках заливки.
Изображение: Skillbox Media

Глубоко, бесплатно:
вебинары по программированию, маркетингу и дизайну.

Расписание

Курс

Figma с нуля до PRO

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

Узнать про курс
Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована