Как изогнуть текст в фигме дугой

Варианты изгиба текста в фигме

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

В зависимости от нужного варианта мы будем использовать разные плагины, а значит и методы работы. Но в любом случае, первым делом нам нужно создать сам текст, который мы будем в дальнейшем изгибать. Сделать это можно с помощью интсрумента Т:

Первый вариант изогнутого по дуге текста

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

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

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

Второй вариант изогнутого по дуге текста

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

Когда эллипс и текстовый слой созданы, одновременно выделяем их и запускаем плагин To Path (по аналогии с тем, как запускали плагин Warp в предыдущем примере). В появившемся окне нажимаем кнопку Link, тем самым связывая эллипс и текст. Чтобы переместить буквы в нужное нам место, задаем соответствующее число в поле Offset (чем оно больше, тем сильнее будет смещение по часовой стрелке). Также при желании можно воспользоваться кнопками выравнивания текста или смены направления (reverse direction). Вот что может получиться в результате:

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