如果你是從 Figma 轉過來，可能會對於圖層選取方式不太習慣；又或者你是 Framer 新手，常常專案做到後面發現圖層越來越多，變得很難選取與整理。本文內容整理自官方 Fundamentals 教學中的《Interacting with Layers》，一次說明 Framer 最核心的圖層操作技巧，包含選取邏輯、父層控制、多選與巢狀行為，希望能幫助你在實際設計時減少卡關、提升整體操作效率。
Framer 的圖層選取邏輯和 Figma 相反
在 Figma 或 Sketch 中，通常需要：
先選到最外層，再透過雙擊一路往下鑽
或按住 ⌘ Command / Ctrl 直接選取被巢狀包住的圖層
但在 Framer 中，操作方式是相反的。不論圖層被包得多深，只要直接點擊畫布上的物件，就能選取該圖層，不需要按任何按鍵。一開始可能需要適應，但這樣的好處是圖層階層不會干擾到你的操作，可以更專注在物件本身，而不是一直花時間找圖層。
那如何快速選取父層？
Framer 採用「由下往上選取」的方式。當你選取某個圖層時，按下 Esc 鍵就會選取父層，繼續點的話就會一層層往上選取。
而 ⌘ Command / Ctrl 在 Framer 中則是會直接選到最外層。
實用的圖層多選小技巧
大家應該都知道可以用 Shift + 左鍵點擊，或者透過拖曳框選的方式來多選。
在 Framer 裡面有一個實用的小技巧，如果只想選取「完全被框住」的圖層，可以在拖曳選取時按住 ⌥ Option / Alt。這樣就只會選取完全位於框內的圖層，在畫面元素比較多的時候很好用！可以避免一直選到多餘的物件。
關於圖層管理的小撇步
當設計結構開始變得複雜，直接在畫布上點選可能不夠直覺，這時就需要搭配 Layers 面板 來管理圖層結構。
圖層收合
按住 Alt / Option 再點擊圖層的展開箭頭，可以幫助快速找到物件，也能讓面板維持整潔。
圖層自動命名
圖層命名清楚，可以大幅提升辨識與操作速度，但手動命名非常耗費時間。這時可以善用 Framer 的「圖層自動命名」功能。可以在 Layers 面板中按右鍵選單找到，也可以選取圖層後，按快捷鍵 ⌥ Option + R / Alt + R，快速為圖層命名，減少整理圖層的時間成本。
Framer 中移動圖層的正確方式
當物件是絕對定位 (Absolute positioning) 時，可以用以下移動方式
直接拖曳圖層自由移動，小技巧是選取後 Mac 按住 ⌥Option +⌘ Command / Windows 按住 Alt + Ctrl，即可鎖定圖層拖曳，避免誤選到其他物件。
方向鍵：每次移動 1 px
Shift + 方向鍵：每次移動 10 px（也可以到 Preferences → Nudge Amount 自訂，例如設定成 8 px）
移動時如何避免變成巢狀結構
在 Framer 中，只要將圖層拖曳到另一個 Frame 的範圍內，或是在 Frame 裡建立新的 Frame，該圖層就會自動成為子圖層。如果希望圖層彼此重疊，但不想觸發自動巢狀，可以在放下圖層時按住 Space 鍵，即可避免被包進 Frame 中。
小結
在 Framer 中，圖層操作的熟悉度，會直接影響後續的版型調整、動畫設定與專案維護。如果一開始沒有建立正確的選取與巢狀觀念，專案越做越大時，操作成本只會越來越高。
有些功能可能用文字不太好想像，一邊對照這篇文章，一邊在 Framer 中實際操作，還可以再搭配官方教學影片。讓這些選取方式與快捷鍵變成直覺操作，後續不論是版型設計或動畫製作，整體效率都會大大提升！