Как сделать текст по кругу в фигме и какие у этого способа ограничения?

Текст по кругу в фигме делают встроенным инструментом Text on a path: нарисуйте круг, выберите этот инструмент на панели, наведите курсор на контур круга и начните печатать. Буквы сами лягут по окружности, а синий маркер задаёт, откуда начинается надпись. Справка Figma описывает эту функцию для Figma Design и отмечает, что она есть на всех тарифах. Коротко порядок такой:

1. Нарисуйте эллипс инструментом Ellipse, удерживая Shift, чтобы получился ровный круг.
2. Выберите на панели инструментов Text on a path.
3. Подведите указатель к линии круга и дождитесь, пока он сменит вид.
4. Щёлкните и наберите текст.
5. Синим маркером сдвиньте начало, а кнопкой Flip text orientation переверните надпись на другую сторону контура.

Надпись остаётся живым текстом: шрифт, размер и интервал меняются в разделе Typography справа. Ограничения начинаются там, где нужен фон под буквами, экспорт в чужие программы или та же функция внутри Figma Slides.

Нужна не одна надпись по кругу, а целая презентация к защите или встрече? Попробуйте генератор презентаций SimpleSlide. Слайды генерируются с помощью ИИ примерно за 1 минуту. Достаточно ввести тему или вставить свой текст, и вы получите готовый шаблон, который легко отредактировать или сразу скачать в PPTX или PDF.

Есть ли в Figma встроенный текст по контуру?

Что говорит справка Figma?

Да, есть. Долгое время дизайнерам приходилось вращать каждую букву вручную или ставить сторонние плагины, а теперь в статье Guide to text in Figma Design появился отдельный раздел Type text on a path. Его суть уложена в одну фразу:

Вы можете создавать текстовые слои, которые следуют по контуру векторного объекта, например фигуры или мазка кисти (перевод наш).

Оригинал: «You can create text layers that follow the path of a vector object, such as a shape or brush stroke.»

Там же сказано, для чего это нужно: текст, который течёт по кривым, окружностям и произвольным формам. Значит, кроме круга подходят волнистая линия, дуга, спираль из инструмента Pen и даже штрих кистью.

В Figma Design или в Figma Slides?

Это важное уточнение. Справка описывает инструмент в разделе Figma Design, то есть в редакторе макетов. Figma Slides, редактор презентаций, построен на той же платформе и в режиме дизайна даёт доступ к части функций Design, но отдельного описания текста по контуру для Slides в справке нет. Поэтому надёжный порядок такой: сделать надпись в файле Figma Design, а в презентацию переносить уже готовый элемент и проверять, что он отображается так же. Как устроена работа со слайдами в Figma, мы разбирали в статье о том, как сделать презентацию в фигме.

Как сделать текст по кругу в фигме по шагам?

Как подготовить круг?

Начинается всё с фигуры. Выберите Ellipse на панели инструментов или нажмите клавишу O, затем протяните фигуру на холсте с зажатым Shift. Без Shift получится овал, и надпись ляжет по нему неравномерно: на узких участках буквы будут теснее. Размер круга сразу задаёт диаметр надписи, поэтому прикиньте, сколько слов должно поместиться. Короткое слово на большом круге займёт маленькую дугу, а длинная фраза на маленьком закроет окружность и начнёт наезжать сама на себя.

Как набрать надпись на контуре?

Дальше по справке Figma:

1. Выберите инструмент Text on a path на панели инструментов.
2. Наведите курсор на контур векторного объекта, пока не появится специальный курсор.
3. Щёлкните, чтобы создать текстовый слой, и начните печатать.
4. Следите, как слой обвивает выбранный контур по мере набора.
5. Перетащите синий маркер, чтобы задать точку начала.
6. Чтобы перенести буквы на другую сторону линии, выберите Flip text orientation в разделе Typography правой панели.

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

Как поставить две подписи сверху и снизу круга?

Классическая печать или значок обычно несут две строки: название по верхней дуге и девиз или год по нижней. Одной надписью на одном контуре этого не добиться, потому что вторая половина фразы окажется вверх ногами. Решение простое. Сделайте копию круга точно поверх первого, сгруппируйте их, чтобы не разъезжались, и наберите на каждом свою строку. Нижнюю переверните на внутреннюю сторону кнопкой из раздела Typography, а её начало сдвиньте так, чтобы середина фразы пришлась на нижнюю точку окружности. Если буквы нижней строки оказались ближе к центру, чем верхние, слегка увеличьте второй круг, тогда обе строки встанут на одно визуальное кольцо.

Какие ограничения у текста по кругу в Figma?

Можно ли сделать фон под надписью?

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

Что ещё стоит учитывать?

• Овал вместо круга растягивает расстояние между буквами неравномерно.
• Очень маленький диаметр при крупном кегле даёт рваную окружность, буквы будто расходятся веером.
• Справка описывает работу инструмента в Figma Design, поведение в Figma Slides в ней отдельно не разобрано.
• В API плагинов этот тип слоя называется TextPathNode и помечен как бета, так что плагины для таких надписей могут вести себя нестабильно.
• При экспорте в чужие форматы надпись может зависеть от шрифта, если оставить её текстом.

Почему инструмента нет на панели?

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

Вторая причина в типе файла. Описание относится к Figma Design. В доске FigJam и в редакторе Slides набор инструментов другой. Третья причина банальна: устаревшее настольное приложение. Обновите его или откройте файл в браузере. Если и после этого инструмента не видно, поищите его через быстрый поиск команд по названию.

С марта 2022 года Figma не продаёт платные тарифы новым клиентам из России и не переводит бесплатный план Starter на платный. Доступ, по официальной справке, ограничен только для аккаунтов под санкциями США, Великобритании или ЕС. Инструмент для текста по контуру при этом доступен на всех тарифах, включая бесплатный.

Как перевести надпись в векторы и зачем это делать?

Как работает команда Flatten?

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

1. Сделайте копию слоя с надписью, чтобы сохранить редактируемый вариант.
2. Выделите копию и щёлкните правой кнопкой.
3. Выберите Flatten или нажмите Option+Shift+F на Mac, Alt+Shift+F на Windows.
4. Нажмите Enter, чтобы открыть режим редактирования векторов и поправить отдельные буквы.

Что теряется после перевода в контуры?

Справка прямо называет обе команды, Flatten и обводку контура, разрушающими. После них текст больше не правится как текст: поменять слово, шрифт или размер уже не выйдет. Отменить ошибку можно сочетанием Command+Z или Control+Z или через историю версий файла. Поэтому редактируемую копию лучше хранить рядом, на отдельном фрейме или скрытым слоем.

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

Какой формат выбрать?

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

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

Как перенести надпись в презентацию?

Проще всего выгрузить надпись картинкой и вставить на слайд. Если презентация делается в Figma Slides, проверьте результат в режиме показа и после выгрузки в PPTX: при экспорте из Slides часть оформления может упроститься. Что именно меняется при выгрузке, мы описали в материале о том, как скачать презентацию из фигмы в PDF или PPTX.

Где пригодится круговая надпись и как её оформить?

Для каких задач подходит такой приём?

Буквы по окружности сразу притягивают взгляд, поэтому их берут туда, где нужен акцент, а не туда, где нужно много читать:

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

Абзац текста по кругу не читается. Держитесь одной короткой фразы, а всё, что длиннее пяти-шести слов, переносите в обычный текстовый блок рядом.

Какой шрифт выбрать для дуги?

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

Как сделать надпись по кругу без инструмента Text on a path?

Можно ли повернуть буквы вручную?

Можно, и этот способ до сих пор пригодится для коротких слов или особого ритма, когда буквы стоят с разными промежутками. Каждую букву делают отдельным текстовым слоем, ставят на верхнюю точку круга и поворачивают вокруг центра на одинаковый угол. Для расчёта поделите 360 градусов на число букв: у слова из 12 символов шаг 30 градусов. Это долго, но даёт полный контроль над каждым знаком. Чтобы буквы вращались вокруг одной точки, сначала сгруппируйте каждую с невидимым квадратом размером с круг, тогда центр поворота совпадёт с центром окружности.

Стоит ли ставить плагин?

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

Как сделать то же самое в PowerPoint?

Если Figma под рукой нет, похожий эффект даёт WordArt в PowerPoint: на вкладке «Формат фигуры» в «Текстовых эффектах» есть «Преобразовать» и раздел «По контуру» с вариантом круга. Для фигур с углами Microsoft советует другой ход:

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

Точность у такого способа ниже: дуга WordArt подстраивается под рамку объекта, и ровный круг получается не с первого раза. Для логотипа или значка Figma удобнее, а для быстрой подписи на слайде хватит и PowerPoint. Если надпись получилась мелкой и её нужно увеличить, пригодятся приёмы из статьи о том, как увеличить текст в фигме.