How to Curve Text in Figma

When you add text to a path, Figma moves the vector object's fill and effects onto the new text layer. A circle filled orange gives you orange text. That surprises people who expected to keep the coloured shape underneath. If you want both the shape and the curved text, duplicate the shape first and put the text on the copy. Figma's own tutorial for this feature uses exactly that approach.

After that, the text layer's fill and effects are normal settings in the right sidebar, so you can change them like any other text.

• No path under the cursor. The tool only attaches when you hover over the edge of a vector object and see the text on a path cursor. If that cursor doesn't appear, move closer to the outline before you click.
• The text runs on the wrong side. Use Flip text orientation in Typography rather than rotating the layer.
• The text starts in an odd place. Drag the blue handle. On a circle, the start point decides where the words sit around the ring.
• The text is too long for the path. Reduce the font size or letter spacing, or make the shape bigger.

Text on a path is available on every plan. In Figma's Draw tutorial, hovering the edge of a path with the regular Text tool (T) also brings up the text on a path cursor, so try that if you don't see a separate tool.

Curved text reads best short: a badge label, a stamp or a logo ring. Letter spacing matters more on a curve than on a straight line, because the letters fan out on the outside of a circle and bunch up on the inside. Adjust it with ⌥< / ⌥> on Mac or Alt+< / Alt+> on Windows; Figma text shortcuts lists the rest. For line height, weight and spacing settings, see how to change line height in Figma.

If you plan to export curved text as SVG for the web, keep in mind that SVG export outlines text by default. For fonts that won't load in the first place, see fonts not showing in Figma.