Дизайн
#статьи

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

Как быстро сделать красивый узор и загрузить на макет огромную картинку.

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

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

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

Insert Big Image

По умолчанию в Figma нельзя загрузить изображение с разрешением выше 4096 пикселей. Но это ограничение можно обойти с помощью плагина Insert Big Image — он режет большую картинку на несколько мелких и объединяет их в группу.

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

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши по макету, в выпадающем меню перейдите в пункт Plugins и выберите Insert Big Image.
  3. Перетащите вашу картинку из компьютера в появившееся окно.

Noise

Генерирует текстуру шума, которую можно добавить на любое изображение.

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

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши по макету, в выпадающем меню перейдите в пункт Plugins и выберите Noise.
  3. В появившемся окне укажите нужное разрешение текстуры и её свойства, нажмите на галочку и перетащите текстуру на нужное изображение.

Make Hover State

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

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

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши по компоненту с кнопкой, в выпадающем меню перейдите в пункт Plugins и выберите Make Hover State.
  3. На макете сразу появится комбайн с вариантом hover — измените его так, как вам нужно, и используйте в своём проекте.

BlendingMe

Генерирует из двух векторных объектов один узор. Результат зависит от формы объектов, их цветов, непрозрачности и расположения исходных фигур на макете.

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

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши по компоненту с кнопкой, в выпадающем меню перейдите в пункт Plugins и выберите BlendingMe.
  3. В появившемся окне укажите шаг смешивания и нажмите Blend. Если результат вам не подходит, поменяйте шаг и нажмите Update.

Pattern Generator

Генератор красивых паттернов. Результат можно вывести в разрешении 4000×4000 пикселей.

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

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши по макету, в выпадающем меню перейдите в пункт Plugins и выберите Pattern Generator.
  3. В появившемся окне настройте свой паттерн. Несмотря на большое количество ползунков в меню, разобраться с ними будет очень просто.

Курс

Figma с нуля до PRO

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

Узнать про курс

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

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

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

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