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

Figma Design 教材 / Class LLL

對齊歪掉：先分基準、幾何與整體縮放

位置、幾何、描邊與檢視倍率，不是同一個數字

單選對父層、多選對彼此、整組對父層會產生不同結果；等間距也不是平均中心距。用定位尺台比較調整尺寸／縮放、旋轉原角與AABB，再以有限1px直線點陣分開輸出倍率與檢視放大。

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

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

閱讀目標

適用條件與學習範圍

按同一個中心對齊，為何有時只移一件、有時三件疊起來？把W放大又為何不一定把描邊一起放大？

能說出對齊對象及基準、預測分布的邊緣間距，分開位置、調整尺寸、縮放與縮放檢視；知道整數座標及高倍率檢視不保證所有輸出銳利。

三個同父層、不同寬度矩形的水平基準與有序分布；獨立原稿的有限調整尺寸／縮放／旋轉切片；原創16px直線覆蓋率標本。無文字、效果、實例、min-max、完整snap與Figma輸出引擎。

原理與判斷

「對齊」需要先說對誰。單選物件通常相對父層，多選會按選取範圍對彼此；把多件當組對父層又是另一操作。基準不明時，反覆點同一圖示只會讓人誤以為軟體出錯。尺寸也需要問改的是幾何邊界，還是連同描邊等一起按比例縮放。 真稿裡還要分開幾何邊緣、置中描邊外緣及旋後外接矩形。看起來歪或糊，不一定是X/Y填錯；可能是選取、旋轉原角、線寬、輸出倍率或檢視方式不同。先把可觀察的量分開，再決定下一步。

單選對父層，多選對彼此，整組另有操作

官方對齊依選取判定：只選一件時對其父層（可能是群組、框架或元件容器）；多件可對彼此、父層框架或實例內所選層。按Shift點alignment control可把多件當組對父層；跨框架時各對各自父層。本台明示三件同父層寬400，提供B單選、三件對彼此及三件當組三個條件，不引入未核的key 物件。水平中心對齊時，三件對彼此會各自移到選取範圍中心，可能重疊；整組則保彼此距離。

移位置不改尺寸，等間距看兩個邊

X/Y調位置，W/H調幾何尺寸。官方預設方向鍵small nudge為1、Shift big nudge為10，但讀者可自訂，不是永久常數。本站提供B的X數值滑桿，不把它稱為原生nudge設定。Distribute horizontal／vertical 間距保外端、分配中間空隙，矩形不同寬時不是平均中心距。本站三件寬40／60／80，初始X20／110／260，分布後B130、間隙各70；只做明示A左、C右的有序案例。Tidy up另有smart selection及排整齊規則，本票不模擬其全部邏輯。

整數格取整可能破壞完全相等

當總剩餘空間無法被間隙數整除，等間距可能是小數。官方說Snap to pixel grid開啟可能得到整數分布；關閉可得7.5之類小數。本台B寬61時，理想間隙各69.5，B為129.5；切整數格再分布只round中間位置到130，得到70／69。這是原創有限取整示意，不聲稱Figma把餘數固定放某一邊。顯示像素格線與啟用snap又是兩件事，隱藏格線不等於停止吸附。

調整尺寸的鎖比例與縮放 K要分清

拖邊界或改W/H是調整尺寸；Lock aspect ratio可維持比例，但維持比例本身不等於使用縮放。原生縮放 K有倍率及尺寸欄，另一軸會按比例更新，並縮放描邊／模糊，忽略巢狀約束來等比縮放。鎖定層及元件實例內子層有縮放限制。本站未鎖比例的調整尺寸把W60改120時H仍40、描邊仍4；縮放則W120/H80、描邊8，只含矩形幾何與置中描邊，未假造模糊或文字。

固定錨點與旋轉原點，各決定什麼不動

縮放面板anchor box可選固定哪個點：左上固定時向右下長大，中心固定則向四周。本台兩種錨點比較都從X110/Y90/W60/H40原稿算，調整尺寸固定點只作公平比較條件，不冒稱原生同一個縮放面板。旋轉預設用選取範圍中心，macOS Option+R／Windows Alt+R可顯示origin target並拖換原點；本台只選中心或原角。尺寸錨點決定未旋轉稿如何伸長，旋轉原點決定轉動時哪個點不動，不能因名字相似混用。

原左上角，不是旋後AABB左上

Figma X/Y以圖層原bounds的左上角為參考，旋轉後仍追該原角；它不自動變成包住整個旋轉物件的軸向外接矩形（AABB）左上。本站亮角追原左上，虛框顯示旋後AABB，讀數分列兩者。正角在Figma是逆時針、負角順時針，CSS方向相反；本台幾何轉號處理，不把SVG正角誤教成Figma正角。它不是完整Figma transform matrix或父層旋轉座標系求解。

幾何邊界與描邊外緣，先確認看的是誰

同一矩形幾何W60配置中描邊4，外緣會跨出幾何兩側；肉眼比較外側，和用幾何邊界判斷間距可能不同。本站變形切片把描邊畫成另一個外圈，調整尺寸只拉幾何而縮放會改線寬，所以可直接觀察。僅此原創置中描邊條件，不泛推所有inside／outside 描邊、效果、旋轉或工具量測都用相同外緣。真正量距另有來源與測法，可補讀參考／量測頁後返回。

像素檢查：改輸出與放大檢視有不同結果

Figma預設向量檢視不固定解析度，縮放與檢視選項的像素預覽可選停用／1x／2x，像素格線每格對應1x輸出像素且需400%以上才可見。Snap to pixel grid可在格線不可見時作用；框架、區段、元件即使關snap仍有格線吸附條件。本站不偽造這些全域設定，而用真16×16或32×32 buffer及最近鄰檢視展示差別：800%只是放大同一buffer，2×輸出才增buffer尺寸。以圖像真尺寸檢查讓一圖像像素對一CSS px，仍不是物理螢幕像素保證。

整數位置不保證所有東西銳利

有限原創1px置中線若中心在8，1×像素會有兩格半覆蓋；中心8.5可填滿一格。這只是一維面積覆蓋率示意，未重現Figma抗鋸齒。斜線、字型、曲線、透明度、描邊對齊、輸出格式與裝置DPR還有其他影響。放大方便找原因，最後仍要在目標輸出尺寸／格式及真顯示環境檢查；不能用整數座標、看過標記或本站灰階範例保證所有稿件清晰。

步驟與觀察

  1. 先核選取與父層

    在圖層面板確認選到B一件、三件，或同父層的一組；不要把跨框架的物件當同一基準。 操作名稱對照（中文為本站教學譯名）： 選圖層 > 右側 Design > 位置／排版（介面原文：選圖層 > 右側 Design > Position／Layout） 對齊controls；Shift點control整組對父層（介面原文：對齊controls；Shift點control整組對parent） 縮放工具 K > multiplier／dimensions／anchor（介面原文：Scale tool K > multiplier／dimensions／anchor） 縮放與檢視選項 > 像素預覽／像素格線／Snap to pixel grid（介面原文：Zoom/view options > Pixel preview／Pixel grid／Snap to pixel grid）

  2. 選對對齊條件

    用右側alignment control比較單選／多選；要把多件當組對父層時按Shift點control，觀察內部間距是否保留。

  3. 以邊緣間距分布

    選三件有序試片，Distribute horizontal 間距保外端並改中間；若取整後不完全等距，查Snap to pixel grid而非只看中心。

  4. 比較調整尺寸與縮放

    在同原稿先改W，再另稿用K的multiplier／dimensions；記錄H與描邊是否也跟，核鎖定／實例限制。

  5. 核旋轉原角與原點

    用角度與origin target看中心或原角哪裡不動；不要拿AABB左上代替原角，正角逆時針。

  6. 回目標尺寸檢查

    用縮放與檢視選項查像素預覽及像素格線，確認輸出倍率；本站原創點陣以圖像真尺寸／放大作比較，真稿仍需實際輸出核對。

常見問題

多件中心對齊後都疊起來

你可能對彼此而非整組對父層；確認選取，必要時Shift點control並核各自父層。

不同寬度的物件中心等距，空隙卻不等

量兩個邊而非中心；用間距 distribute，再核取整與外端是否仍固定。

W加倍但描邊沒變粗

可能是調整尺寸或鎖比例而非縮放；用同稿K比較並核描邊及另一軸，本模型不把所有調整尺寸泛稱縮放。

旋轉後X/Y看起來不是最左上

它追原角，不等於AABB左上；看origin及父座標系，並核正角方向。

隱藏pixel grid還在吸附

顯示與Snap是不同設定，官方也列框架等的例外；別把格線可見性當全部吸附開關。

整數位置輸出仍模糊

核線寬及描邊對齊、倍率、像素預覽、格式、字形／曲線與顯示DPR；回真尺寸輸出，不用縮放檢視作銳利保證。

適用範圍與證據

原教材查核日期：2026-10-22 適用範圍：Figma Design幾何及縮放官方列所有／所有方案、編輯存取權；縮放檢視／檢視所有方案。macOS／Windows origin target分列；不把縮放對鎖定／實例子層限制或自動排版／min-max條件抹平。 來源狀態：沿當日geometry-alignment交接後，再以Scrapling get --ai-targeted新核幾何、Scale及zoom／pixel三份正文。Scale專文完整補讀，角度方向、原角參考、對齊基準及不同像素設定分列。 示意限制：原創定位尺台：三件水平對齊／邊緣分布、同原稿調整尺寸／縮放／旋轉、有限16px點陣三切片。幾何／描邊／原角／AABB同源；真buffer與CSS檢視倍率分開。本站round與面積覆蓋率模型非Figma snap／抗鋸齒／輸出引擎。 原生軟體實測：未原生Figma對齊、縮放、旋轉、像素預覽或輸出實測；本站公開瀏覽器驗證與官方查核分開。 學習成效驗證：未真人判斷或圖像清晰度／學習遷移成效實測。

參考來源

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

相關知識