Figma Design 教材 / Class LLL

文字框與繁中排樣：變窄時，資訊去了哪裡？

框寬、字級、行數與字型，逐項辨認

長標題擠出時，先保留原文，再比較固定框、自動高度與自動寬度。用真實繁中與英文排樣、字距／行高及字型條件，看清是哪個條件改變了行數；本站瀏覽器量測不冒充Figma排版引擎。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 14 分鐘

開啟互動教材查看參考來源

閱讀目標

分清文字圖層框界與字形大小
比較三種文字尺寸模式及內容溢位
用真文字核框寬、行高、字距與段落差異
分開缺字、缺字型、樣式與字型版本問題
換繁中／英文及真尺寸後再判斷，保留必要資訊

適用條件與學習範圍

把一個短標題換成長繁中或英文後，該改的是文字框、文字大小，還是可用字型？超出外框的內容真的不見了嗎？

可直接閱讀。先辨認正在編輯文字圖層或外層框架；若框界與資料歸屬混淆，可補讀框架／群組後返回。

能保留同一份文字，指出框寬、字級與行數各由哪個條件改變，選擇合適的文字尺寸模式，並列出交付前需核對的字型／語言條件。

聚焦可編輯文字及一般文字尺寸／排樣。網站用瀏覽器CSS與實際行盒量測，不重製Figma字形、標點禁則、混合字級、OpenType、自動行高、截斷／換行樣式或字型版本引擎；自動排版父子依內容調整／填滿與設計系統另由其完整教材承接。

原理與判斷

文字內容、字形樣式及文字圖層外框是不同層次。框變窄可增加換行，字級變小會改字形尺寸；兩者都可能讓內容塞進去，卻不一定都符合閱讀目的。先問必要資訊是否保留，再選尺寸規則，會比把整頁字縮小更容易換素材重判。字型則是另一個輸入條件：相同文字在不同字型、樣式或版本下不保證同樣寬高。看到替代字形，不代表整個字型已可編輯；看到缺字型警告，也不能只靠加寬框修正。用原文、框界、行數與字型條件逐項排查，才能說清楚是哪一項造成變化。

文字框與字形：改W不等於改字級

Figma文字圖層有定位與排版用的bounding box；Font size控制字形大小。改框寬可能重排文字，縮放工具則可連同框界及字級一起縮放。先指出目前在改哪個值，不把外框變大就當字被放大。本站以1CSS像素排樣顯示可選取真文字，虛線框標尺寸，讀數分列字級、行高與行數。它不是Figma輸出或印刷物理尺寸，瀏覽器縮放、螢幕密度及字型載入也會影響觀看。

自動寬度、自動高度與固定尺寸各承擔什麼

自動寬度讓文字框寬隨內容變化，換行以手動Enter／Return為主。自動高度保留可用寬度並讓高度隨文字增加；固定尺寸維持框寬高，內容仍可能換行並超出下緣。官方教學的長文字例子以自動高度容納新增內容。先比較原文是否完整，再看外框是否跟著變。本站固定框不裁字：行片與真文字可超出邊界，讀數列超出量。這只隔離「框界不夠」的原因，不代表所有Figma文字都沒有截斷或父框架裁切。

建立方式與模式切換，別靠外觀猜

Figma用Text工具單擊建立的文字預設自動寬度；拖出指定範圍建立時為固定尺寸。之後可在右側排版改尺寸調整。官方另外提醒，直接在畫布手動改文字圖層尺寸可能將其改成固定尺寸。因此同一段文字的目前規則需要實際檢查，不從「看起來多行」推斷。本站模式按鈕是教學控制，保留上次框寬與固定高，沒有模擬畫布拖曳後的全部自動模式轉換。

字級、行高、字距與段落，分開改一項

字級改字形大小；行高改行與行的垂直節奏；字距改字元之間的距離，不能與字偶kerning混稱。段落間距是段與段之間的距離。Figma可用px或字級百分比設定行高，自動行高依字型而異；Enter／Return會建立新段落。本站只提供明確px行高與字距、換行分段間隔。先用兩行短文固定字級，再只改行高，確認行數不變而總高變；若改框寬或字距導致換行，則是另一個變因。不要把一套數字當作繁中、英文和所有字型的通用處方。

繁中與混合文字：字元可顯示不等於字形符合用途

Figma官方CJK文件說，字型缺少輸入字元時，可由Noto字型顯示該字元；但中文／日文／韓文可能選到不合語言的字形。可選取文字，改用符合語言的字型；Noto縮寫TC、SC、JP、KR分別標示繁中、簡中、日文與韓文。同一段含漢字、拉丁字母及數字，可能用到不只一個字型。換字型後仍應核對標點、字形、粗細和行末，不把「沒有方框」當作語言品質驗收。本站Manrope→Noto Sans TC是瀏覽器字型鏈情境，不聲稱逐字替代與Figma完全一致。

缺字型與缺字：先核family、樣式與版本

Missing font表示目前無法存取文件使用的字型或樣式；它和某字型缺少一個字元不同。Figma在左側及選到文字時的字型名稱旁提供警告，可開Missing fonts檢查受影響字型與圖層。先確認本機字型、所用樣式及版本；若有合法可用的原字型，恢復相同條件。若決定換字型，在Replacement選family與樣式後Replace fonts；這會改文件裡受影響的文字，協作者也會看到變更。不要只為消警告就不檢查行數、資訊及品牌要求。

瀏覽器、桌面與協作：字型可用性有條件

Windows／macOS本機字型安裝後，瀏覽器使用另需Figma 字型安裝程式／font helper；桌面版已包含helper。新增本機字型支援TTF／OTF，需依官方步驟重載設計檔或重啟應用。ChromeOS／Linux不支援這個新增本機字型路徑，不能照Windows安裝步驟保證成功。協作前核同一family、樣式、版本及授權。官方當期另有帳戶上傳字型供MCP／Figma 代理程式使用的路徑，但不等於所有方案都有組織字型共用；本站不安裝、上傳字型或改帳戶。未取得所需字型時，先協商替代與驗收條件。

換行、截斷與裁切，別混成刪除內容

Figma的換行樣式控制多行文字在哪裡斷行，例如Balance與Pretty；它不替代文字尺寸模式，自動寬度只手動換行時也不受其影響。Truncate 文字會隱藏超出內容並加省略號，Max lines還有尺寸模式與依內容調整等條件；父框架的裁切內容又是另一層顯示範圍。這頁不重製上述引擎。遇到漏字，先看原文、文字模式、截斷選項及父層裁切，再決定加高、改可用寬度或重新排版。不能因螢幕上看不到就宣稱已刪字；更不能以截掉必要資訊假裝閱讀問題已解決。

真尺寸檢查與可編輯交付

先保留一份短文基線，再換繁中長文、英文及混合字串。用實際交付尺寸檢查每個必要詞、標點及段落能否被讀到；若為小卡或窄畫面，可能需要重新安排資訊，不只是縮小全部字。本站的1CSS像素排樣與行盒量測可確認當次瀏覽器結果；它不保證另一電腦、字型版本、Figma渲染或實體印刷一致。需要繼續編輯的文字應交代字型及替代條件，避免把轉成輪廓或點陣圖誤稱仍可直接改字。

步驟與觀察

保留原文並選對文字層
在有可編輯權限的Figma Design副本中，用Text工具T建立短文，或由圖層面板選既有文字；雙擊或Enter進入文字編輯。先記錄原文、所用family／樣式及模式，別直接刪去擠出的必要字。操作名稱對照（中文為本站教學譯名）：工具列 > Text 右側排版 > Text 尺寸調整（介面原文：右側 Layout > Text resizing）右側 Typography > Font／尺寸／直線高度（介面原文：右側 Typography > Font／Size／Line height）左側 Missing fonts > Replacement > Replace fonts
換長文字，先查文字尺寸模式
把短標題換成長繁中或英文。在右側排版核尺寸調整；分別比較自動寬度、自動高度及固定尺寸，看框寬高和行數哪個跟著變。本站排樣台可重做同一個觀察，不能代替原生文件的精確結果。
分開調框寬與Typography
先固定字級，只改文字可用寬度，觀察換行；再保持寬度只改行高、字距或段落間距。Figma在Typography設定字型及文字屬性；每次記錄變因，避免同時改很多值後不知道原因。
核對繁中字形與缺字型
檢查繁中、拉丁及數字的實際字形。遇缺字元可依CJK來源選符合語言的Noto TC等字型；遇Missing fonts則核family、樣式、版本及本機字型helper，必要時在模態窗選Replacement並核受影響圖層。
以真尺寸與必要內容驗收
在自己的目標尺寸查看完整原文，檢查字形、行末標點、主次與內容是否仍在；有截斷或父框裁切時分層說明。比較兩版，說出加高、加寬或重排各保住什麼，不以行數更少作唯一成功標準。
補讀容器後返回
若不確定文字框或外層框架誰改了邊界，補讀框架／群組後返回本頁；網站會保留文字與排樣控制。再用同樣方法回到原生Figma，查該文件的字型及規則；網站重設只重設這個排樣台。

常見問題

長標題擠出，就把全部字縮小

先保原文、查框寬與文字模式，再判斷可用空間和層級；縮小字形是另一個決定，應以真尺寸核可讀性。

固定尺寸框高不變，以為多出的字已刪掉

檢查文字內容、截斷及父框架裁切。需要容納新增內容可比較自動高度或重新排版，不以看不到當刪除證據。

改行高，卻把行數變化都歸因於行高

先固定框寬、字距、字型與內容；只有行高變時應主要改垂直距離，若行數改變就再找水平條件或混合樣式。

沒有缺字方框，繁中字形卻不合語言

核對CJK語言字形及實際字型，選適合繁中的TC或其他支援字型。可顯示不等於語言與字重都符合用途。

同事能編輯，我這裡出現Missing fonts

核相同family、樣式、版本與權限；Windows／macOS瀏覽器另查font helper。替代會影響文件內容，需重新驗行數與必要資訊。

切自動寬度後文字跑出手機視窗

自動寬度允許寬度隨內容成長；本站可橫向捲動真尺寸排樣，原文未丟失。需要受限寬度時比較自動高度／固定尺寸及整體版面。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design；文字編輯與尺寸文件列任何團隊／organization 方案、可編輯。Windows／macOS本機字型與瀏覽器helper、桌面內建helper及ChromeOS／Linux限制分開；不聲稱所有方案有組織字型上傳或當期測試版資格。來源狀態：2026-10-22以Scrapling get --ai-targeted補讀文字尺寸、Typography、CJK、Missing fonts、本機字型及官方文字教學；缺件與來源摘要見FG11研究筆記。沒有安裝、上傳或讀私人字型。示意限制：原創排樣台與繁中／英文／混合文案，真DOM文字可選取，Range及ResizeObserver讀實際瀏覽器行盒；框界、行片和讀數同源。沿站內已用Noto Sans TC／Manrope字型依賴；虛構不可用字型只作瀏覽器替代情境。非Figma文字引擎、標點禁則或跨機排樣保證。原生軟體實測：未在原生Figma建立文字、安裝字型或輸出實測；官方查核與本站公開瀏覽器驗證分開。學習成效驗證：未真人可讀性、繁中字形辨識或學習遷移實測；看過與自行理解標記不是測驗結果。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。