Figma Draw includes a layer type called text on a path. Characters follow a curve instead of sitting on a straight baseline, and the whole thing stays live text.
It ships inside Figma Design, and it is fairly clearly Figma’s answer to the curved-type tool Illustrator has had for about two decades.
Worth knowing before you build anything around it: Figma’s plugin documentation still flags text on a path as a beta feature, even though the broader Figma Draw toolset reached general availability at Config 2025 (Forrester, 2025).
What Is Text on a Path in Figma?
Every character binds to a vector path and positions itself along that geometry. Move the path, the letters move with it.
Curving text along a shape used to mean installing a plugin. The native tool in Figma Draw handles the bend on its own now.
People mix it up with text wrapped inside a closed shape, which is a different thing. That resizes to fit a container. This traces an outline.
- Built-in layer type, not a plugin workaround
- Not outlined type pasted in from another app
- And not paragraph text auto-fitting inside a frame
In Figma’s plugin documentation the layer type is named TextPathNode, kept separate from a standard text node.
Where Do You Find Text on a Path in Figma?
Look inside Figma Draw, the illustration toolset built into Figma Design.
The beta label in Figma’s developer docs is not decorative. Behavior can shift between releases, which matters if you are building a component library on top of it.
Some dates, since the rollout was spread out:
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →- Figma Draw launched at Config 2025 in San Francisco on May 7, 2025, alongside three other new products (Figma, 2025 press release)
- The event drew 8,500 members of Figma’s global community in person (Figma, 2025 press release)
- Designers first requested path-following text back on August 27, 2021, per Figma’s feature request forum
- Programmatic access through the plugin API followed in Update 123, dated January 26, 2026 (Figma developer documentation)
Auto layout landed in Draw around the same stretch of updates, so curved text layers can sit inside responsive frames without breaking.
How Does Text on a Path Work in Figma?
The text layer binds to the geometry of a vector path. Each character then positions itself along that curve automatically.
Starting the binding is quick. Drag on empty canvas and you get a circle with text already attached, one motion, nothing to set up first. If a path already exists, hover it until the cursor switches to the text on a path icon, then click and type.
Swapping the font family works the same way it does on any text layer. Fill and font size can still change per character range.
Why Path Direction Determines Inside or Outside Placement
The direction a path was drawn in decides whether letters sit on the outer edge of a shape or curl along the inner edge.
Figma’s support team confirms this runs through a single toggle, Flip text orientation, tucked into the Typography section of the right sidebar.
No separate direction tool exists. The toggle is the entire mechanism.
Which Vector Paths Can You Attach Text To?
Anything in Figma’s vector network will take text. Shape, line, hand-drawn squiggle, it does not matter much.
| Path type | Created with | Text wraps |
|---|---|---|
| Open path | Pen tool or Line tool | Along the visible stroke only |
| Closed path | Pen tool or Shape builder | Around the full perimeter |
| Ellipse or circle | Ellipse tool | Around the full loop |
The plugin API spells out the range. The createTextPath method accepts a vector node, a line node, or shape nodes like rectangle, ellipse, polygon, and star.
Open Paths and Custom Curves
Text on an open path drawn with the Pen tool or Line tool runs along the visible length and stops wherever the stroke ends.
- Straight lines give you evenly spaced letters, no distortion at all
- Hand-drawn curves are less forgiving, since a tight bend stretches or compresses whatever sits on it
Paths with dozens of anchor points tend to squeeze character spacing near each tight corner. Letter position follows segment length rather than the visual curve, which is not obvious until you see it happen.
Closed Paths, Circles, and Ellipses
Closed paths wrap text all the way around. That is why circular badges and stamp designs lean on this shape type more than anything else.
- The Ellipse tool is the fastest route to a clean circle or oval for a badge
- Shape builder combines basic shapes into a custom closed outline before any text goes on it
- Union, subtract, or intersect through boolean operations if you need two shapes merged into one closed path first
- Lasso selection picks freeform regions in Figma Draw that can then become a closed path
What Are the Steps to Type on a Path in Figma?
The process from blank canvas to curved type:
- Draw the path using the Pen tool, Line tool, or Ellipse tool
- Select the text on a path tool from the toolbar, or press T for the standard text tool
- Hover the path until the text on a path cursor appears
- Click the path edge and start typing
- Drag the blue handle to move where the text begins
- Open the Typography section in the right sidebar to flip orientation, resize, or change the font
Figma’s own tutorial library uses exactly this flow to wrap the line “Bake it till you make it” around an offset copy of the post’s circular photo frame, in a bakery-themed social media project. The knife, fork, and spoon illustrations from that same tutorial appear earlier as a background pattern fill, not on the text path.
That single keystroke is one of dozens of keyboard shortcuts built into Figma, and it works from anywhere on the canvas.
How Do You Move and Offset Text Along a Path?
Offset controls where along the path the text begins. It does not touch how big or small the letters render.
The plugin API stores this as a number between 0 and 1, marking a position along the starting segment of the path (Figma developer documentation).
- Drag the blue handle along the path on canvas when you just want to eyeball it
- Or set the starting position through the plugin API, which is the only sane option once you are placing dozens of layers at the same spot
Overshooting is common on a short path. Undoing the last action snaps the handle back without touching the typed characters.
Resizing the path afterward shifts the relative position too, since offset reads as a fraction of the path’s total length rather than a fixed distance.
Can You Still Edit the Path After Adding Text?
Yes. The path stays fully editable after text attaches, and Figma keeps the two as separate layers now.
Earlier versions combined text and vector into one tangled layer. Double-clicking would open character editing when what you actually wanted was the anchor points, which was maddening.
- Double-click the layer to change characters, font, or size
- To reach the anchor points, select the layer and choose Edit object
Move an anchor point and the attached text reflows on its own. Letters stay glued to the new curve, nothing gets retyped.
Character-level changes work the same as editing text in Figma anywhere else. The curve never enters into that process.
How Do You Align and Format Text on a Path?
There is alignment along the curve, and then there is alignment relative to the curve’s baseline. Those are separate controls and it takes a minute to stop confusing them.
Horizontal gives you the usual left, center, right, justified. Vertical adds top, center, bottom.
| Axis | Options | Controls |
|---|---|---|
| Horizontal | Left, center, right, justified | Where letters start or spread along the path |
| Vertical | Top, center, bottom | Whether letters float above, sit on, or hang below the line |
Justified stretches letter spacing to fill the entire path length. On a closed loop like a badge it reads cleanest by a wide margin.
Left or right alignment anchors the text to one end instead, which is what you want when a tagline needs to trail off a longer open curve.
All of it lives in the Typography section of the right sidebar, next to the same font and size controls used on regular text layers.
Should You Use Figma’s Native Feature, a Plugin, or Illustrator?
Curved type is reachable a few different ways, and each one costs you something.
| Method | Cost | Editable after |
|---|---|---|
| Figma native | Included in any Figma seat, Starter or Professional | Yes, live text and path layers |
| To Path plugin | Free, requires plugin install | Depends on the plugin’s own link step |
| Illustrator Type on a Path | Requires a Creative Cloud subscription | Yes, inside Illustrator only |
Native Feature vs the To Path Plugin
The plugin came first and still has a job on older Figma versions, or on teams that never turned Draw on.
The native tool has no install step and works in any Figma Design file. Text and path stay live after linking. It is still beta, so behavior can shift on you between updates.
The plugin runs without Figma Draw enabled, which is its main argument. It is community built and maintained rather than shipped by Figma, and every link means selecting both layers and pressing Link again. That gets old fast on a file with twenty badges in it.
The choice rarely comes down to Figma’s free versus paid tiers, since the native tool behaves the same on a Starter file as it does on a Professional seat.
Figma vs Adobe Illustrator’s Type on a Path Tool
Adobe’s own pricing page lists the Creative Cloud Pro bundle, which includes Illustrator, at $69.99 a month for individual subscribers on the annual, billed-monthly plan, with new subscribers eligible for a discounted $34.99 a month for the first three months. Students and teachers get a separate, steeper discount on the same bundle: $19.99 a month for the first year, rising to $39.99 a month after that (Adobe, 2026).
Illustrator buries its version under Type, then Type on a Path, then Type on a Path Options. Three levels deep for something you use constantly.
What you get for the digging is finer control. Stretch, spacing, and flip all sit in a dedicated options panel that Figma has not matched yet. Figma’s argument is simpler: no second app, no outline-and-paste step to get the curved type back into the design file where it belongs.
When Should You Avoid Text on a Path in Figma?
Long paragraphs do not belong on a curve. Short lines only. Taglines, badge text, single words.
A text path node carries only a subset of the properties available on a standard text node, per Figma’s plugin documentation, so some paragraph-level formatting is simply absent.
- There is no background fill behind the text. Figma’s support team confirmed in August 2026 that no built-in way exists to fill behind just the curved text, separate from the path
- Large type on a tight curve overlaps once the font size outgrows what the radius can hold
- Curved type does not translate into standard CSS text rendering, so developer handoff needs a workaround
- Beta status, with no committed stable release date and API behavior that can change between updates
Teams leaning on Figma’s developer handoff tools should flag curved text by hand. Exported specs will not describe the curve on their own.
None of this makes the tool unreliable. It narrows the job it is good at.
What Are the Best Use Cases for Text on a Path?
Designers waited years for this one. The original request thread on Figma’s forum has drawn more than 39,000 views and 44 replies (forum.figma.com).
That demand traces back to a narrow set of jobs the tool solves well.
- Circular badges and stamps where a short phrase wraps a full loop
- Logo lockups pairing a wordmark with a curved tagline underneath
- Icon or avatar labels that arc around a profile shape
- Decorative headers on posters or social graphics built inside Figma Draw
Figma’s product page for Draw describes the same short list: badges, logos, and text-based elements built without leaving the app.
One design newsletter walkthrough combined a radial repeat pattern with text on a path and a dynamic stroke on the same illustration, stacking three Draw features into a single sticker design.
FAQ on How To Type On A Path In Figma
Is text on a path available on Figma’s free plan?
Yes. It ships with every Figma seat, including the free Starter plan, because it lives inside Figma Design rather than behind a paywall.
Paid tiers unlock broader Draw features, not the text-on-path layer itself.
Does text on a path work with components and auto layout?
Auto layout accepts curved text layers without breaking. Figma added that support alongside the tool.
Components inherit the same layer type, so instances keep the curve and can still override characters, fill, and font size per instance.
Why does text on a path drift after you set an offset?
Because offset is a fraction of the path’s total length, not a fixed pixel distance.
Resizing, reshaping, or adding anchor points changes that total length, so the same fraction lands the text somewhere new along the curve.
Can text on a path be exported cleanly as SVG or flattened for handoff?
Figma’s plugin documentation exposes vectorPaths and vectorNetwork on every text path node, the same geometry data used for export.
Flattening converts the layer into vector outlines permanently. Useful for icon sets, though the text stops being editable characters the moment you do it.
Does the plugin API support editing text on a path programmatically?
Yes. Beyond creating a text path node, plugins can set characters, fontSize, and fills exactly like a standard text node, plus path-specific data through textPathStartData.
The clone method duplicates an existing text path node with all styling intact.
What Should You Try First in How To Type On A Path In Figma?
Start with a closed path. Ellipse tool or Shape builder, either one. Attach the text tool, then leave offset and alignment alone until the base curve reads correctly on its own.
- Closed path before open path, so wrapping stays even and you skip the manual spacing checks
- Type the characters before touching offset, otherwise the drag handle has nothing to move
- Alignment and flip orientation last, since both depend on how the curve already reads
That order trades speed for predictability. Opening with a path saves a step, sure, and then you spend the next ten minutes respacing letters because every segment stretches them differently.
Turning the finished curve into a reusable component keeps the badge or logo consistent everywhere it gets placed.
