Figma Design 教材 / Class LLL
文件、頁面與檢視:空白畫面先查哪一層?
換頁面與移動視窗,改的是不同東西
文件迷路時,先區分資料夾、檔案、頁面、區段與檢視範圍。從分層文件櫃切頁及定位區段,觀察內容改變和純檢視改變的差別,再核對新舊介面名稱與字型條件。
撰寫與維護:Class LLL · Lab Light Label|預估閱讀 11 分鐘
閱讀目標
- 指出文件、頁面與區段各組織什麼
- 區分換頁面、定位區段及畫布縮放
- 識別2026年專案改稱資料夾的歷史脈絡
- 分辨檢視問題、權限條件與本機字型問題
適用條件與學習範圍
同一份設計忽然空白,是開錯文件、切到別頁,還是視窗沒有對準內容?
- 可直接閱讀;若不清楚框架與群組的容器邊界,可在相關知識補讀。
能先核對文件與頁面,再使用區段或縮放至全圖定位;能說明看不到不等於刪除,區段也不等於框架排版。
止於文件定位、頁面/區段組織、檢視及平台條件。共享權限設定、版本還原、字型排版、約束及自動排版由各自教材承接;本站不操作帳戶或雲端文件。
原理與判斷
畫面是資料在特定檢視下的結果。「換了另一頁」會換目前畫布的內容;「縮放或定位」只改同一頁怎麼被看見。兩者都可能讓原先的圖面離開眼前,卻不能用相同方式修復。先指出正在看哪份文件、哪頁、哪一區,再判斷資料是否真的消失。 資料夾是檔案瀏覽器裡的文件組織方式,頁面是在一份Design文件內分開的畫布,區段組織同頁畫布的脈絡。它們不是同一種容器,也不是三種自動排版。
資料夾在文件外,頁面在文件內
在檔案瀏覽器找文件及資料夾;若已在文件中,可用Figma選單的返回檔案返回。資料夾能收納不同Figma產品的文件,不是一個Design文件內的頁面。草稿區適合個人探索,之後可將文件移入資料夾;草稿不等於永遠不能分享,也不代表無條件私密。存取仍需看實際共享與組織條件。 官方從2026-08-03起將專案轉為資料夾,說明原內容與存取權保持。舊教學的專案、舊網址含專案,不必直接判成另一種畫布物件。本站「訂位流程」屬產品設計資料夾,「素材研究」在草稿區,是兩個分開的示例位置。方案的文件、資料夾及頁數限額各有條件,不把一種方案的數字當成所有帳戶通用規則。
切頁面換畫布,不是隱藏同一批圖面
每個頁面有自己的畫布。在左側檔案分頁開當前頁面名稱的清單,選另一頁便換到那頁內容。具可編輯才能管理頁面;只有可檢視仍可探索內容。新增、建立副本、重新命名、刪除在頁面清單管理,拖曳重排的是頁面順序,不是圖面XY。 文件櫃的「探索」有A01/A02,「交付」有B01/B02;切頁後讀數的名稱變了,但每頁保存自己的兩件原稿。真實Figma若需把圖層改放另一頁,可選該層右鍵移至頁面,官方說會在目標頁保持相同座標。這是移動歸屬,與僅切換觀看頁面不同;本教具不實作移動或刪除。
區段是同頁的脈絡,不是排版引擎
區段可為畫布上的一組設計命名、連結及交接。用工具列區段建立,或選內容右鍵以新區段包住;官方預設快捷鍵Shift+S。區段可以含其他區段,但不能放在框架或群組裡。它的組織責任不能取代框架的尺寸、裁切或自動排版規則。 雙擊圖層面板裡區段圖示可定位該區。文件櫃按「定位:已整理」,窗口對準該盤,B01的資料仍在同一頁,座標不改,沒有將兩個內容重新排列。準備開發是交付狀態,不會鎖住內容;不要用標記代替存取控制。刪區段可能連內容一起刪,請先確認你要移除組織區域還是內容,本頁不引導破壞性嘗試。
Zoom只改檢視,不能拿來修正尺寸
在右側縮放與檢視選項使用縮放至全圖找回當頁內容,或先選明確對象再縮放至選取範圍。畫布縮放檢視只影響目前文件分頁的觀看比例,不把框架寬度或圖面XY改成另一個數字。桌面UI比例、瀏覽器整頁縮放檢視與畫布縮放檢視是不同控制。 本教具100%到150%只放大右台窗口裡的內容;抽屜、原座標與全櫃8件原稿保持。定位後窗口可能裁掉另一區,但不是裁切內容或資料刪除。真實Figma的像素預覽是點陣外觀預覽,像素格線是參考格線;開預覽不代表向量來源被轉成點陣。本頁未模擬兩種像素檢視。
新介面的入口與快捷鍵要按功能核對
2026-10-22查核的官方新版導覽列位於文件最左側,檔案提供頁面與圖層面板,資源與變數也在此列。變數不必先清空選取才可開。只有可檢視可看檔案分頁,可編輯可使用全部tabs;產品與編輯權限條件應先確認。 不同官方頁面對Windows 圖層面板與新版檔案分頁列出的快捷鍵不同,不把它們合成一個通用指令。這頁優先用可見檔案、頁面名稱與縮放與檢視選項入口;若快捷鍵沒反應,檢查平台、自訂快捷鍵、鍵盤焦點及瀏覽器攔截,再回具名入口確認。本站分層文件櫃按鈕是教學操作,不是原生Figma快捷鍵。
同一文件能開,不代表本機字型齊全
Figma可用預設提供的字型;Windows/macOS瀏覽器使用額外本機字型,需安裝字型及Figma 字型安裝程式,再重新載入文件。桌面應用程式已包含字型安裝程式,但仍需電腦上有對應字型和樣式。共享文件不會自動讓每位協作者都有同樣字型。 若字型缺失,先核對字型家族、樣式、安裝及使用權利,別用亂改文字框尺寸掩蓋缺字型。ChromeOS/Linux的額外本機字型支援不同,不能直接套用Win/Mac流程。官方另有上傳帳戶字型供MCP/代理程式使用的途徑,需具權利與授權;本站不安裝、不上傳字型。
步驟與觀察
先記下文件名稱與位置
在有權存取的Figma Design檔,核對名稱、資料夾或草稿區,以及帳戶/團隊;從Figma選單返回檔案可回檔案瀏覽器。看到舊專案字樣,先辨認2026年改名脈絡,不立刻重建文件。 操作名稱對照(中文為本站教學譯名): 檔案瀏覽器 > 文件/資料夾/草稿區(介面原文:File browser > 文件/Folders/Drafts) 左側導覽列 > 檔案 > 當前頁面名稱(介面原文:左側 navigation bar > File > 當前頁面名稱) 工具列 > 區段/右鍵 > 以新區段包住(介面原文:工具列 > Section/右鍵 > Wrap in new section) 右側 > 縮放與檢視選項(介面原文:右側 > Zoom/view options)
打開檔案,核對目前頁面
從最左側導覽列選檔案,再開當前頁面名稱清單。先選已有內容的頁面,觀察畫布與圖層面板是否換內容;需要管理頁面才確認可編輯。先不刪除看似空白頁。
用區段定位同頁脈絡
在圖層面板找已命名區段並雙擊圖示定位。要自己建立,使用工具列區段或選內容右鍵以新區段包住,需可編輯。核對區段內實際內容,別因為畫面重疊就假定歸屬正確。
先找回視圖,再談修改幾何
使用縮放與檢視選項的縮放至全圖;若已選到目標,可縮放至選取範圍。看選取內容W/H與XY是否保持,分清畫布縮放與UI比例。無需為看不見就縮小所有圖面。
排查字型及平台差異
若同檔在兩台電腦字型不同,先核對字型樣式是否可用。Web額外本機字型需字型安裝程式,桌面版已含服務;尊重字型授權,重載後再查。快捷鍵失效先用可見具名功能,勿把網站教具按鍵套到Figma。
帶回一條可說明的定位路徑
寫下「資料夾或草稿區→文件→頁面→區段→Zoom」,每次只改一層並描述結果。需要理解區段內框架邊界時補讀框架/群組,再返回本頁保留檢視。共享權限、版本與排版的進一步問題另查,不把本頁當全功能管理器。
常見問題
空白畫面就以為資料被刪掉
先核對文件與頁面,再縮放至全圖、從圖層面板定位區段。若層仍在但不見,續查顯隱、裁切與歸屬;這些不是同一個原因,別先刪稿重做。
以為切頁面是在隱藏原稿
比較A01/B01等內容名稱;頁面換的是各自畫布。要移動資料是移至頁面,只有換頁不會把原圖層搬走。
把區段當框架自動排版
區段組織脈絡;尺寸、裁切、約束與自動排版要選對框架或子層再查。定位區段只改觀看範圍,模型XY不改。
舊教學說專案,新介面只有資料夾
核對官方2026-08-03起改名紀錄,內容與存取權不因改名而更動;不能憑名稱推論同事失去權限。
協作者打開同檔卻缺字型或快捷鍵不通
核對平台、字型樣式、字型安裝程式、鍵盤焦點及可見功能入口。共用文件不保證本機環境相同;不要先改幾何或替換所有字型。
適用範圍與證據
原教材查核日期:2026-10-22 適用範圍:Figma Design;Pages/Sections與navigation官方列所有方案,管理內容需可編輯。方案限額仍依所屬團隊/文件;新介面及平台快捷鍵需核對。Win/Mac Web額外本機字型需字型安裝程式,桌面版內含;ChromeOS/Linux條件另列。 來源狀態:2026-10-22讀取研究者當日Scrapling取得的N01/N03/N04/N12官方正文;folder及Section讀取2026-10-21 S42/S58保存正文,不冒稱全來源今日重抓。已核本文入口;未核所有管理、權限、刪除及字型上傳分支。 示意限制:本站原創兩文件、四頁、八圖面及分層文件櫃。只示意切頁與檢視的區別,不讀寫Figma雲端、模擬真帳戶或原生縮放引擎;素材可作本站原理示意。 原生軟體實測:未於原生Figma實測;本文官方查核與本站瀏覽器驗證各自記錄。 學習成效驗證:未真人試用,沒有學習成效證據。
參考來源
- Figma Help|Guide to files and folders
- Figma Help|Create and manage pages
- Figma Help|Organize your canvas with sections
- Figma Help|Adjust your zoom and view options
- Figma Help|Explore the navigation bar and left sidebar
- Figma Help|Add a font to Figma
來源依原教材逐頁維護;本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤,歡迎來信提出具體段落與版本。
相關知識
- 框架與群組:容器的邊界由誰決定? — 辨認組織區域與內容容器
區段幫你定位一區;其中框架與群組才有各自邊界責任。接著用固定子項比較容器尺寸、包邊與裁切,再返回原文件/頁面檢視。