Class LLL / 設計星團教材目錄編輯與來源

Figma Design 教材 / Class LLL

排版參考線與量測：參考線會幫你排版嗎？

看見參考、明確移動、核對量測基準

版面對不齊時，先說清要對哪條邊，再看Columns、Rows、方格及尺規線。切顯示或改欄數不等於建立內容流；用獨立物件座標與邊界讀數分開判斷，再理解參考線與約束的條件。

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

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

閱讀目標

適用條件與學習範圍

改了格線或隱藏參考後，物件為什麼沒有自動排齊？若量到的距離和看起來的空隙不同，該先查哪個邊界？

能指出對齊參考和實際物件座標各是哪一份資料，選正確量測邊界，並說明何時需要明確移動、約束或自動排版。

本示意隔離自動吸附、約束、變數／樣式與自動排版，只比較一個無旋轉框架、矩形物件、參考線及有向水平邊界差。原生延展參考線與約束的結合須按條件理解，不從本站不移物件推論Figma永遠不會回應。

原理與判斷

參考線幫你看見可比較的邊、欄或間距，卻不直接回答內容如何新增、換行或避讓。物件的位置、參考的設定、吸附與尺寸回應是不同控制；先指出要對齊誰、為何，再選合適操作。 Figma已把舊名排版 grid改稱排版參考線，這與自動排版的grid 流程是不同功能。也不能反過來說參考線完全不參與尺寸規則：延展參考線可影響約束的參考欄列，隱藏顯示也不會刪掉設定。這頁先把幾份資料分開，讓你知道下一步該檢查哪個條件。

當期名稱與三種參考：格線、Columns、Rows

官方文件註明排版 grid自2025年5月更名為排版參考線。Uniform grid提供等大的方格；Columns為跨框架高度的直欄；Rows為跨框架寬度的橫列。它們用來建立可比較的參考，與自動排版 grid的軌道／儲存格及內容流不同。 本站可切三者，A／B座標保留，讓你先看「參考變了」；這是刻意隔離其他規則的原創活動，不能用此結果斷言所有原生尺寸回應都相同。

延展：先說清邊界留距與格間隔

延展欄寬或列高會隨框架尺寸改變；其尺寸欄由自動承擔。Margin是參考外側與框架邊的距離，Gutter是格間隔。先核哪個是內容區外緣，哪個是格與格之間，不把它們混成物件自己的內距。 本台3欄、框架300、兩側24、兩個間隔12，留下228分成各76。改框架寬後只重算參考；此例未啟用物件約束。數字只是可核對範例，不是所有版面的欄寬處方。

固定類型與offset：參考可固定在不同方向

Columns可選左側／置中／右側／延展；Rows為頂部／置中／底部／延展。固定類型可設定欄寬或列高；起端／末端類型還有Offset，說明從哪一側起算。置中是整組參考在框架置中，不等於把所有內容都置中。 本站固定欄列採相鄰等寬格，將固定尺寸、偏移與延展留距分開；不是完整重製所有Figma設定。切回延展時原有固定值仍保留，停用的控制只是本模型目前不使用，並非抹除資料。

添加、疊加與隱藏：顯示不等於規則存在

選框架，在右側排版參考線新增，預設可得到Uniform grid；開settings換類型與設定。同一框架能疊加多份參考；有用的配置可存成排版參考線樣式並由其他框架套用。不同作用範圍應分別命名，不因顏色相近就當同一參考。 單份眼睛開關與整份文件的排版參考線顯示開關不同；全域入口在縮放與檢視選項，官方亦列Shift+G。隱藏後設定仍在，並不等於停用與其相關的行為。若看不到，先查單份／全域顯示、是否選框架及旋轉條件。

尺規線：畫布與框架的定位脈絡

Main menu→檢視→Rulers先開尺規，再從水平或垂直尺規拖出線；Figma有畫布與框架層級的參考線。選到框架或其中物件時，尺規會用藍色提示相應座標；拖線與框架相交時的虛線也提示所在脈絡。 本站只有一條獨立尺規參考線，以這個框架起點作示意零點；可數值改X，沒有模擬原生拖入歸屬、頁面座標原點或吸附。移尺規線只改「相對它」的讀數，不把B一併搬走。

量測基準：物件bounds不等於所有可見墨色

Figma通常量物件bounding box之間的距離。描邊向外延伸時，量測不等於外側描邊邊緣；文字量的是文字層bounds，不保證是字形基線。旋轉、奇數邊形及其他幾何也可能讓外框和可見輪廓不同。 本台A右緣為88，B左緣144時，有向水平差56；B移到80讀−8，表示本例水平重疊8。這是本台定義，不假稱原生所有redline都顯示同樣有向數字。先說量哪兩條邊，再用讀數核對。

原生量測與巢狀層：先選對對象

選第一物件，按macOS Option／Windows Alt再指向第二物件，可看水平與垂直距離；深層物件可依官方用Command+Option或Control+Alt進一步量測。遮罩、鎖定或低不透明度層仍可能擋住命中，應回圖層面板核對，而非反覆猜畫面上選到誰。 兩條參考線之間目前不能直接用相同距離功能量，官方建議讀兩者軸位置後計算差；Dev Mode新增可持續顯示的measurements又是另一功能。不要把暫時redline截圖當成已建立永久交付註記。

與約束結合的例外，不能教成完全無作用

官方結合文件指出，延展參考線可讓物件的約束以最近欄／列作參考；固定參考線時則仍以框架處理約束。因而框架調整尺寸後的行為要同時核參考線類型及物件約束，不能只看顯示開關。 這仍不等於自動排版內容流：新增文字、兄弟避讓及換行需要另外的規則。本台刻意不模擬吸附與約束，所以只改參考不改座標；若真文件有結合設定，需按該設定重新觀察，不強迫原生文件與本台一致。

讓數字服務對齊目的

先說希望哪兩項有相同邊或相同間距，再決定移物件、改參考或改版面規則。對齊按鈕是一次明確位置修改；開參考顯示則只改觀看資訊，兩者不能互代。 本站「B對齊由左第二欄」真正改B座標；此處從左枚舉參考位置，改欄數後不會持續綁住它。需要持續尺寸回應時查約束，需要內容流查自動排版；若只是畫面看起來整齊但語義分組不清，補讀唯一構成理論再判斷。

步驟與觀察

  1. 記錄對不齊的對象與邊界

    在可編輯的Figma Design副本中，先由圖層面板指出框架和兩個物件。說清要比外框、描邊還是文字基線；原文與描邊保留，不為湊數字先轉輪廓或flatten。 操作名稱對照（中文為本站教學譯名）： 選取框架 > 右側排版參考線 > Add 排版參考線（介面原文：選取Frame > 右側 Layout guide > Add layout guide） 右側排版參考線 settings > 格線／Columns／Rows（介面原文：右側 Layout guide settings > Grid／Columns／Rows） Main menu > 檢視 > Rulers（介面原文：Main menu > View > Rulers） 縮放與檢視選項 > 排版參考線（介面原文：Zoom/view options > Layout guides）

  2. 在框架加適合問題的參考

    選框架→排版參考線→新增；開settings比較Uniform grid、Columns或Rows，核數量、延展／固定類型及相關留距／偏移。需要時疊加另一份參考，避免把相似顏色當作同一份設定。

  3. 切顯示，分開看設定與內容

    分別試單份與全域顯示，再核物件座標及約束。本站量測台先保持B座標，只改欄數、框寬或顯示，說出哪份資料改了；不要推論原生吸附／約束已被停用。

  4. 用尺規或物件邊界量距離

    需要尺規時先檢視→Rulers；量兩物件可選第一物件再按Option／Alt指向第二項，深層目標按官方對應修飾鍵。查圖層面板避免量到遮罩或上層。本站可選物件、尺規線或框架為基準核同份座標。

  5. 明確修改位置，再驗差值

    如果目的已確定，用明確對齊或移動操作改物件，再核量測。在本站按「B左緣貼齊A右緣」會將B改為88；切參考顯示不應被誤讀成同一個位置修改。

  6. 回到父框與觀看目的

    若邊界不符預期，補讀框架／群組的資料歸屬；若位置整齊但關係難懂，補讀構成。返回本頁保參考設定、B位置與量測基準，再回原生文件按其約束及吸附條件核實。

常見問題

版面對不齊，開了格線卻以為會自動重排

先選對物件與對齊邊；參考線、吸附、約束與自動排版不同。本模型只有明確移動按鈕才改B，不冒充內容流。

隱藏參考線後，以為全部結合規則也被取消

顯示只影響可見性，設定仍在；核參考線類型與約束，而非靠眼睛開關猜尺寸行為。

Margin、Gutter、Offset全部當物件內距

分別指出框架外側留距、格間隔與固定起算方向；物件自己的內距屬另一個控制，不混填。

量到的距離與描邊或文字視覺空隙不同

Figma以物件bounds量測，先核是否量到框、外側描邊或字形基線；本站只使用矩形外框，不以簡化數值保證所有字形距離。

巢狀目標量不到，便假設沒有距離

回圖層面板確認遮罩／鎖定／上層命中，按官方修飾鍵量深層物件；兩參考線間要讀軸位置後計差，不能混用功能。

切欄數後，原本對齊過的B沒有跟著第二欄走

本站對齊是一次位置修改，沒有持續綁定；若需要調整尺寸時保持關係，核真實約束與參考線條件，不用反覆手拖冒充持續規則。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design；結合參考線／約束文件列所有方案、可編輯，尺規文件列可編輯；Windows／macOS修飾鍵按具名功能區分。參考不等於自動排版 grid或Dev Mode永久量測；未推定新增測試版資格。 來源狀態：2026-10-22以Scrapling get --ai-targeted補讀4份原交接未核專文，保留新查URL／HTTP／hash；Stretch guides＋Constraints及隱藏後仍有作用明確保留，未用總覽名稱代替細節查核。 示意限制：原創參考投影量測台、兩矩形與一尺規線；參考、物件位置及量測目標分開，所有讀數由同份幾何計算。隔離snap／約束／流程；固定欄列示意相鄰等寬，不重製原生全部設定或量測算法。 原生軟體實測：未在原生Figma新增參考線、吸附、調整尺寸或量測實測；官方查核與本站公開操作驗證分開。 學習成效驗證：未真人對齊判斷或學習遷移成效實測。

參考來源

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

相關知識