Figma 環形文字教學：Text on a path 與三種替代做法

設計稿需要一個繞著圓圈跑的「LIMITED EDITION」標語，或一個活動印章風格的折扣徽章，現在可以直接用 Figma 的 Text on a path 完成，不必再把每個字拆開旋轉。舊教學常說 Figma 沒有原生文字路徑功能，這項說法已經過時。

這篇會先講目前最快的原生做法，再保留插件、手動排列與外部向量工具等替代路線，並整理中文字、手機可讀性與工程交付時的注意事項。功能介面可能隨版本調整，上線前仍要用實際檔案與匯出結果確認。

核心重點。目前優先使用 Figma 原生 Text on a path：選取向量路徑後，用 Text 工具指向路徑邊緣並點擊即可輸入。插件與手動法適合舊檔或特殊控制；複雜印刷向量可交給專用向量工具；固定文案則可封裝成元件變體。

Figma 現在已支援 Text on a path

Text on a path 讓文字層沿著圓形、筆刷線條或其他向量路徑排列。新增文字時，原路徑的填色與效果會轉移到文字層，路徑本身可能從畫布上消失，因此若還需要看見外框，先複製一份路徑留底。

操作方式是先畫圓或向量路徑並複製備份，按 T 切換文字工具，把游標移到路徑邊緣，看到 Text on a path 圖示後點擊輸入。接著用路徑上的控制把手調整起點與位置，再設定字型、字級與字距，完整流程可參考 Figma 官方教學（2026）。

如果才剛接觸 Figma，建議先把基礎操作弄熟，可以看Figma 完整教學，再回來處理環形文字。

原生文字路徑仍不代表前端能用一般 CSS 一比一還原。靜態裝飾可以匯出 SVG；需要動態替換文案時，則應和工程師討論 SVG <textPath>、Canvas 或逐字排版等實作方式。

做出圓弧文字的方法比較

下面這張表把幾種方法的速度、可控度、成品品質與適用情境列在一起。一般需求先用原生功能，遇到限制再往下選。

一個常見的誤解是「插件最快所以最好」。不一定。插件做出來的字常常是各自獨立的文字節點，改一個字就要重跑一次，而且字距參數的精細度有限。如果你這個專案會反覆改文案（例如折扣徽章每檔活動都要換字），那麼第四條路線，也就是把做好的版本封裝成元件變體，長期反而最省事。

替代路線：原生控制不足時再用社群插件

原生 Text on a path 已能處理多數需求；若舊檔依賴特定參數，或需要插件提供的批次產生功能，才考慮社群插件。各插件的輸出、權限與維護狀態不同，安裝前要逐一確認。

實際操作的流程大致是這樣：在選單裡找到 Plugins，搜尋 circular text 或 text on curve 之類的關鍵字，挑一個評分高一點、最近還有更新的裝起來（挑插件的原則我寫在Figma 必裝外掛推薦，這裡不重複）。執行插件後，關鍵是看懂它給你的幾個參數：

• 半徑（radius）：決定文字繞的圓有多大。半徑越大，字排起來越接近直線；半徑太小，字會擠在一起。實務上我會先畫一個參考圓，把半徑設成跟這個圓一樣，這樣字就會貼著圓邊走。
• 起點角度（start angle）：第一個字要從圓的哪個位置開始。徽章常見的設定是從正上方（270 度或負 90 度，看插件的定義）開始，讓文字置中對齊頂端。
• 字距（tracking / spacing）：字與字之間的間隔。中文字通常要比英文字設更大的間隔，否則會黏在一起。
• 方向（clockwise / counter-clockwise）：順時針或逆時針。下半圓的文字如果直接順時針排會變成顛倒的，這時要改用逆時針，或讓插件支援「下半圓自動翻正」的選項。

插件法的最大地雷是匯出後的可編輯性。很多插件會把文字轉成輪廓（outline），變成一堆 path，這時候你想改一個錯字就只能重做。我的習慣是：插件跑完之後，先複製一份原始結果留底，再做後續的樣式調整。要替換文案時，回到原始那份重跑，別去改已經 outline 過的版本。

插件做出來的環形文字不一定和參考圓對齊，因為座標原點與半徑定義可能不同。遇到這種狀況，先把整組字群組後對齊，再評估是否需要逐字微調。

插件還有一個新手容易漏看的問題：版本相容性。Figma 更新得很勤，插件如果作者沒有持續維護，常常在新版 Figma 上會跑出錯誤或參數失效。所以裝插件的時候，除了看評分，也要看最後更新日期，太久的就要有心理準備它可能隨時罷工。我的習慣是把做好的環形文字立刻匯出成 SVG 備份，這樣即使插件哪天掛掉，我手上還有可用的成品，不會被工具綁架。這也是前面那張比較表裡，把插件法的可控度評為「中等」的原因：它的產出高度依賴一個你無法控制的第三方工具。

替代路線：純手動逐字旋轉

有些公司的設計規範禁止裝第三方插件，或是你只是要做一兩個字的小徽章，這時候純手動反而乾脆。聽起來很土法煉鋼，但它的可控度是所有方法裡最高的，因為每一個字的位置、角度、字距都由你親手決定。

若要平均排滿一圈，N 個字的初始角度可用 360 除以 N；若只排一段弧線，則用總跨度除以 N−1。這只是幾何起點，實際仍要依字寬與視覺重心做光學調整。

具體步驟我拆成五步：

1. 先畫一個圓當參考，這個圓的半徑就是你文字繞的路徑半徑。把圓的填色取消、只留邊線，方便對位。
2. 把你的標語拆成單字，每一個字是一個獨立的 text 節點，放在圓的最上方（12 點鐘方向）。
3. 為每個字建立一個和參考圓同尺寸、透明的 Frame，把字放在 Frame 頂端中央。直接旋轉文字只會繞文字自己的中心，無法自動繞圓心。
4. 依計算角度旋轉各個 Frame，讓字跟著 Frame 繞共同圓心排列；再逐字微調角度與基線。
5. 全部排好之後，把參考圓刪掉或隱藏，再視需要把整組字群組、對齊。

為了讓你不必每次都按計算機，我把幾個常見字數對應的每字間隔角度先算好。這張表是假設文字要均勻繞滿一整圈的情況，如果你的設計是只繞半圓或三分之二圈，就把對應比例代進去重新算。

這裡有個關鍵觀念：間隔角度越小，並不代表排得越漂亮。當角度小於 20 度，中文字的筆畫會開始彼此擠壓，遠看就像一團墨跡。所以與其硬塞 20 個字進一個小圓，不如放大圓、或拆成上下兩段半圓來處理。記住一個原則：文字的第一任務是被讀懂，排版的美感是服務這個任務，不是反過來。

這個方法沒有插件依賴，但字一多就難維護。只有在原生 Text on a path 無法達到特殊逐字效果、且字數很少時，才值得手動處理；一般環形文字優先使用原生功能。

手動法還藏一個小技巧：與其用文字節點，不如先把每個字轉成輪廓（Outline stroke），變成向量形狀。這樣旋轉時不會因為字型的 baseline 對不齊而歪掉，排版精準度會高一個檔次。當然，代價就是失去可編輯性，所以同樣建議保留一份原始文字版本。

替代路線：從專用向量工具做好再貼回 Figma

當需求超過 Figma 的控制範圍，例如印刷前製、複雜路徑或精細字距，可在專用向量繪圖軟體做好，再帶回 Figma。選擇工具時以輸出格式、授權與團隊工作流為準。

專用向量工具通常提供成熟的路徑文字控制，包括字距、基線偏移與內外側翻轉。若 Figma 原生功能不足，可在那裡完成排版後再匯出 SVG。

帶回 Figma 時優先使用 SVG，並確認字型是否已合法嵌入或轉成輪廓、效果是否被正確保留。轉成輪廓後縮放不失真，但文案不再可直接編輯，因此要保留原始向量檔。

這條路線的門檻，是要有合適的向量工具與基本路徑文字操作能力。完全的新手可先練習鋼筆工具與貝茲曲線，再處理複雜文字路徑。

重複使用：把固定版本封裝成元件變體

前面三條路線都是「做一個」。但現實裡，環形文字的需求很少只出現一次。電商網站每檔活動要換折扣徽章、品牌每季要換印章標語、社群經營者每週要換貼圖。如果你每次都從零開始跑插件或手動排，光這件事就會吃掉你不少時間。這時候第四條路線就值得投資：把做好的版本封裝成元件變體（Variants）。

概念很直白。你先用前面任一條路線，做出幾個常用尺寸、常用文案的環形文字版本，例如「SALE」「NEW」「LIMITED」三個變體、大中小三個尺寸。把這些版本整理到同一個元件集（component set）裡，設定好變體屬性。之後只要從資產面板拖出來、切換屬性，就能瞬間換好。文案要改，回去改母元件，所有實例同步更新。

元件變體適合固定且已核准的文案與尺寸。若每次都要輸入任意新文字，元件不會自動重新計算路徑排版，仍需使用原生 Text on a path 或重新調整。導入前先確認實際重用頻率。

把元件變體想成一個小型的品牌資產庫。如果你連字體選擇、標準字設計都還沒標準化，建議先讀過Logo 標準字設計技巧與排版設計實戰技巧，把字體與排版的底打好，環形文字的元件庫才有辦法長久維護，不會每換一個設計師就重練一次。

中文字繞圓的三個隱形地雷

英文教學滿天飛，但中文字繞圓有它自己的麻煩，英文教程不會告訴你。於是，我特別把這段獨立出來講，因為它往往是 zh-TW 設計師踩坑的重災區。

第一個地雷是標點符號。中文標點（頓號、逗號、括號）在繞圓時會佔掉一個完整字寬，而且它們的視覺重心跟文字字差很多，排起來會出現明顯的空洞或錯位。我的處理方式是：環形文字盡量不放標點，能用空格代替就用空格；真的要放，把它單獨旋轉微調，不要交給插件自動處理。

第二個地雷是字數與尺寸。圓周固定時，字數越多，字距與字級越容易被壓縮。不要套用「200 像素只能放幾個字」這種固定門檻；請用最終輸出尺寸、字型筆畫與實際裝置檢查，必要時放大圓或拆成上下兩段。

第三個地雷是字體選擇。明體（襯線）在繞圓時，筆畫粗細變化大，小尺寸下細筆會消失；手寫體筆畫連貫，繞圓反而容易打架。最安全的是用現代黑體（無襯線），筆畫均勻、辨識度高。如果你對中文字體的分類還不熟，中文字體設計指南裡有完整的黑體、明體、圓體、手寫體推薦，挑一個適合環形排版的來用。

上半圓與下半圓：兩段文字怎麼排才不會顛倒

品牌印章是環形文字裡最考驗功力的一種，因為它幾乎都要分成上下兩段。上半圓放品牌名稱、下半圓放成立年份或一句標語，這是印章與徽章的經典構圖。但很多人做出來的下半圓是上下顛倒的，要歪著頭才讀得懂，這就是沒搞懂「文字基線方向」的結果。

問題出在方向。上半圓的文字，字腳朝向圓心、字頭朝外，讀起來是由左到右的正常方向，這是直覺的。但下半圓如果你沿用同一個方向（順時針），文字會變成字頭朝向圓心、字腳朝外，整個翻轉過來，於是讀者看到的是上下顛倒的字。正確的處理是：下半圓的文字要反過來排，讓字腳同樣朝向圓心，這樣讀者從左到右讀下半圓時，字才是正的。

換句話說，上下兩段用的是相反的繞行方向。上半圓順時針、下半圓逆時針，兩段文字的字腳都指向圓心，視覺上就會對稱且可讀。這個邏輯聽起來繞口，但只要做過一次就會內化。多數成熟的環形文字插件都有「flip」或「reverse」之類的選項，就是用來處理下半圓這件事的；如果用純手動法，就是下半圓每個字的旋轉角度加上 180 度，並把排列方向反過來。

另一個常見的變化是「文字置中對齊」。徽章的設計通常希望上半圓的文字以正上方為中心、下半圓以正下方為中心，兩側對稱展開。要做到這一點，起點角度不是從圓的左邊開始，而是先把文字的中點對齊正上方或正下方，再向兩側展開。插件通常有 center align 的選項，手動法則要先算出文字總跨度（字數乘以每字角度），把起點設在「正上方減掉總跨度的一半」的位置，這樣排完文字才會剛好置中。

這些細節累積起來，就是業餘跟專業的差距。一個上下半圓對稱、文字方向正確、置中精準的印章，看起來會像設計師做的；任何一個環節出錯，看起來就像用免費工具隨便跑出來的。值得在這裡多花十幾分鐘把細節磨對。

四種實戰版型：折扣徽章、品牌印章、Logo 標語、社群貼圖

講了這麼多方法，落點到實際專案，環形文字大概就是這四種版型在輪迴。我把每一種的常用參數與注意事項列出來，讓你有個起手式可以照著調。

折扣徽章是出現頻率最高的一種，尤其在電商。它的設計關鍵不是文字本身，而是中央那個數字。環形文字其實是在幫中央的「20% OFF」或「限時 5 折」做框，所以文字的大小不能壓過中央數字，顏色也要退到配角的位置，通常用白底配單一強調色最有效。如果你想做的是更進階的徽章質感，例如霧面玻璃感，可以參考Figma 毛玻璃效果教學，把 glassmorphism 套在徽章底層，環形文字疊在上面，質感會立刻跳一級。

品牌印章的難點在於下半圓。印章風格的設計常常上半圓放品牌名、下半圓放成立年份或標語，下半圓的文字如果直接順時針排，會變成上下顛倒、要歪著頭才讀得懂。正確做法是下半圓改用逆時針，讓字腳朝向圓心，讀起來才是正的。這個細節插件不一定會自動處理，要手動檢查。

Logo 環形標語最考驗的是字距控制。標語通常字數不多，但要繞的圓往往跟著 Logo 的外框走，半徑被限制了。這時候字距要刻意拉鬆，讓文字「呼吸」，不要緊貼圓邊。Logo 的字體與標準字設計本身就是一門學問，環形標語只是其中一種應用，如果你想從品牌字體的源頭把關，AI Logo 產生器可以幫你快速產出候選字體方向，再進 Figma 微調成環形版本。

環形文字在手機上要怎麼樣才看得清楚

設計師最容易犯的錯，是在大螢幕上把環形文字調到完美，卻忘了它最終可能縮進手機畫面。根據 Statista 的統計（2026 年 4 月），全球網站流量有很大一部分來自行動裝置。一個在桌面端漂亮的環形徽章，到手機上可能縮得難以閱讀。

要讓環形文字在手機上仍然清晰，應用最終顯示尺寸實測字級、字距與對比，並確認高像素密度螢幕與縮放後仍能辨識。環形文字本來就比水平文字難讀，不能只靠一個固定像素下限判斷。

更重要的是該放棄就放棄。如果一個徽章縮到手機版已經小到讀不動，那就別硬留。響應式設計的原則是：手機版可以用直排或簡化版的標籤取代環形文字，把環形版本留給桌機。這個取捨的判斷方法，我在Figma 響應式設計教學裡有更系統的說明，核心觀念就是「內容的意義比形式重要」，讀不到的環形文字再漂亮也是失敗。

電商商品頁為什麼這麼愛用環形折扣標

環形文字常被用在電商折扣標與商品徽章，但 W3Techs 的電商平台市占資料（2026 年 6 月）無法證明這種視覺一定提升轉換。它是否有效，要看訊息、位置、可讀性與實際測試。

圓形徽章能打破商品頁以矩形為主的視覺節奏，因此常被用來標示折扣或新品；但它也可能搶走商品與價格的注意力。不要暗示「印章感」等同官方認證，更不能預設點擊與購買一定提升。

徽章數量與文案都要克制。比起「超值優惠」這類模糊文字，具體且真實的優惠內容通常更容易理解，但成效仍需測試。商品頁的 SEO 與轉換優化是另一條獨立戰線，環形徽章只是其中一個視覺元件；更完整的佈局可看WooCommerce 商品頁 SEO 優化與電商創業完整指南。

環形徽章和其他視覺特效搭配時要節制。毛玻璃、視差與懸停動畫疊在同一元素上，可能降低可讀性並增加前端成本。Figma 動態按鈕設計與Figma 載入動畫教學可提供互動參考；採用幾種效果應依整體層級與實機測試決定，不設固定數量門檻。

匯出與交給工程師時，怎麼不破圖

設計做完了，真正的考驗才開始。環形文字是 Figma 裡少數「設計端漂亮、交付端破圖」的高風險項目。因為它的本質是一堆旋轉過的獨立字，一旦離開 Figma 的渲染環境，什麼事都可能發生。

最安全的交付方式是轉成輪廓後匯出成 SVG。把每一個字 outline 成向量形狀，整組群組，匯出 SVG。這樣不管工程師用什麼框架、什麼螢幕，都不會跑字型、不會位移。代價是檔案體積變大，以及文案不能再改。所以我的交付流程是：SVG 版本拿去做實際渲染，同時附上一份 Figma 原始檔連結，讓工程師或下一位設計師在需要改文案時有原始可編輯的版本可以回去。

如果前端需要動態帶入文字，可和工程師評估 SVG <textPath>，或用 HTML/CSS 逐字旋轉。前者更接近文字沿向量路徑，後者方便控制個別字元；兩者都要測試字型、語系、無障礙替代文字與瀏覽器支援。

還有一個常被漏掉的點：環形文字匯出後，邊界框（bounding box）會變得很大。因為旋轉後的字會往四周延伸，Figma 自動算出來的外框會比實際看到的圖形大很多，留下一圈透明空間。這會導致工程師在網頁裡擺放時對不齊。解法是在匯出前，手動把整組字放進一個 frame，frame 的尺寸設成實際視覺大小，再從 frame 匯出，這樣外框才會貼齊內容。

關於 SVG 本身的體積，也值得花一秒鐘想清楚。把十幾個中文字轉成輪廓，每個字的 path 資料都不小，一個徽章的 SVG 檔動輒數十 KB。如果這個徽章會在商品頁大量重複出現（例如每張商品圖都帶一個折扣徽章），SVG 過大會拖慢頁面載入速度，間接傷害轉換與 SEO。我的折衷做法是：文字造型簡單的徽章，直接用 SVG；造型複雜、檔案肥大的，就改匯成 PNG 或 WebP 點陣圖，用適當的壓縮把體積壓下來，再交給前端當一般圖片使用。向量不是萬靈丹，點陣也不是次等公民，關鍵是看場合選對格式。這個取捨背後的邏輯，跟響應式設計裡「內容意義優先於形式」是同一套思維。

環形文字的幾個實務提醒

環形文字看起來簡單，真正影響品質的是字距、對齊、方向與對比。原生功能能加快製作，但仍需要在最終尺寸下做光學調整。

第一個心得是別讓工具決定你的設計。插件很快，但插件的預設值通常是針對英文優化的，直接套到中文往往字距太擠。我幾乎每次用完插件都還會手動微調字距與起點角度，這十分鐘的微調，是業餘跟專業的分水嶺。

第二個心得是重複用的東西就該元件化。如果你在一個專案裡用了兩次以上的環形文字，就值得花一個下午把它做成元件變體。這個投資會在第三、第四次的時候回本，而且團隊其他人也受惠。設計系統的價值，就是在這種地方一點一滴累積出來的。

第三個心得是在手機上檢查一次。做完環形文字後，開 Figma 的行動裝置預覽，或直接截圖傳到手機上看。桌面預覽很容易掩蓋小尺寸下的字距、對比與辨識問題，這個快速檢查能提早發現需要放大、簡化或改成直排文字的情況。

文案最好在細修前確認。環形文字對字數敏感，多一個字、少一個字，都可能需要重調半徑、字距與起點；若文案尚未定稿，就保留可編輯的原生文字路徑，不要過早轉成輪廓。

這些心得沒有什麼神奇的技巧，直白地說就是耐心與紀律。但設計這一行，拉開差距的往往不是會不會某個炫技功能，而是這些基本功做得扎不扎實。如果你正在系統性地累積自己的 Figma 技能，免費 UIUX 自學資源與UI Prototype 原型設計這兩篇可以陪著你把基礎打更深。

下一步：動手做出你的第一個環形文字

看完方法，剩下的就是動手。我給你一個六步的行動方案，照著走一遍，就能比較原生文字路徑、插件與特殊手動作法的差異。

1. 挑一個真實需求當練習題。別拿虛擬文案，拿你手邊一個真的要用到的徽章或標語，做完直接上線，學習動機最強。
2. 先用原生 Text on a path 做一版。確認可編輯性、起點控制與匯出結果；只有特殊逐字效果才改用手動法。
3. 需要比較工作流時，再用插件做同一版。觀察插件預設值、可編輯性與理想成果的差距，不必為了使用插件而使用。
4. 對照兩版的成果。哪一版字距順、哪一版對齊準、哪一版改字更方便，把它記下來。
5. 挑你會常用到的兩三個文案，封裝成元件變體。這是長期投資，做一次受用很久。
6. 匯出 SVG，實際丟進一個網頁或原型裡檢查。確認手機上還看得清楚，確認邊界框沒有留一堆透明空間。

Figma 已經原生支援文字路徑，但理解弧線方向、字距與光學調整仍然重要。工具解決的是排列，設計判斷仍要由人完成。

設計的路上，每一個繞過去的小障礙，都是你跟其他設計師拉開差距的墊腳石。現在，打開 Figma，把那個你拖了很久的環形徽章做出來吧。如果你在過程中發現自己對整體的視覺趨勢或品牌方向還拿不準，最新網頁設計趨勢與Landing Page 轉換率優化這兩篇能幫你把單一特效放回整體策略裡看，讓環形文字不只是炫技，而是真正服務你的轉換目標。