Миниатюра Использование плагинов, ускоряющих работу в программе Figma. 50+ бесплатных шаблонов, 40+ уроков, 20+ статей. Переходите и изучайте!

Обновлено: 25 октября 2022 года

Плагины для Figma

В обновленном материале будет рассказано про 6 основных плагинов, которые ускорят вашу разработку дизайн-макетов. А также в конце статьи я дам инструкцию по установке плагинов в Фигма.

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

Unsplash

Unsplash плагин для Figma

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

Lorem

Lorem плагин для Figma

Одно из самых ожидаемых расширений. Оно позволяет заполнить текстовый фрейм текстом-рыбой. Функционал данного плагина очень широкий: заполнение по размеру фрейма, заполнение по количеству слов, заполнение шаблонным текстом по количеству абзацев.

Content Reel

Content Reel плагин для Figma

И последний на сегодня полезный плагин - Content Reel. Данный плагин позволяет вставлять шаблонные тексты (имя, телефон, адрес и т.д.), вставлять иконки с помощью иконочного шрифта. Также на момент написания статьи (сентябрь 2019) доступна функция вставки некоторых "шаблонных" изображений. Очень полезное расширение на этапе прототипирования, когда у вас нет готового текста на сайт, но вам нужно придумать потенциальные адреса, телефоны и т.д.

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

Видео-обзор на данные плагины.

Плагины в Figma (обновление 2021)

На май 2021 года хочется отметить новые плагины, которые появились с момента написания статьи:

  1. Avatars. Плагин для вставки случайной фотографии человека в прямоугольник. Подойдет тем, кто не хочет искать в интернете картинки людей. Avatars плагин для Figma
  2. Chart. Плагин для упрощенного создания графиков. Он работает с Excel, Google таблицами, и помогает делать классную графику. Chart плагин для Figma
  3. Font Awesome Icons. Легендарный иконочный шрифт теперь в Figma. Красивые иконки теперь доступны без установки шрифта. Используйте! Font Awesome Icons плагин для Figma

Установка плагинов в Figma

  1. Находясь внутри проекта, кликаем по иконке добавления "ресурсов" в проект Кнопка ресурсы на панели Figma
  2. В появившемся окне, сверху, вам будут доступны плагины, которые вы использовали недавно; а внизу будут доступны плагины из сообщества Figma Добавление ресурсов в проект Figma
  3. Также вам будут доступны 3 вкладки сверху окна:
    • Последние использованные плагины
    • Сохраненные плагины
    • Раздел "Для разработчиков" (этот раздел нужен тем, кто разрабатывает плагины)
    Вкладки в разделе ресурсов Figma
  4. Вводим название плагина, который хотим найти, и кликаем по нужному плагину Поиск плагина в разделе ресурсов
  5. В окне плагина мы можем его сразу запустить (Кнопка "Run"), а можем сохранить к себе, чтобы в будущем не потерять. Я рекомендую сразу сохранить плагин, потестировать его некоторое время, а затем удалить, если это потребуется Запуск плагина или его сохранение

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

Для того чтобы добавить плагин в Figma через Figma Community:

  1. Переходим в раздел Community (см. пункты выше) Раздел Community внутри программы Figma
  2. Переходим в любой раздел
  3. В правой панели нажимаем на кнопку Plugins
  4. Выбираем нужный плагин и нажимаем кнопку "Try it out" Добавление плагина в проект Figma
  5. Автоматически откроется окно и в некоторых случаях плагин также запустится автоматически
  6. Переходим во вкладку "Resources" -> "Plugins" и в разделе "Recent" будут показаны плагины, которые вы выбрали Вкладка resources в Figma
  7. Далее все как описано выше - выбираем "Run", если хотим запустить плагин сразу Запуск плагина из ресурсов
  8. Если хотим сначала прочитать описание или сохранить плагин к себе, то кликаем по названию и далее "..." и выбираем Save
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на платный интенсив по веб-дизайну. Вы изучите полностью весь дизайн-процесс, в том числе: работа в Figma, общение с заказчиком, анализ и выполнение ТЗ, управление проектами и т.д. Ссылка на сайт интенсива.
Интенсив по веб-дизайну от сайта d-e-n.info