Плагин для Фигмы создан, чтобы улучшить функционал сервиса и сделать разработку шаблона более быстрым. Именно отсутствие расширения для системы было недостатком сервиса, которое неоднократно подвергалось критике дизайнеров. Но сейчас времена изменились.
Разработчики прислушались к мнению аудитории и в 2019 году показали новое обновление редактора в режиме бета-тестирования. Улучшенная версия имеет поддержку плагинов, а это значит, что каждый, кто владеет java script и знает html, способен разработать свое расширение. Все функции работают через API, то есть новую разработку можно легко установить и удалить. Каждый установленный модуль открывает дополнительные возможности сервиса Фигма. В этой статье мы перечислим способы улучшить функционал сервиса.
Полезные плагины
С момента обновления функции API, программисты стали добавлять новые расширения, которые помогают ускорять процесс разработки макета для сайта. На 2020 год в сервисе уже было добавлено 420 плагинов. Перечислим самые полезные из них.
№1. Аdd number to text – плагин Фигма текст
В сервисе присутствует расширение для оформления контентной части. Допустим, при заполнении карточки товара требуется перечислить характеристики продукта, в таком случае вам понадобится plugin “Аdd number to text”. Он способен легко создавать нумерованные или алфавитные списки.
Работает он следующим образом: для начала нужно создать определенное количество полей, число зависит от того, сколько характеристик в одной карточке. Добавим название, потом выделяем все области, нажимаем правой кнопкой мыши и в раскрывающемся списке выбираем “Add number to text”.
Появится всплывающее окно и, используя спецсимволы, туда можно вносить изменения.
Списки:
- $n — нумерованный
- $a – алфавитный, при указании большой буквы – алфавит будет верхнего регистра.
- $r – римские цифры
- $& — указать первоначальное название без изменений.
Дополнительные команды, это арифметические формулы, при их использовании можно высчитать определенное значение. Существуют математические функции, такие как random и round.
С помощью кнопок, можно быстро вызвать нужную, команду. Пример ниже.
Параметры под кнопками, означают способ отображения. Установив флажок в разделе “Increase number” перечисление будет наоборот, начиная с максимальной позиции и заканчивая минимальной, например 5,4,3,2,1.
Start at – это стартовая позиция нашего списка, здесь мы указываем число, с него будет начинаться перечисление. Если присутствуют буквенные значения, то они также будут стартовать с указанной позиции. Укажем – 3, то отобразиться третья буква английского алфавита.
Формирование списка завершается кнопкой Apple. После того как список был сформирован, то рекомендуется его объединить в целый объект. Делается это с помощью TextCutter, у него присутствует подсписок, там два значения Join (присоединить) и Split (разбить на строки). Чтобы объединить все слои нужно их выделить, потом нажать правой кнопкой мыши и воспользоваться TextCutter, как показано ниже. Сначала убедитесь, что он установлен, взять его можно с официального источника.
Помимо нумерации, можно добавить и маркеры (точки), делается это с помощью Simple Bullets. В отличие от “Add number to text”, здесь можно разместить все в одном текстовом поле. Чтобы поставить точку следует создать несколько строк, потом выбрать из контекстного меню – Simple Bullets, никаких дополнительных параметров, он не содержит.
№2. Change Text – плагин Фигма текст
Находит и заменяет слова. При запуске открывается всплывающее окно с двумя полями. В первом задаем, слово которое нужно найти, во втором пишем новое значение, потом нажимаем Update и произойдет автоматическая замена, алгоритм обнаружит схожесть с первым запросом и поменяет его на второй. Если требуется произвести подмену в нескольких текстовых полях, тогда выбираем их мышкой и аналогично производим действия.
№3. Content Buddy
Как и предыдущий вариант заменяет text, но действие происходит не конкретно со словом, а с предложением целиком. Щелкаем по слою, где есть текст, нажимаем правую кнопку мыши, открываем контекстное меню и кликаем по Content Buddy.
Дальше нажимаем на текстовый блок и в строке “Replace To”, добавляем новой контент. После этого жмем Replace, замена завершена.
№4. Text Counts
Подсчитывает символы и выводит данные, сколько букв, слов и количество пробелов. Чтобы получить статистику нужно перейти внутрь слоя, выделить text и потом уже воспользоваться плагином.
№5. Typograf
Преобразует предложения в хороший типографический текст и заменяет некоторые символы. Например, если написать два минуса подряд, а потом использовать Typograf, то получится длинное тире. Вот еще несколько примеров.
“Типограф” работает в фоновом режиме, меню настроек нет, просто выберите описание которое хотите подвергнуть типографической правке и через контекстное меню вызовите “Typograf”, после этого некоторые знаки заменяться на спецсимволы.
№6. Lorem Ipsum
Если требуется быстро подобрать описание в контейнерах, то можно воспользоваться Lorem, он умеет добавлять небольшие абзацы в слои. Данный plugin существует в двух видах “обычный” и “Generator”. В первом случае потребуется создать текстовые поля, чтобы туда сгенерировать content, а “Генератор” это делает в автоматическом режиме. Чтобы воспользоваться обоими инструментами, нужно перейти в меню и там их выбрать. На скриншоте они обозначены цифрами.
- Открывается окно, где нужно выбрать текстовый слой, дальше нажимаем кнопку Generate. В параметрах можно указать цифры, они означают объем генерируемого контента.
- Lorem Ipsum Generator – открываются всплывающие настройки, где нужно указать “количество предложений”, а потом нажать Create. После этого строки автоматически создадутся.
Два варианта Lorem Ipsum, подойдут дизайнерам для быстрого заполнения макета текстом и просмотра верстки.
№7. Nisa Text Splitter
Умеет разделять и объединять текстовые поля. Допустим, существует одна общая колонка, которая нужно разбить на две колонки и вторую расположить рядом.
С этой задачей справится Nisa. Чтобы сделать разделение потребуется создать разрыв в списке, как показано на скриншоте. Для этого установите курсор в строке и нажмите Enter.
Вызываем настройки с помощью пункта меню “Nisa Text Splitter”, и нажимаем Columns как показано ниже.
Остальные действия Join(Объединить два поля в одно), alignment (выровнять по горизонтали и вертикали). Также можно произвести разные манипуляции (сортировка, поменять местами выделенные столбцы “Reverse”).
№8. Morph
Предназначен для создания интересных эффектов, например: Skeuo, Neon, Glitch, Reflect, Glassy и Gradient. Преобразование происходит в несколько кликов. Выберите любой объект – квадрат, окружность, слой, содержащий text, и примените над ним следующие действия.
В итоге в панели Layers, создадутся слои с эффектами, и вы увидите результат. Всего несколько щелчков, чтобы получить красивую надпись.
Для быстрого вызова существует меню в списке. Но если требуется графически оценить, как будет выглядеть эффект, в этом случае следует нажать “Open morph”. При выборе эффекта откроется набор кнопок и ползунков, которые можно менять на свое усмотрение и сразу видеть изменения.
“Морф” подойдет для тех, кому нужно быстро украсить макет и подобрать необычное графическое оформление. Все эффекты 100 % бесплатные, регистрации тоже не требуется.
Продолжение статьи – в блоге Convert Monster.
