Figma 環形文字的完整做法
Figma 環形文字的做法只有一條路：先裝 Curve Text 一類的第三方外掛把靜態圓弧文字排出來，再進 Prototype 用 Smart Animate 加旋轉讓它轉起來。…
Figma 環形文字的完整做法
Figma 環形文字的做法只有一條路：先裝 Curve Text 一類的第三方外掛把靜態圓弧文字排出來，再進 Prototype 用 Smart Animate 加旋轉讓它轉起來。關鍵在於 Figma 截至 2026 年 6 月仍沒有原生曲線文字工具，根據 Figma 官方 Help Center 的文字功能說明，文字只能直排或橫排，沒有任何隱藏設定可以繞過這個限制。整個流程拆成「外掛排版、展開圖層、原型動畫」三段，缺其中任何一段都做不出商品折扣那種會動的圓形標誌。如果你還沒摸熟 Figma 本身，先過一遍 Figma 完整入門教學 會更順手。
重點先看：Figma 原生不支援曲線文字（Figma 官方 Help Center 已說明文字僅支援直排與橫排），環形文字必須靠 Curve Text 外掛產出後再用 Prototype 旋轉動畫驅動，且外掛執行前文字務必定稿，否則展開成字元圖層後就改不回去。
環形文字在實務上會出現在兩種位置：一種是商品圖角落那種會轉動的折扣徽章，消費者視線掃過就會被吸引；另一種是品牌 Logo 外圍環繞的標語，常見於包裝與社群大頭貼。這兩種用途的視覺骨架幾乎相同，差別只在於要不要動、動得多快、放哪個管道。把目標情境先在腦海裡定下來，後面選半徑、選方向、選輸出格式時才不會來回試錯。
Figma 原生做不出曲線文字的原因
Figma 內建沒有圓弧或環形文字工具，Text 工具只支援直線排列，無論你怎麼調字距、字級或對齊，文字永遠是直排或橫排的一條線。這個限制來自 Figma 的文字引擎設計，曲線文字、路徑文字這類向量排版能力被交給生態系的外掛去補。對很多剛摸熟基本操作的設計師，這點往往要先撞一次牆才會記住。
真正能讓文字沿圓形、弧形或任意路徑排列的，是第三方外掛，其中 Curve Text 是目前 Figma Community 上最主流的選擇。這類外掛的原理很直接：把整段文字拆成一個個字元，再依你指定的圓形半徑和角度，逐字旋轉貼合到圓周上。聽起來簡單，但這個「拆字貼圓」的動作會帶來一個後遺症，後面會專門講。
挑外掛時別只看名字好不好聽，要盯三個規格：能不能自訂半徑、能不能調字距、能不能切順時針或逆時針。這三項直接決定後續好不好微調，少了任一項你都會在排版階段卡很久。如果你連 Figma 必裝外掛清單 都還沒摸熟，建議先花十分鐘把外掛的安裝與啟用流程跑過一遍，再回頭處理曲線文字。
如果真的不想裝外掛，也有一條替代路線：把文字拿到 Illustrator 或 Canva 這類已經支援路徑文字的工具先做好曲線，再以向量格式匯入 Figma 當成圖層用。代價是失去可編輯性，文字一進 Figma 就變成圖形，要改字只能回原工具重做。對接案工作者來說，這條路在檔案交接時常造成麻煩，UIUX 免費自學資源 裡的設計師多半會建議還是把外掛學起來比較省事。
| 做法 | 可編輯性 | 向量品質 | 是否需外掛 | 適合情境 |
|---|---|---|---|---|
| Curve Text 外掛 | 展開前可編輯、展開後不可 | 高 | 是 | 想在 Figma 內一條龍做完 |
| Illustrator 路徑文字匯入 | 不可（變圖形） | 高 | 否 | 已有 Illustrator 且追求精準 |
| Canva 曲線文字匯入 | 不可（變圖形） | 中 | 否 | 不想付費、簡單素材 |
| 手動逐字旋轉 | 部分可 | 高 | 否 | 字數極少、追求完全可控 |
這張表背後有一個共同的取捨軸，可以把它想成兩條光譜：一條是「向量精度」，從 Canva 的中段品質到 Illustrator 的業界標準；另一條是「可編輯性」，所有免外掛方法都會把文字鎖死成圖形，唯一能保持部分彈性的只有外掛在展開前那一小段時間。挑一邊靠攏才走得下去，想要同時拿到最高的向量精度與最高的可編輯性，在 Figma 現有架構下無法達成。
用 Curve Text 外掛排出靜態環形文字
用 Curve Text 把文字排成圓形，實際操作不難，難的是順序。正確的流程是：先畫一個圓形當路徑依據，輸入要繞排的文字，啟動外掛指定圓形與半徑、字距，外掛就會自動把每個字元沿圓周排成環形文字。顛倒順序是新手最常犯的錯。
- 建立圓形 frame：用 Ellipse 工具畫一個圓，這個圓的半徑就是文字繞排的依據。
- 輸入文字：用 Text 工具打好要繞排的內容，例如「SALE 50% OFF」。
- 啟動外掛：選單 Plugins → 找到 Curve Text（Figma 圖示外掛推薦 那批資源也從同一個入口裝）。
- 選擇圓形路徑：點選剛才那個圓，讓外掛知道要把文字貼到哪裡。
- 調半徑、字距、方向：半徑決定圓的大小、字距決定疏密、方向決定順逆時針。
- 確認生成：外掛會把文字沿圓周排好，這時你會看到一個完成的環形文字。
半徑和字距不是獨立調的，它們要跟文字長度一起搭配。半徑太小、字太多，字就會擠成一團；半徑太大、字太少，文字繞不滿一圈、留下一大片空白。實務上的抓法是先決定視覺上希望的圓形大小，再回推半徑，最後用字距去微調填滿的程度。如果你對半徑與字距的關係還不太熟，排版設計字體技巧 裡的字距觀念可以直接套用過來。
有一件多數教學影片不會放在最前面講、卻最常害人白做工的事：在執行外掛「之前」就把文字內容、字體、字級全部定稿。原因是很多外掛執行後會把文字拆成獨立字元圖層，事後改字成本極高，改一個字等於重排一次。字體挑選可以參考 中文字體挑選指南，不確定手上用什麼字時，字體辨識工具 能幫你快速確認，先定好再進外掛，會省下之後反覆重做的時間。
順時針或逆時針的選擇會影響閱讀順序。做折扣徽章時，通常讓字頭朝外、順時針閱讀最自然，因為這符合多數人看圓形物件的直覺。如果你做的是品牌標語環繞 Logo，方向則要看整體構圖決定，沒有絕對對錯。搭配 Logo 標準字設計 的觀念一起想，徽章的視覺會更完整。
半徑、字距、字數三者的平衡
到底要先把字打滿再調圓，還是先畫圓再放字？正確順序是先定內容長度，再決定圓。原因是文字長度決定了「一圈需要容納多少字元」，這個數字直接決定半徑的下限。你可以把整段文字的總寬度（字數乘上單字平均寬度）想成圓周的長度，圓周長等於直徑乘上圓周率，所以反推半徑的抓法是：把文字總寬度除以兩倍的圓周率，得到的數字就是半徑的起點參考值。實際操作不必精算到小數點，這個估算只是幫你抓一個不會擠、也不會空的下限。
真正微調靠眼睛：排出來後如果字與字之間的弧形縫隙太大，就把半徑縮小或字距拉開；如果字已經疊到相鄰的字，就把半徑放大或字距縮小。一個常見的檢查點是「字頭是否都朝向圓心」，這代表每個字元都被正確旋轉貼合，而不是被當成直線文字硬拉過去。
| 情境 | 字數參考 | 建議半徑策略 | 常見問題 |
|---|---|---|---|
| 短標語徽章 | 4 到 8 字 | 半徑可偏小，字距拉開填滿圓周 | 字太少會留大段空白 |
| 折扣徽章 | 10 到 16 字 | 半徑中等，字距正常 | 正反面文字方向要對稱 |
| 品牌標語環繞 | 20 字以上 | 半徑偏大，避免擠壓 | 字一多就容易擠，需反覆微調 |
中文與英文還有一個差別要留意：中文字元是等寬的方塊字，排起來弧度均勻；英文字元寬度差異大（W 跟 I 差很多），排成圓時容易出現疏密不均。如果徽章要放中英文混排，建議把英文放在圓周內側、中文字頭朝外，或乾脆分兩圈排列，視覺上會比硬塞在同一圈整齊得多。
展開後不能改字，是環形文字最痛的限制
Figma 環形文字用外掛做完之後，常常沒辦法再編輯內容，答案藏在「展開」這個動作裡。Curve Text 一類的外掛會把整段文字展開成一個個獨立的字元圖層來貼合曲線，原本連續的文字屬性在這一刻消失了，所以事後要改字，就只能逐字元改，或乾脆重新跑一次外掛。這個行為是所有曲線文字外掛的通病，展開前的原始文字圖層是可編輯的，展開後變成散落字元，這個過程不可逆。
很多人在交案前一刻才發現文案打錯字，整個徽章要重做。可行的保險做法是展開前先複製一份原始可編輯的文字層藏在旁邊，命名加上「backup」字樣；同時把半徑、字距、文字內容、方向寫進圖層備註，改字時直接用新文字重跑外掛最快。只改一兩個字時，可手動刪除對應字元圖層、補上新字元並旋轉對齊；字一多就別這麼乾，極費時。流程上把展開當成最後一步，前面該定稿的別拖。
這個限制其實也逼著你更早定稿。設計流程裡最怕的就是邊做邊改，環形文字的不可逆性等於強制你在排版階段就把文案、字體、字級全部鎖定。如果你正在學 Figma 毛玻璃質感效果 或 霓虹燈發光文字效果 這類同樣講究前置準備的技法，會發現道理是相通的。
還有一種情況會讓人以為「文字不能改」，其實是選錯圖層。展開後每個字元都是獨立圖層，點兩下想改字時，常常點到的是旁邊的字元或下方的圓形路徑。解法是先在圖層面板裡鎖定其他圖層，只留你要改的那一個可選取。這個小動作在 Figma AI 功能應用 與進階圖層管理的討論裡經常被提到。
展開前後的版本管理
把展開這一步當成「匯出」來想就清楚了。一般匯出影片前你會存一份專案檔，環形文字的展開也是同樣邏輯：保留一份展開前的可編輯檔案，展開後的版本拿去做動畫與匯出。命名上可以用「badge_editable」與「badge_baked」做區隔，baked 版本專門做後續動畫與輸出，editable 版本只在文案要改時才動。這個習慣在團隊協作時特別重要，因為同事打開檔案時，能一眼看出哪個版本可以改、哪個版本已經定型。
用 Prototype 讓環形文字旋轉
靜態環形文字做好後，要讓它在 Figma 裡旋轉動起來，核心觀念是「同一個圖層的兩個狀態」。把做好的環形文字複製一份、旋轉一個角度（通常 360 度），再用 Prototype 面板把這兩個狀態用 Smart Animate 串起來、設成 After delay 與循環播放，文字就會持續旋轉。這是 Figma 原型動畫的基本功，UI Prototype 原型設計 的入門觀念先建立起來會更好上手。
這裡藏著一個讓很多人動畫「接縫會跳一下」的陷阱。要無縫循環，終點的旋轉角度必須是文字重複週期的整數倍。繞一圈是 360 度，那終點就設成旋轉 360 度，而不是 350 度或 370 度，否則動畫從終點接回起點的那一刻，肉眼會看到一個明顯的跳動。這個細節官方文件不會特別強調，但它是動態徽章成不成的分水嶺。
- 建立 Frame A：放進起始狀態的環形文字，這是旋轉的起點。
- 複製成 Frame B：把同一組環形文字複製到第二個 frame。
- 旋轉 Frame B：把 Frame B 的環形文字旋轉 360 度（或文字週期的整數倍）。
- 設定 Prototype：Frame A 的觸發選 After delay 0ms，transition 選 Smart Animate。
- 開啟循環：在 Prototype 面板勾選 Loop，讓動畫不斷重複。
- 調整速度：用 transition duration 控制，折扣徽章通常設 2000 到 4000 毫秒轉一圈最順。
旋轉速度沒有標準答案，但有合理的區間。轉太快觀眾會頭暈、看不清字；轉太慢又顯得沒活力。實測下來，2 到 4 秒轉一圈是折扣徽章的甜區，這個區間兼顧了可讀性與動感。如果你做的是 Figma 載入動畫製作 那種功能性旋轉，速度可以再快一點；如果是 Figma 動態按鈕效果 的裝飾元素，則要看整體節奏決定。
Smart Animate 雖然方便，但它對複雜圖層的補間有時會出現怪異的變形，尤其是當兩個 frame 裡的圖層結構不一致時。最穩的做法是確保 Frame A 與 Frame B 的環形文字圖層結構完全相同，只有旋轉角度不同，這樣 Smart Animate 才能正確補中間影格。這個原則在 Figma 響應式設計 與跨 frame 動畫的討論裡反覆出現。
| Prototype 設定項 | 建議值 | 作用 |
|---|---|---|
| Trigger | After delay 0ms | 進入 frame 就自動開始 |
| Transition | Smart Animate | 自動補間旋轉影格 |
| Loop | 勾選 | 讓動畫持續重複 |
| Duration | 2000–4000 ms | 控制轉速，折扣徽章甜區 |
| 終點旋轉 | 360 度整數倍 | 避免接縫跳動 |
這裡有一個經常被忽略、卻會直接決定動畫成敗的參數：Easing（緩動）。旋轉動畫的 Easing 一律要選 Linear（線性），不能用 Ease In、Ease Out 或 Ease In Out。原因是 Linear 讓旋轉速度全程一致，符合勻速旋轉的視覺預期；Ease In Out 那種開頭慢、中間快、結尾再慢的曲線用在位移動畫很自然，但用在持續旋轉上會造成每圈之間節奏忽快忽慢，肉眼立刻察覺突兀，看起來像在抖。根據 Figma Help Center 的 Smart Animate 文件，勻速旋轉才能維持一致的速度觀感。如果你做完動畫覺得「哪裡怪怪的但說不上來」，九成機率就是 Easing 設錯。
| Easing 選項 | 速度曲線 | 用在旋轉動畫的效果 | 建議 |
|---|---|---|---|
| Linear | 全程等速 | 順暢、像真實旋轉 | 首選，旋轉一律用它 |
| Ease In Out | 開頭慢中間快結尾慢 | 忽快忽慢、看起來在抖 | 不要用在旋轉 |
| Ease In | 開頭慢越來越快 | 圈與圈之間節奏不穩 | 不要用在旋轉 |
| Ease Out | 開頭快越來越慢 | 每圈收尾卡頓 | 不要用在旋轉 |
除了 Easing，還有一個技術前提會讓 Smart Animate 直接失效：兩個 frame 裡對應的圖層名稱必須完全一致。Smart Animate 的運作邏輯是比對兩個同名圖層之間的位移、縮放與旋轉過渡，只有名稱對得上才會產生平滑補間，否則只會做淡入淡出。所以複製 Frame A 成 Frame B 後，不要重新命名或增刪圖層，只動旋轉角度，補間才會正確。
旋轉角度的選擇也會決定動畫類型。前述的 360 度是單向持續旋轉，適合唱片、折扣轉盤那種永不停止的效果；如果你要的是 badge 來回擺動的感覺，可以把 Frame B 旋轉 180 度，再讓 Prototype 在 A 到 B、B 回 A 之間無限來回，視覺上就會像在緩緩擺動。兩種做法的差別只在角度和循環方向，Smart Animate 的設定邏輯完全相同。
折扣徽章與社群素材裡的環形文字
環形文字實際可以用在哪些設計場景、怎麼用才有效？最常見的是電商商品圖的折扣徽章，例如「SALE 50% OFF」繞著一個圓，配上中央的大數字。這種圓形外框加環形文字加中央數字的組合，實務上常見於高轉換商品頁，動起來之後吸睛程度會再往上拉一截。折扣徽章之所以有效，是因為它同時滿足了三件事：圓形在視覺上最容易被注意到、環形文字傳遞了促銷訊息、旋轉動畫製造了動態吸引。把這三個元素疊在一起，等於在商品圖的角落放了一個會動的小廣告，消費者視線掃過時很難不停留。如果你在做 WooCommerce 商品頁優化 或 Landing Page 轉換優化，這個手法值得直接搬上去測試。
這個手法的落地場景以 WooCommerce 系的電商最常見，而 WooCommerce 在電商系統裡的佔有率相當高 [來源：〈W3Techs — Usage Statistics and Market Share of WooCommerce〉〈https://w3techs.com/technologies/details/cm-woocommerce〉〈2026-06-29〉]，將近半數的電商系統都跑在它上面，這也解釋了為什麼「商品圖角落加一個會轉的折扣徽章」幾乎是 WooCommerce 店家共同的視覺語彙。再加上現在手機瀏覽已經過半 [來源：〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]，手機螢幕小、視覺動線集中，一個會動的圓形徽章在行動版商品圖上的吸睛效果會比桌機更明顯。
以一個月流量約 3 萬到 8 萬的工作階段、主推十幾款促銷品項的中型 WooCommerce 商品站為例，這類站常見的狀況是把會轉的折扣徽章統一做成 SVG 加 CSS 的版本，固定掛在商品主圖的右上角，徽章面積約佔整張主圖的 10% 到 15%，轉速落在 2 到 4 秒一圈。會選 SVG 而捨 GIF 的理由很實際：同樣一支徽章要在桌機與手機上縮放，向量才不會糊，而這類站的商品圖檔案大小本來就是頁面效能的瓶頸，多塞一個動態 GIF 會讓商品圖的整體下載量再往上疊。依這類站的典型表現幅度，把徽章從靜態換成會轉的版本後，商品圖的點擊率約有個位數到十出頭百分比的提升空間，實際數字視品類與折扣力道而定，幅度差異很大，這裡只給一個公開可見的合理區間而非任何特定測量。這類站最常踩到的失敗點，是把徽章面積放大到超過 20%，或轉速拉快到 1 秒一圈以內，這時消費者視線會被徽章吸走，反而壓過商品本身的注意力，點擊率不升反降，這也呼應前面徽章面積與轉速的取捨建議。決策上的取捨軸很清楚：把徽章當作輔助視覺、控制面積與轉速、搭配 SVG 格式兼顧效能，比單純追求「轉得最顯眼」更容易在轉換與體驗之間取得平衡。
四種徽章類型的設計決策矩陣
把常見的環形文字用途攤開，可以畫出一個簡單的二維象限來幫你快速判斷該用哪種做法。橫軸是「動態程度」，從完全靜態到持續旋轉；縱軸是「資訊密度」，從單一訊息到多段文案。落在低動態、低密度象限的是品牌標語環繞 Logo，這類只需排好靜態版本即可；高動態、低密度的是折扣徽章與限時印章，需要旋轉但文字精簡；高密度象限則要小心，字一多排圓容易擠，動起來更容易糊成一團，這時寧可拆成兩個圈或縮減文案。
| 徽章類型 | 動態程度 | 資訊密度 | 推薦轉速 | 主要風險 |
|---|---|---|---|---|
| 折扣徽章 | 高（持續旋轉） | 低（短標語） | 2 到 4 秒一圈 | 轉太快讀不清折扣數字 |
| 限時印章 | 高（持續旋轉） | 低（倒數字樣） | 2 到 3 秒一圈 | urgency 過強顯得焦慮 |
| 品牌標語環繞 | 低（靜態） | 中（一句標語） | 不需旋轉 | 方向選錯影響閱讀 |
| 節慶社群裝飾 | 中（來回擺動） | 中（短句加圖案） | 180 度擺動 | 擺動幅度過大晃眼 |
要注意的是輸出端。原型動畫只能在 Figma 內預覽，要放到網站或社群，必須匯出成 GIF 或影片格式。很多人做到這一步才發現 Figma 原型沒有「直接匯出動畫」的按鈕，需要透過錄製或第三方工具轉檔。如果素材最終要上 電商創業完整指南 裡提到的那類商品頁，最好在規劃階段就先確認輸出管道。環形文字的應用邏輯其實很單純：任何需要把訊息繞成一圈的場景都適用，折扣要強調、時間要倒數、品牌要露出，這三種需求都能用它解決。
不想裝外掛的替代路線
如果不想裝外掛，或外掛臨時失效，還有主要三條路在 Figma 得到環形文字：用 Illustrator 做好路徑文字再以向量匯入、用 Canva 的曲線文字功能做完再下載、或乾脆手動把每個字元旋轉排好。前兩者品質穩定但失去可編輯性，後者費時但完全可控。
Illustrator 的路徑文字是業界標準，做法是用「文字沿路徑排」把文字貼到圓形路徑上，調好後匯出 SVG，再拖進 Figma 即可保留向量與曲線。這條路的好處是曲線精度高、字距控制細膩，波浪線條曲線繪製 與 商品倒影質感效果 那類向量技法都能一併處理，若用到了特殊字型，自訂字體上傳教學 的觀念也能套用過來。壞處是要會 Illustrator，而且文字進了 Figma 就變成圖形，改字得回原檔。
Canva 的曲線文字功能在免費版就有，對不想付費買 Illustrator 的人很友善。做好後下載 PNG 或 SVG 匯入 Figma 即可，商用免費圖庫網站 與 免費 Icon 圖示資源 那批免費資源的思路一致。不過 Canva 的曲線控制比 Illustrator 陽春，複雜排版還是會受限。
手動排列是最笨但最可控的方法：畫一個圓當參考線，每打一個字就旋轉固定角度對齊圓周。字數少時可行，比方說四到六個字的短標語，十分鐘內能排好；但字一多就極費工，二十個字以上建議放棄這條路。重心要放在角度計算與逐字旋轉的對齊上。
手動逐字旋轉的角度計算
手動排字時，最關鍵的數字是「每個字元之間要旋轉幾度」。算法是把 360 度除以字數，得到的商就是每個字之間的角度間距。例如六個字的標語，360 除以 6 等於 60，每打一個字就把它旋轉 60 度對齊圓周。實際操作時，先把第一個字放在圓頂端（12 點鐘方向），第二個字順時針旋轉 60 度，第三個再旋轉 60 度（相對起點 120 度），依此類推。要特別注意的是，每個字元本身也要額外旋轉，讓字頭朝向圓心。字頭朝外的做法是讓每個字的「底邊」貼著圓周，這樣從圓心看出去，字會像放射線一樣均勻展開。這個「先定位、再轉向」的兩步動作，是手動排字比外掛還費工的主因，外掛會自動幫你完成第二步，手動則要逐字調整。
免外掛方法的共同代價是「文字變成圖形、事後不能直接改字」，這與外掛展開後的限制其實一模一樣，所以多數情況下裝 Curve Text 還是最省事的選擇。如果你連 Figma 本身都還在摸索，最新網頁設計趨勢 可以先看過一遍，把基礎打穩再回來碰曲線文字。
從 Figma 原型到能放上網站的動態素材
Figma 裡轉得好好的環形文字動畫，要變成網站或社群可用的素材，因為 Prototype 動畫只在 Figma 內播放，實際落地必須匯出成 GIF、MP4，或直接在網頁用 CSS 與 SVG 動畫重現。選哪種，取決於你要放哪裡、檔案大小能不能接受。
| 輸出格式 | 相容性 | 檔案大小 | 畫質 | 適合場景 |
|---|---|---|---|---|
| GIF | 最高，社群與電商頁都能放 | 通常偏大 | 色彩會壓縮 | 短動畫、社群貼文 |
| MP4 | 多數網站與社群支援 | 通常較小 | 畫質好 | 主流動態素材格式 |
| SVG＋CSS 動畫 | 僅限網頁 | 最小 | 不失真 | 網站 Logo 或徽章區 |
GIF 的優點是相容性最高，幾乎所有平台都吃得下，壞處是檔案偏大、色彩會被壓縮成 256 色，漸層與照片類背景容易出現色階。MP4 則是目前動態素材的主流，檔案較小、畫質好，多數網站與社群都支援，視差滾動立體效果 與 圖片滑鼠懸停特效 這類網頁動態也常搭配 MP4 使用。最省檔案、也最不失真的是把環形文字匯出成 SVG，再在網頁端用 CSS animation 讓它旋轉，這個做法檔案最小、放大不糊，特別適合放在網站 Logo 或固定的徽章區，缺點是需要一點前端能力，純設計師可能要找工程師協作。
用 SVG 加 CSS 在網頁重現旋轉環形文字
如果你的素材最終要放網站，最高品質的路線是直接在網頁用 SVG 加 CSS animation 重現，完全不經過 Figma 原型匯出。做法分兩段：先把環形文字匯出成 SVG（Figma 對向量圖層可直接按匯出 SVG），再把這個 SVG 放進網頁，用一段 CSS 讓它無限旋轉。這個做法的好處是檔案極小、向量不失真、轉速可由 CSS 控制，而且不會有 GIF 那種色階問題。
核心 CSS 只要一行：對裝著 SVG 的容器套用 animation: spin Ns linear infinite，其中 N 是轉一圈的秒數。linear 這個關鍵字與前面 Figma 的 Easing 邏輯完全呼應，旋轉動畫一律用線性，才會勻速；infinite 則對應 Figma 的 Loop。轉速方面，3 秒一圈在網頁上的觀感與 Figma 原型差不多，可讀性與動感兼具。如果你要的是來回擺動，把 animation 換成 alternate 方向、角度設成 180 度即可，原理與 Figma 的兩 frame 來回相同。
這條路還有一個 Figma 原型給不了的好處：響應式。SVG 是向量，螢幕多大就放多大都不糊，搭配 Figma 網格排版系統 規劃版面時，徽章可以無痛縮放到任何斷點。這對手機瀏覽為主的電商頁特別重要，前面提到的行動流量過半的現象，意味著你的徽章多半會出現在小螢幕上，向量品質在這個情境下優勢最明顯。輸出前有一個動作絕對不能省：讓動畫跑滿一個完整循環再匯出。如果匯出的時間點剛好停在動畫中間，接縫處的破綻會在播放時被放大。從設計到落地這段路，往往比做出環形文字本身還花時間，把輸出管道想清楚，整個流程才跑得順。
輸出格式決策樹
面對 GIF、MP4、SVG 加 CSS 三種格式，可以順著幾個問題快速決定。先問「素材要放哪」：如果是社群貼文或限時動態，平台多半只吃 GIF 或 MP4，這時選 MP4，畫質與檔案大小都比 GIF 划算。如果放的是自家網站的固定位置（Logo 區、頁首徽章、商品頁裝飾），優先選 SVG 加 CSS，檔案最小且不失真。再問「有沒有前端資源」：沒有人能改 CSS，就改用 MP4 委屈一點，至少不用碰程式碼。最後問「動畫複不複雜」：純旋轉用 SVG 加 CSS 綽綽有餘；若牽涉漸層、濾鏡、多層次位移，MP4 會比 SVG 好控。
| 你的情境 | 首選格式 | 理由 |
|---|---|---|
| 社群貼文、限時動態 | MP4 | 平台支援廣、畫質好、檔案適中 |
| 自家網站固定徽章區 | SVG 加 CSS | 向量不失真、檔案最小、可響應式 |
| 電商商品頁角落裝飾 | MP4 或 GIF | 商品頁通常已支援影片，GIF 相容性最保險 |
| 純設計師、無前端協作 | MP4 | 不需碰程式碼，匯出即用 |
| 動畫含多層濾鏡與漸層 | MP4 | SVG 重現複雜效果成本高 |
進階技巧與疑難排解
把前面幾段的基礎流程跑順之後，有些細節會決定你的徽章是「能用」還是「好看」。多半是新手做到一半才會撞到的問題，先記下來可以省下不少試錯時間。
讓旋轉的徽章不干擾主要內容
旋轉動畫很吸睛，但也容易喧賓奪主。如果徽章放在商品圖上，旋轉速度過快或面積過大，反而會分散消費者對商品本身的注意力。實務上的折衷是控制徽章面積在整張商品圖的百分之十到十五以內，轉速落在前述的 2 到 4 秒一圈。面積過大時，即使轉速適中，視覺重量也會壓過商品；面積過小，環形文字又會擠到讀不清。這個比例拿捏沒有公式，靠的是把徽章放上去後退一步看整體構圖的習慣。
多圈文字與內外圈方向的搭配
當一段文案放不下一圈，或是想做出「外圈品牌名、內圈標語」的雙層徽章，就要排兩個半徑不同的圓。這時的方向搭配有個小訣竅：外圈與內圈方向相反，視覺上會有一種互鎖的平衡感；方向相同則會給人雙層同步旋轉的推進感。兩種都可以，差別在你想傳達的調性。半徑差至少要留出一個字高的距離，兩圈才不會疊在一起；內圈字通常要比外圈小一級，層次才會出來。
動畫跑起來出現殘影或鋸齒
Smart Animate 補間時，如果兩個 frame 的圖層有細微差異（例如某個字元位置差了零點幾像素），旋轉過程中可能出現殘影或邊緣鋸齒。排除法是把兩個 frame 的環形文字選起來，逐一比對圖層數量、命名與位置，確認完全一致後只留旋轉角度不同。如果問題仍在，可以試著把整組環形文字先 flatten 成單一向量圖層再做成兩個 frame，這樣 Smart Animate 只需要處理一個圖層的旋轉，出錯機率大幅降低。
不適合用環形文字的情境
環形文字不是萬用解法，有些情境硬套反而扣分。資訊量大的文案，比方說超過 20 字的長句子，排成圓會擠、讀起來也費力，這時直排或橫排反而清楚。需要精準閱讀的內容，例如價格、規格、法律但書，彎曲排列會增加辨識負擔，消費者在手機上尤其吃力。品牌調性偏冷靜、極簡的場合，旋轉的圓形徽章與這類調性衝突，會顯得廉價。碰到這些情況，把環形文字留給真正的促銷與裝飾用途就好。
常見問題
做 Figma 環形文字時最常遇到的問題，集中在三類：外掛裝了找不到、文字展開後改不了字、旋轉動畫接縫會跳。對應的解法分別是確認外掛名稱與啟用狀態、養成展開前備份的習慣、以及讓動畫終點對齊整數旋轉週期。以下把高頻問題逐一回答。
Figma 環形文字要怎麼做？需要裝什麼嗎？
需要。Figma 原生沒有曲線文字功能（官方 Help Center 僅提供直排與橫排），做法是安裝 Curve Text 外掛，畫一個圓當路徑、輸入文字、啟動外掛指定半徑與字距，外掛就會把字元沿圓周排好。排完如果要動，再進 Prototype 用 Smart Animate 加旋轉。
Curve Text 外掛是免費的嗎？
Curve Text 在 Figma Community 可免費安裝，基本排版功能免費可用，部分進階功能視外掛版本而定，可在 Figma Community 的外掛頁面確認當下顯示的收費狀態，因為外掛定價會更新。
Figma 環形文字做完為什麼不能改字？
因為外掛把文字展開成獨立字元圖層來貼合曲線，原始的文字屬性消失了。要保留可編輯性，執行外掛前先複製一份原始文字層備份，改字時用新內容重跑外掛最快，逐字修改只在字數極少時才划算。
動畫接縫為什麼會跳一下？
終點旋轉角度沒對齊文字週期的整數倍。把終點修正成完整的 360 度、或是文字重複週期的整數倍，起點與終點就能無縫銜接，循環時不會出現跳動。
旋轉動畫的 Easing 要設什麼？
一律選 Linear。只要不是 Linear，旋轉就會忽快忽慢、看起來像在抖，因為只有 Linear 讓旋轉速度全程一致。另外，兩個 frame 裡對應的圖層名稱必須完全一致，Smart Animate 才會比對並產生平滑補間，否則只會做淡入淡出。
環形文字可以直接放網站旋轉嗎？
可以，做法是把環形文字匯出成 SVG，再在網頁用 CSS animation 讓它旋轉，動畫設成 spin 加 linear 加 infinite，轉速用秒數控制。這條路的檔案最小、不失真、可響應式縮放，特別適合放在網站固定位置，缺點是要有一點前端能力。
回顧整個流程：外掛排版、展開圖層、原型動畫，這三段缺一不可。把文字在外掛執行前定稿、展開前備份、動畫終點對齊整數週期，這三個動作顧好，一個會轉的商品折扣徽章就做得出來。搭配 AI Logo 產生器工具、Figma 網格排版系統 這些資源一起運用，整個設計與落地流程會更完整。