Плагины для работы с текстом фигме, его изменения и искажения

Где находятся плагины в фигме

Найти и запустить нужный вам плагин можно прямо в рабочем файле. Нажмите на иконку Actions на панели инструментов, перейдите на вкладку Plugins & Widgets, в строке поиска напишите название требуемого плагина и кликните на него.

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

Плагин для текста по кругу или волне в фигме

Один из наиболее часто встречающихся запросов, когда речь идет об изменении текста в фигме, связан с его расположением по кругу. В для этой задачи существует специальный плагин To Path. Чтобы им воспользоваться, предварительно нужно создать слой с текстом и фигуру-круг. Перед запуском плагина выделить оба эти элемента. Далее в появившемся окне настроить параметры (отступы, выравнивания, ориентацию текста и так далее). Если не удалять исходные слои, а скрыть их, можно будет в дальнейшем менять дизайн уже созданного элемента с текстом по кругу.

Кстати говоря, этот плагин подходит не только для размещения текста по кругу или полукругу, но и для того, чтобы написать его по любой другой траектории или фигуре — кривой, угловатой или любой другой произвольной формы. Для того чтобы добиться этого эффекта, всё так же нужно создать текстовый слой и векторный слой, по которому мы хотим написать наш текст. Сделать это можно с помощью инструмента перо. Вот как может выглядеть текст-волна, созданный с помощью плагина To Path в фигме:

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

Но не смотря на это, плагин To Path по праву можно назвать одним из самых полезных и популярных из всех, что есть в фигме для работы с текстом и его изменения.

Плагин для искажения и деформации текста в фигме

Еще одна популярная задача, часто встающая перед дизайнерами в фигме — это различные деформации, изгибы и искривления текста. Лучше всего с этой задачей справляется плагин Warp.

Он достаточно прост в использовании и позволяет исказить текст разными способами: по дуге, по арке, по волне, по форме домика, по перспективе, по параллелепипеду и так далее. Также с помощью ключевых точек, обозначенных стрелочками, можно делать произвольные искажения. Функция isSmooth делает искажения более плавными, а ползунок Strength задает их силу.

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

Плагин для создания текста-рыбы в фигме

Часто у дизайнера нет в наличии готовых текстов для своего проекта. Тогда возникает необходимость использовать текст-наполнитель, или как говорят на дизайнерском сленге — рыбу. К счастью, специально для этой цели существует плагин Lorem Ipsum, который быстро и просто генерирует нужное количество текста-заполнителя для вашего проекта.

Этот плагин может создать для вас заданное количество предложений или сгенерировать количество текста ровно под размер выбранного текстового фрейма. Кроме обычного, классического Lorem Ipsum, можно выбрать и другие варианты, содержащие бессмысленные тексты на определенные темы — офис, крипто и так далее.

В графе Fake Data можно сгенерировать данные о людях или компаниях, что также часто бывает полезно при создании дизайна страниц профилей или контактов.

Интересно, что данный плагин позволяет вставлять не только текст, но и изображения. Если выделить обычный прямоугольник и запустить его, можно будет найти и вставить в свой проект картинку:

Плагин-типограф

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

Не рекомендуем использовать этот плагин при работе с английским и другими иностранными языками, так как принципы типографики в этом плагине создавались для применения на русском.

Плагин с фотошопом прямо в фигме

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