8 (8212) 55 18 12

Топ-10 турбо-плагинов для Figma

Приступить к чтению

Свершилось. Figma стала взрослой и обзавелась тем, чего не хватало после перехода со Скетча. Встречаем плагины. Я подготовил для тебя топ-10 расширений, которых мне так не хватало в работе. Шагаем в будущее вместе, ускоряем дизайн-процессы и избавляемся от занудных действий

 

1. Unsplash

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/738454987945972471/Unsplash

 

Интеграция с любимейшим стоковым сервисом. Плагин быстро оживит серые квадраты бесплатными стоковыми изображениями на любую тему. Используй случайные снимки, либо воспользуйся поиском внутри расширения.

 

Для кого

Для тех, кто не хочет тратить время на посиделки в фотостоковых сервисах.

 

Как это работает

  1. Выдели один или несколько объектов
  1. В контекстном меню Plugins выбери Unsplash
  1. Используй рандомные фото из категорий или находи близкие по тематики

 

 

2. Autoflow

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/733902567457592893/Autoflow

 

Больше не надо заморачиваться над созданием связей кривыми между артбордами, объектами, их расположением. Плагин сделает это за тебя в 2 клика.

 

Для кого

Для тех, кому часто приходится показывать схемы переходов и связи экранов для разработчиков или клиентов.

 

Как это работает

  1. Выдели 2 объекта
  1. Правым кликом в контекстном меню выбери Autoflow
  1. Вариант попроще: выдели объекты и используй хоткей ⌥⌘P, чтобы повторить последнее действие

 

 

Чего не хватает

  • Настройка стилизации кривых по дефолту;
  • Стрелок;
  • Связь между объектом и фреймом.

 

3. Mapsicle

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/736458162635847353/Mapsicle

 

Бомбический плагин для генерации карт прямо в заданную область. Больше никаких походов в стритмапы и импорт скриншотов. Из плюсов могу выделить поиск по координатам и набор стилей отрисовки карт.

 

Для кого

Для тех, кто предпочтет потратить время на чашечку кофе, нежели на поиск, нарезку и импорт статичных карт.

 

Как это работает

  1. Выдели необходимую область
  1. Вызови плагин из контекстного меню
  1. Ищи по строке поиска или координатам
  1. Выбирай необходимую стилизацию и позиционирование карты

 

 

Чего не хватает:

  • Отсутствует по-дефолту строка поиска (нужно получать токен на https://account.mapbox.com );
  • Меток.

 

4. Content Buddy

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/731260490045684148/Content-Buddy

 

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

 

Для кого

Для нетерпеливых людей вроде меня, которые не могут позволить себе прожечь всю жизнь, исправляя «Сдание» на «Здание» во всех макетах.

 

Как это работает

  1. Выделяй фреймы с макетами, либо выдели все по CMD+A
  1. Вызови плагин «Content Buddy» из контекстного меню
  1. Найди искомое слово
  1. Вводи и заменяй на нужное. Аллилуйя!

 

 

5. Blend

 

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/735442706723922553/Blend

 

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

 

Для кого

Для тех, кому нужно красиво и сразу.

 

Как это работает

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

 

 

6. Chroma

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/739237058450529919/Chroma

 

Генерируй или наполняй коллекцию цветовых стилей из выделенных элементов за несколько секунд.

 

Для кого

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

 

Как это работает

  1. Переименуй слои, содержащие цвета в необходимые переменные
  1. Выдели группу слоев
  1. Выбери плагин в контекстном меню и расширение автоматически сгенерирует палитру стилей

 

 

7. Image Tracer

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/735707089415755407/Image-tracer

 

На 7 строчку попадает маст-хэв плагин «Image Tracer». Преобразует растровые черно-белые изображения в кривые. Упрощенная версия трассировщика «люстры», но достаточно мощная и быстрая, чтобы спасти твою шкуру от беды.

 

Для кого

Для тех, кто постоянно теряет исходники иконок и логотипов.

 

Как это работает

  1. Импортируй растровое (черно-белое) изображение в Figma
  1. Выдели слой с изображением
  1. Выбери плагин из контекстного меню и нажми "Place trace vector"
  1. Также, для лучшего эффекта трассировки, можешь покрутить настройки под кнопкой «Show options».

 

 

8. Chart

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/734590934750866002/Chart

 

Турбо-плагин создает чудесные графики. На данный момент их 13, на основе твоих или рандомных данных. Огромным плюсом выступает возможность импорта JSON файла.

Поддерживает копипасту из Excel, Numbers, Google Sheet.

 

Для кого

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

 

Как это работает

  1. Создай область, куда плагин создаст будущий график
  1. Найди плагин в контекстном меню plugins / chart
  1. Импортируй реальные данные либо оставь рандомные
  1. Настрой вид графика, либо оставь дефолтный

 

 

9. Tumble

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/736084415195819692/Tumble

 

Добавит немного физики в твое творчество, а именно — создаст эффект гравитации и прибьет объекты к нижней границе фрейма.

 

Для кого

Для тех кто хочет наклепать забавные паттерны без особых усилий силами Ньютона.

 

Как это работает

  1. Создаешь в хаосе объекты по фрейму и выделяешь их
  1. Легким движением руки вызываешь плагин средствами контекстного меню
  1. Профит

 

 

 

10. Translate

🔗
Ссылка на страницу плагина - https://www.figma.com/c/plugin/733062974250826253/Translate

 

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

 

Для кого

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

 

Как это работает

  1. Выделяй текст
  1. Правым кликом мыши открой контекстное меню и в меню plugins открывай translate
  1. В первый раз тебе придется получить ключ от yandex.translate (небольшой квест на минуту https://translate.yandex.com/developers/keys)
  1. Выбирай язык оригинала и перевода
  1. Готово

 

 

Чего не хватает

  • Поддержки русского языка;
  • Автоопределение искомого языка.

 

Надежды

Сейчас в пуле плагинов после старта порядка 50 расширений и их число будет только расти, привлекая внимание аудитории к разрастающейся в монстра Figma. Очень хочется видеть в библиотеке плагины с возможностью экспорта стилей цветов паком в json или xml, а так же адекватный экспорт svg ресурсов с прозрачной подложкой.

Я все.

Время прочтения:
Время прочтения 6.8 мин

Для авторов

Хотите стать со-автором блога, рассказать аудитории о новинках в мире веб и все что с ним связано? Тогда присылайте ваши материалы и мы опубликуем их.

Стать автором

Обсуждение