Плагины для Figma

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

Unsplash

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

Lorem

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

Content Reel

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

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

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

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

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

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

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

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

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

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

1. Переходим в раздел Community (см. пункты выше)
2. Переходим в любой раздел
3. В правой панели нажимаем на кнопку Plugins
4. Выбираем нужный плагин и нажимаем кнопку "Try it out"
5. Автоматически откроется окно и в некоторых случаях плагин также запустится автоматически
6. Переходим во вкладку "Resources" -> "Plugins" и в разделе "Recent" будут показаны плагины, которые вы выбрали
7. Далее все как описано выше - выбираем "Run", если хотим запустить плагин сразу
8. Если хотим сначала прочитать описание или сохранить плагин к себе, то кликаем по названию и далее "..." и выбираем Save

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.