Как перевести текст в вектор или кривые в фигме

Аватар автора курса

Автор — Ян Агеенко

Дизайнер с 20-летним опытом работы. Арт-директор в собственной студии. Основатель Гильдии дизайнеров, автор книги «Как стать дизайнером с нуля»

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

Видео-версия урока

Выбрать плеер:

Как в фигме преобразовать текст в кривые

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

Горячие клавиши для превращения текста в вектор

Чтобы ускорить процесс, также можно воспользоваться горячими клавишами. На Windows функция Flatten выполняется быстрым сочетанием Ctrl+E, на Mac OS — Cmd+Е.

Редактирование текста после перевода в кривые

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

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

Потянув за точку, можно переместить её в другое место, тем самым исказив изначальный рисунок шрифта. Вносить изменения в кривые можно такими инструментами, как перо (Pen Tool) или Bend Tool. В результате можно создавать необычные и интересные формы, превращая текст в полноценные шрифтовые композиции. Этот прием часто используется графическими и веб-дизайнерами при разработке логотипов, баннеров и прочей графики.

Преобразование текста в вектор с помощью плагинов

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

Так, например плагин с названием Warp, позволяет автоматически искажать текст в форме волны, трапеции или треугольника, что довольно сложно было бы сделать вручную.

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

Как в фигме превратить текст в растровую картинку

Если же вам нужно превратить текст не в векторную, а в растровую картинку, в фигме есть соответствующая функция. Находится она в главном меню программы логотипа фигмы (в левом верхнем углу) в разделе Object, затем Rasterize Selection. После применения данной функции текст превратится в обычное растровое (пиксельное) изображение со всеми его свойствами.

Другие полезные уроки по фигме

Графический редактор Фигма — бесплатная онлайн программа для дизайна на русском

Сегодня мы познакомимся с программой Figma — графическим редактором для дизайна сайтов и мобильных приложений. Узнаем, как бесплатно использовать её онлайн, как её скачать и установить на свой компьютер (ПК), перевести на русский язык, сделать для неё темную или светлую тему.

Как сделать векторный логотип в фигме — нарисовать графику и создать текстовую часть

Урок о том, как нарисовать логотип в программе фигма. Вы узнаете, как сделать графическую и текстовую часть логотипа, создать палитру цветов, сохранить и скачать логотип в векторном или растровом формате. Рекомендую проходить этот урок в видео-формате — там я пошагово показываю как сделать логотип в фигме на конкретном примере.

Размеры визиток, листов А4, сайтов, баннеров, карточек и других фреймов в фигме

В этом уроке мы рассмотрим наиболее популярные размеры фреймов для дизайна в фигме. Разберемся с размерами для мобильных приложений, сайтов, визиток, листов А3, А4, А5 и других форматов. Рекомендую посмотреть видео-версию урока, в ней всё будет показано максимально наглядно и на конкретных примерах.