Сейчас Figma уверенно становится лидером среди инструментов для создания дизайнов и прототипов. Мы подробно рассматривали ее преимущества в статье «Figma: современные фишки и возможности». Раньше недостатком платформы можно было назвать отсутствие плагинов, но разработчики учли пожелания пользователей и добавили эту возможность в программу. Плагины помогают оптимизировать и автоматизировать рутинные задачи, облегчают работу и ускоряют ее.
Количество плагинов растет буквально с каждым днем, потому что система подразумевает добавление новинок самими пользователями. Благодаря такому ходу мы получаем действительно полезный продукт, ведь его создают люди с теми же запросами, что и у нас. Это идеальное воплощение концепта «Хочешь сделать что-то хорошо – сделай это сам». Раздражает отсутствие какой-то примочки? Не тебя одного! И вот уже в перечне появилась новая фишка, которая была так нужна.
Есть среди существующих плагинов достаточно специфические решения, которые нужны не каждому специалисту или лишь на проектах особых направлений. Но сегодня перечислим те, которые быстро завоевали популярность и практически наверняка пригодятся тебе в работе.
Лови актуальные плагины Figma
- Map maker – позволяет вставить в макет карту местности, стилизованную Styling Wizard. Также обрати внимание на Vector Maps – это возможность загружать в Фигму векторные карты, выбирая в поиске регионы и города по названию или отыскивая их на карте мира.
- Text Prettier и SBOL Typograph – простые способы сделать текст красивым, выровнять его, удалить лишние пробелы, перенести на новую строку предлоги, получить длинные тире вместо дефисов и т.д.
- Colour compass – подбор цветовой палитры к определенному цвету, очень удобно для новичков в вопросах колористики. Еще в связке с ним стоит попробовать Color Kit – он помогает генерировать разные оттенки выбранного цвета и делать градации.
- Unsplash – это плагин известного фотостока, на котором можно брать качественные изображения совершенно бесплатно. Удобно, если в проекте нужны картинки, а авторского контента нет. И экономит время в несколько раз, когда нет даже лишней минуты на поиски, сохранение и загрузку фото в проект.
- Coda for Figma – простое заполнение макетов данными из Википедии, Spotify, Shopify, Dropbox, Gmail, Календарь Google, Jira и прочих сервисов.
- Table Paste – та же история, но с переносом данных из таблиц Excel в стилизованные таблицы, созданные в Figma.
- Arc – создавай изогнутый текст на логотипах и баннерах, не выходя из программы.
- Removebg – вырезает фон с фото, позволяя лишний раз не открывать Photoshop. Есть ограничение по качеству на бесплатной версии.
- Design System Organizer – как понятно из названия, этот плагин создан для организации компонентов дизайна и стилей. Происходит группирование с возможностью перемещения и переименования элементов дизайн-системы.
- Movie Posters – довольно узконаправленный инструмент, но от этого не менее крутой. Он позволяет заполнять любой векторный объект постером из шоу, сериала или фильма. Идеально для проектов, посвященных киноманам.
- GiffyCanvas – создание GIF-изображений прямо в Фигме с указанием нужных параметров.
- BeatFlyer Lite – анимация дизайна. Максимально впечатляющий результат, который поможет сделать оригинальный «живой» проект. Также есть похожий плагин Figmotion. Анимация – это твой шанс сделать работу действительно классной. На эту тему у нас есть интересная онлайн-премьера «Оживляем сайт с помощью jQuery и JS за 1.5 часа».
- LottieFiles – еще один способ создавать анимации, выбирай среди готовых вариантов и вставляй их в виде SVG или GIF-файлов. Тысячи бесплатных анимаций на любой вкус. Посмотреть результат можно в режиме прототипирования.
- TinyImage Compressor – плагин для экспорта иллюстраций, который почти в два раза эффективнее сжимает картинки, чем стандартный экспорт Фигмы. Также тут есть функции оптимизации прогрессивных JPEG и прозрачных PNG файлов. Плагин запоминает последние настройки и в следующий раз при работе использует те же установки, не придется каждый раз их настраивать. В бесплатной версии есть ограничение – 15 сжатий.
- Design Lint – с этим плагином проверка макета перед сдачей разработчику будет максимально простой. Он проверяет расхождения, находит недостающие стили во всех слоях, до каждой мелочи анализирует макет, проверяя обводки, шрифты, цвета, эффекты, заливки. Плагин сразу исправляет несоответствия и быстро реагирует на обновления, если были внесены правки.
Применение современных фишек
Установка плагинов очень проста, достаточно скачать нужный в разделе Plugins или зайти через Community, если у тебя старая версия. Там есть разные категории, чтобы их посмотреть перейди в Explore и кликай на иконки, чтобы читать описания. Все скачанные плагины будут доступны в меню Plugins. Установка проходит в один клик, как и удаление – если что-то не подошло, то просто убери плагин из своего списка. Это пригодится, когда скачиваешь несколько похожих и после тестирования выбираешь наиболее подходящий.
Чтобы воспользоваться примочкой нужно выбрать объект в проекте, к которому применяется плагин, а потом нужное действие. Некоторые плагины предлагают инструкцию, поэтому здесь сложно запутаться.
Сегодня мы рассмотрели достаточно простые плагины, которые освоит любой начинающий дизайнер. Но если даже это для тебя сложновато – приходи на обучение. Детальный разбор возможностей Figma будет проходить в рамках онлайн-коучинга «Веб-дизайнер: счастливый билет в Таиланд». Тут ты освоишь не только базовые навыки работы в программе, но и научишься применять те нестандартные приемы, в которых пригодятся плагины. Подай заявку сейчас, пока есть места на ближайшем потоке!
