Лучшие плагины для работы с текстом и шрифтами в Figma

• Виды и характеристики плагинов
• Самые полезные для разработчика текстовые плагины
• Немного подробностей о Фигма

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

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

Получи грант, покрывающий 50% стоимости обучения

И обучайся новой профессии онлайн из любой точки мира

Получить грант

Виды и характеристики плагинов

Чтобы охватить больше возможностей Figma, мы классифицировали плагины по направлению работы.

Графические

• Blobs и Get Waves. Формирует элементарные абстрактные фоны с возможностью генерирования различных волн, когда в оформлении используются графики.
• Image Tracer. Эффективный плагин, позволяющий мгновенно перевести растровое изображение в векторное.
• Color Kit. В данном случае у вас есть возможность выбрать оттенки любой насыщенности с небольшим шагом.
• Webgradients и uiGradients. Открывает пользователю целый перечень красивых и разноплановых градиентов.
• TinyImage Compressor. Плагин, предназначенный для сжатия файлов. Часто данную опцию разработчики используют для создания картинок для интернет-порталов. Однако после 15 применений система предложит пользователю покупку подписки.
• Image Palette. Предназначен для создания цветовой палитры, основанной на загруженной картинке. Также отлично работает на логотипировании.
• Stark и Contrast. Корректоры контрастности цветов и элементов по отношению друг к другу.
• Remove BG. Отличная возможность практически моментально удалить фон у любого изображения. Однако для применения данной опции вам необходимо будет завести собственный аккаунт, на котором вам дается не более 50 бесплатных манипуляций в год.

87% наших выпускников уже работают в IT

Оставь заявку, и мы поможем с выбором новой профессии

Оставить заявку

Текстовые генераторы

• Chart и Charts. Разработаны специально для работы с диаграммами. Автоматически выставляют параметры на изображениях в соответствии с указанными данными. В большинстве своем применяется на стадии прототипирования с тем, чтобы наглядно предоставить клиенту данные для лучшего их восприятия.
• Figmoji. Идеален для мгновенной вставки эмоджи, исключает необходимость искать подходящий смайл в браузере.
• Iconify. Оптимален для поиска и добавления пиктограмм непосредственно в программу. В плагине присутствуют пакеты, при помощи которых вы можете быстро найти разные пиктограммы в едином стиле.
• Unsplash. Представляет собой обширную библиотеку фото, при помощи которой вы найдете любое изображение и вставите его сразу в проект.
• Mapsicle и Map Maker. В данном случае плагин помогает определить точные координаты точки на карте и сразу указать их в проекте. Здесь предусмотрено непосредственное взаимодействие и подгон параметров под свои задачи.
• Table Generator. Генератор стандартных таблиц с возможностью регулировки их параметров, в том числе размеров элементов.
• Content Reel. Позволяет практически моментально заполнить страницу портала заданным контентом с указанием таких кажущихся мелочей, как время, номер телефона и т.д.
• Chroma. Вставляйте цветовой спектр в один клик. Просто выберите элемент с понравившимся колором и запустите плагин. Цвет немедленно появится в библиотеке.
• Wire Box. Преобразует выбранный дизайн в вайфремы. Найдите понравившийся макет и запустите программу. Отлично работает схема в том случае, когда у заказчика уже имеется готовый дизайн, и вам необходимо его доработать.

Анимационные

• GiffyCanvas. Формирует моментальные гифы внутри программы. Просто найдите пару интересных макетов, поставьте период их смены и цикличность.
• LottieFiles. Интересный инструмент в Figma. Позаоляет анимировать макеты, то есть, предложить заказчику проект анимации.

Упорядочение

• LilGrid. Удобный для систематизации элементов на сайте плагин. С его помощью вы быстро упорядочите информацию в соответствии с вашими требованиями. Останется только указать расстояние между деталями и количество колонок.
• Design System Organized. Предназначен для группировки или разгрупировки разных объектов, а также перемещения их в библиотеку.
• Design Lint. Работает в качестве поисковика элементов в выбранном макете, для которых вы еще не применяли редактуру. Быстро находит разногласия и исправляет их.
• Viewports. Визуально показывает макет на разных устройствах. Необходимо настроить ограничения элементов, рассчитав их размер в зависимости от параметров окна.
• Product Planer. Включает массу шаблонов, по которым можно планировать непосредственно в программе.
• Rename It. В данном случае появляется возможность быстрого переименования слоев для экспорта макетов в прототипы.
• Autoflow. Быстро показывает переходы между макетами за свет визуализации связей.
• Time Machine. Автоматически копирует вариант, который вам требуется сохранить на другую страницу с возможностью присвоения имени и даты.

Самые полезные для разработчика текстовые плагины

Как уже было сказано выше, сегодня в Фигма существует более 400 плагинов. Самыми полезными из них по мнению разработчиков считаются следующие.

Аdd number to text

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

• создайте поля в том количестве, которое вам необходимо;
• добавьте названия;
• выделите все области при помощи таблицы выбора, выскакивающей при нажатии ПКМ;
• выберите из списка плагин.

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

Change Text

Предназначен для поиска и замены слов, открывает всплывающие окна с двумя полями, в одном из которых задается искомое слово, в другом – новое значение. После пуска программы, происходит автозамена, и алгоритм поменяет первый запрос на второй. При подмене в нескольких полях, следует выбрать их отдельно и запустить работу плагина.

Content Buddy

Равно как и в предыдущем варианте производит замену текста. Однако данное действие можно производить не только со словами, но и с целыми предложениями. Для этого ПКМ щелкните по слою, в котором находится текст, откройте контекстное меню, а затем ПКМ нажмите на плагин.

Затем в открывшееся окошко введите нужный для замены блок и завершите работу. Система автоматически заменит указанную информацию.

Text Counts

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

Typograf

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

Немного подробностей о Фигма

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

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

Если вам интересна сфера IT-технологий, и у вас есть желание получить интересную и высокооплачиваемую профессию, обратите внимание на обучение, которое предлагается на наших курсах программирования DevEducation.