Сделать текст по кругу в Figma можно с помощью плагинов, так как встроенного инструмента для «текста по кругу» (как, например, в Illustrator) в Figma нет. Ниже — максимально подробный и пошаговый гайд, включая как ручной способ, так и с использованием плагина.
✅ Способ 1. С помощью плагина «Arc Text» (или аналога)
🔧 Установка плагина:
Открой Figma.
Нажми правой кнопкой мыши на холсте или в пустом месте → выбери «Plugins» → «Browse Plugins in Community».
В поиске вбей «Arc Text» или «Circle Text».
Найди плагин (например, «Arc» от Dave Williames) и нажми «Install».
🚀 Как использовать:
Выдели текстовый объект, который хочешь изогнуть.
Правый клик → Plugins → Arc (или название плагина).
Появится панель плагина.
Настрой параметры:
Radius (радиус круга) — чем меньше, тем круче изгиб.
Arc (градусы дуги) — например, 360 для полного круга.
Direction — направление (вверх или вниз).
Spacing — интервал между буквами.
Некоторые плагины позволяют инвертировать текст (внутрь/наружу круга).
Нажми «Apply».
📝 Важно: текст преобразуется в векторные кривые (уже не редактируется как обычный текст). Сделай копию оригинального текста, если вдруг понадобятся правки.
🔄 Способ 2. Ручной способ — по направляющей окружности
Этот способ полезен, если не хочешь использовать плагины.
🔨 Что нужно:
Текст.
Окружность (как направляющая).
Вращение каждой буквы вручную.
Пошагово:
Нарисуй окружность инструментом Ellipse (O) — это будет направляющая.
Раздели фразу на отдельные буквы: для этого создай отдельный текстовый объект на каждую букву.
Расположи буквы по кругу:
Поставь каждую букву на окружность, как по часовой стрелке.
Используй инструмент Rotate (R): вращай каждую букву так, чтобы она «смотрела» наружу круга.
Угол поворота можно рассчитать вручную или с помощью формулы:
Настрой интервал между буквами.
Когда всё будет выровнено, можно удалить окружность (если она нужна была только как направляющая).
🧠 Совет: удерживай Shift
при повороте объектов, чтобы делать точный угол поворота с шагом в 15°.
🔁 Альтернативные плагины:
Если плагин Arc не устраивает, вот другие варианты:
Название | Возможности |
---|---|
«Circle Text» | Простой плагин, который тоже распределяет текст по кругу. |
«SkewDatText» | Расширенный контроль над искажением и дугами. |
«Text on Path» | Позволяет размещать текст по произвольной кривой (например, синусоиде, волне, кругу). |
💡 Фишки и советы:
Используй кривую в виде круга как направляющую, чтобы потом выровнять буквы с помощью Smart Guides.
Работай в Component — можно быстро вносить изменения.
В некоторых плагинах есть опция сохранить исходный текст (не превращая в вектор).
🧩 Заключение
Подход | Плюсы | Минусы |
---|---|---|
Плагин | Быстро, точно, удобно | Нужно установить, текст превращается в кривые |
Вручную | Полный контроль, редактируемый текст | Очень трудоемко, особенно при длинных фразах |
Если тебе важно качество и скорость — рекомендую использовать плагин (например, Arc).
Если тебе нужна максимальная гибкость и редактируемость, можешь попробовать ручной способ (особенно на коротких словах или логотипах).
Хочешь — могу показать на примере: сделаю макет круга с текстом в Figma и дам тебе ссылку или скрин.