How to Type on a Path in Figma: Creative Text Effects

Straight text gets boring. Learning how to type on a path in Figma opens up creative options for logos, badges, and curved headlines that actually stand out.

Since Config 2025, Figma includes native text on path support. No plugins needed.

This guide walks you through creating vector paths, attaching text layers, and adjusting typography settings for clean results.

You’ll learn the exact steps for both the native method and plugin alternatives. Plus troubleshooting fixes for common issues like text flipping to the wrong side or fonts breaking on tight curves.

Takes about 3 minutes. Works in Figma Design and Figma Draw.

How to Type on a Path in Figma

Typing on a path in Figma is the process of creating text layers that follow vector shapes like curves, circles, or custom paths.

You need this when designing circular logos, badge designs, curved headlines, or any layout where text flows along non-linear shapes.

This guide covers 4 steps. Takes about 3 minutes. Works in both Figma Design and Figma Draw.

Since Config 2025, Figma includes native text on path support. No plugins required anymore.

Prerequisites

Before you start, make sure you have:

• Figma account (Free, Professional, Organization, or Enterprise plan)
• Can edit access to a Figma file
• A vector path already created, or basic knowledge of the Pen Tool
• Figma desktop app or browser with stable internet

The text on path feature works with any vector object. Ellipses, pen tool curves, even complex shapes from boolean operations.

If you’re working on user interface projects, this technique adds visual interest to headers, navigation elements, and decorative text.

Step One: How Do You Create a Vector Path for Your Text?

Select the Pen Tool (P) or any shape tool from the toolbar. Click and drag on the canvas to create anchor points with curved handles. Press Enter or double-click to complete the path.

Action Sequence

1. Pen Tool (P): Click to add points, drag to create bezier curves
2. Ellipse Tool (O): Hold Shift while dragging for perfect circles
3. Arc shapes: Use the Pen Tool with two anchor points and curved handles

For circular text like badge designs, the Ellipse Tool works best.

For wavy text effects or custom curves, stick with the Pen Tool.

Path Requirements

Your path needs visible stroke or fill. Figma won’t recognize paths with zero opacity.

Open paths work. Closed paths work. The text will follow whatever shape you create.

When you learn how to curve text in Figma, understanding path creation becomes second nature.

Purpose

This step establishes the baseline your text will follow. The path shape directly determines how your typography flows across the canvas.

Step Two: How Do You Add Text to the Path?

Select the Text Tool (T) from the toolbar. Hover your cursor over the vector path until the text on path icon appears. Click to create a new text layer and start typing.

Action Sequence

1. Text Tool (T): Select from toolbar or press T
2. Hover over path: Watch for the cursor to change to the text on path icon
3. Click once: Creates a text layer attached to the path
4. Type your content: Text automatically follows the curve

The text layer wraps around the path as you type. No manual rotation needed.

When you add text to a path, Figma transfers the vector object’s fill and effects to the text layer automatically.

Font Considerations

Not all fonts render perfectly on curved paths. Sans-serif fonts typically work better than decorative typefaces.

If you need specific typefaces, learn how to add fonts to Figma before starting your project.

Google Fonts are available directly in Figma. Local fonts require the desktop app or Font Helper.

Purpose

This step connects your text content to the vector path. The text layer becomes linked to the path geometry.

Step Three: How Do You Adjust the Text Position on the Path?

Use the blue handle on the text layer to change where text starts along the path. Access Flip text orientation in the Typography section of the right sidebar to move text to the opposite side.

Action Sequence

1. Blue handle: Drag to reposition text starting point
2. Typography section: Find Flip text orientation option in right sidebar
3. Alignment options: Adjust horizontal alignment (left, center, right)
4. Font properties: Modify size, spacing, and letter spacing as needed

The blue handle gives you precise control over text placement.

Dragging it clockwise or counter-clockwise shifts where your text begins on the path.

Typography Adjustments

Letter spacing often needs tweaking on curved text. Tight curves require more spacing between characters.

You can edit text in Figma at any point. Double-click the text layer to modify content.

Font size affects how text wraps around the path. Larger text may not fit on tighter curves.

Purpose

This step refines text placement and ensures proper readability along the curved baseline.

Step Four: How Do You Finalize the Text on Path Design?

Select the original vector path and remove or modify the stroke color if you want only the text visible. Apply fills and effects to the text layer through the right sidebar properties panel.

Action Sequence

1. Select path: Double-click to isolate the vector object
2. Stroke settings: Set stroke color to transparent or 0% opacity
3. Text layer effects: Add drop shadows, blurs, or color fills as needed
4. Group elements: Select both path and text, then press Ctrl+G (Windows) or Cmd+G (Mac)

Keeping the path invisible creates clean typography effects.

The text remains editable even after grouping.

Export Considerations

Text on path exports as vector in SVG format. Perfect for scalable logos and icons.

For web projects, you might need to export Figma to HTML with the curved text flattened.

PNG and JPG exports rasterize the text. Fine for social media, not ideal for print.

Purpose

This step polishes your design and prepares it for export or handoff to developers.

Alternative Method: Using the To Path Plugin

The To Path plugin works in older Figma versions without native text on path support. Install from the Figma Community plugins directory.

Plugin vs Native Comparison

| Feature | Native Method | To Path Plugin | | — | — | — | | Steps required | 4 steps | 5-6 steps | | Text editing | Fully editable | Requires re-linking | | Figma version | 2025 and later | Any version | | Installation | None | Plugin install required |

Use the native method when available. Faster workflow, better text editing.

Use the plugin for legacy files or when collaborating with teams on older Figma versions.

Other Plugin Options

The Arc plugin bends text in circular arcs. Good for simple curves, limited on complex paths.

The Curve Text plugin handles circles, squares, arches, and custom shapes.

Plugins create copies of your text. The original stays editable for updates.

Verification

Confirm your text on path worked correctly by checking these indicators:

• Text follows the vector path shape precisely
• Text layer appears in the Layers panel as text (not flattened vector)
• Double-clicking enables text editing mode
• Blue handle appears for repositioning

If you can edit the text content, the path link is active.

If the text converts to outlines, you’ve flattened it. Use undo in Figma (Ctrl+Z or Cmd+Z) to restore.

Troubleshooting

Text on Path Icon Does Not Appear

Issue: Hovering over the shape shows no text on path cursor.

Solution: Confirm the object is a vector path, not a rasterized image or flattened group. Enter edit mode on the shape by double-clicking.

Boolean operations sometimes break path recognition. Try flattening the shape first.

Text Appears on Wrong Side of Path

Issue: Text renders inside a circle instead of outside, or vice versa.

Solution: Select Flip text orientation in the Typography section of the right sidebar.

You can also drag the blue handle past the path midpoint to flip sides manually.

Font Does Not Render Correctly

Issue: Characters overlap, spacing looks wrong, or glyphs break on curves.

Solution: Switch to a different font family. Sans-serif fonts like Inter, Roboto, or Open Sans handle curves better than decorative typefaces.

Increase letter spacing for tight curves. Decrease for gentle arcs.

Text Disappears After Editing Path

Issue: Modifying anchor points causes text to vanish.

Solution: The text layer might have shifted off-canvas. Check the Layers panel to locate it, then reposition using the blue handle.

Extreme path modifications can break the text link. Recreate the text on path if needed.

Related Processes

Once you master text on path, explore these related Figma techniques:

• How to mask in Figma for clipping text into shapes
• How to make a gradient in Figma for colorful text effects
• How to use components in Figma for reusable curved text elements
• How to prototype in Figma for animating text on path

Curved text works great in logo designs, badge graphics, and hero image overlays.

For user experience projects, use curved text sparingly. Readability matters more than visual flair.

FAQ on How To Type On A Path In Figma

Does Figma have native text on path support?

Yes. Figma added native text on path at Config 2025. Select the Text Tool (T), hover over any vector path until the cursor changes, then click and type. No plugins required for current Figma versions.

What tools create paths for curved text?

Use the Pen Tool (P) for custom curves and wavy lines. Use the Ellipse Tool (O) for circular text. Any vector shape works, including rectangles, polygons, and boolean combinations.

How do I flip text to the other side of a path?

Select your text layer. Open the Typography section in the right sidebar. Click Flip text orientation. The text moves to the opposite side of the path instantly.

Can I edit text after placing it on a path?

Yes. Double-click the text layer to enter edit mode. Change content, font, size, or color anytime. The text stays linked to the path. Edits update automatically along the curve.

Why won’t the text on path icon appear?

The object isn’t a vector path. Rasterized images, flattened groups, and some boolean results don’t work. Double-click to enter edit mode on the shape, or recreate it with the Pen Tool.

Which fonts work best on curved paths?

Sans-serif fonts like Inter, Roboto, and Open Sans render cleanly on curves. Decorative and script fonts often break on tight paths. Increase letter spacing for better readability on sharp curves.

Do I need plugins for text on path in Figma?

Not anymore. The native feature handles most use cases. Plugins like To Path and Arc still work for older Figma versions or specific effects the native tool doesn’t cover.

How do I remove the path line but keep the text?

Select the vector path (not the text). Set stroke color to transparent or 0% opacity in the right sidebar. The text remains visible and editable. The path becomes invisible.

Can I animate text on a path in Figma?

Figma prototyping doesn’t animate text along paths directly. You can create multiple frames with different text positions and use Smart Animate for basic movement effects between states.

How do I export curved text from Figma?

Export as SVG for scalable vector output. Text stays as vectors, perfect for logos. PNG and JPG rasterize the text. For web use, consider making SVG files that scale without quality loss.

Conclusion

You now know how to type on a path in Figma using the native text tool and plugin alternatives. The process takes minutes once you understand vector path creation and text layer positioning.

Figma Draw made curved typography accessible without third-party tools. Select your path, hover with the Text Tool, click, and type.

Adjust placement with the blue handle. Flip orientation in the Typography panel. Tweak letter spacing for tight curves.

Use this technique for circular logos, badge designs, and arc text effects that break away from standard horizontal layouts.

Sans-serif fonts work best. Keep paths clean. Export as vector graphics when scalability matters.

Practice with the Pen Tool and Ellipse Tool. The more paths you create, the faster your workflow becomes.