前言說明

在這篇文章會分享 Figma 的圖層管理技巧，從基礎的 Frame 設定，到如何運用柵格系統（Grid System），以及使用約束（Constraints）來設計，元素在不同螢幕尺寸間的穩定性。良好的圖層與柵格系統管理能確保排版一致性與響應式表現，以下開始介紹 🌻！

圖層管理

在開始繪製前，請先選擇 Frame，也就是設計的框架容器，Figma預設提供了多種裝置的尺寸選項，像是電腦版、平板版、手機版等，讓你可以根據實際需求快速建立對應的版型。

（Figma預設提供了多種裝置的尺寸）

在介紹 Figma 的柵格系統（Grid） 之前，我們先來簡單延伸說明一下響應式設計（RWD, Responsive Web Design）的基本概念。在 RWD 中，常會依據不同的 螢幕寬度（width），把裝置大致分成幾個 斷點（Breakpoint），這些名稱是業界慣用的，但不是絕對標準，可以依照自己公司或團隊的規範去設計：

（這是參考 Bootstrap、Tailwindcss 等主流框架的定義）

柵格系統（Grid System）

在 Figma 的屬性面板中，在 Design 頁籤內的 Local styles 可以讓使用者自行定義柵格樣式（Grid styles）：

1. Name：無填值，預設帶入Grid。
2. Description：可輸入描述說明，這部分不必填。
3. 選擇合適的屬性（Properties）：如柵格系統 (Grid) 、欄 / 欄位 (Columns)、列 / 行 (Rows)。點擊最左側的圖示，可以設定佈局大小、顏色及透明度。

（柵格系統設定操作）
設定完成後，可以快速將柵格樣式應用於每個框架容器（Frame），選擇 Frame 後找到 Layout Grid 點擊「Apply Styles」，即可選擇剛才設定的 Grid Style。
透過佈局（Layout） 可以更精確地對齊元素、統一間距，後續加上 Constraints 和 Auto Layout 可預測響應式排版，並確保設計能夠適應各種螢幕尺寸。

約束（Constraints）

當我們調整 Frame 的大小時，會發現裡面的子圖層位置會跑掉，這時就需要設定 約束（Constraints） 來避免這種情況，透過設置 Constraints 來保持子圖層在 Frame 縮放過程中的穩定性，確保它們不會移位、或因為Frame縮小而消失，並且能夠隨著父元件一同調整位置。

（約束設定操作）
點擊要設定的子圖層，到屬性面板找到「Position」最右方有個小圖示，可以設定要怎麼對齊跟父圖層縮放，預設會設定上、左有做約束。這邊也要注意下，只有在Frame裡面的元素才可以做約束哦。

圖層可視／可編輯性管理

當我們在畫面上堆疊了許多元件時，很容易不小心點到上層的圖層，導致編輯變得卡卡的，這時候就可以善用「隱藏（Hide）」的功能，點擊圖層旁邊的👁️眼睛圖示，先暫時隱藏不使用的圖層，減少畫面干擾，這樣可以更聚焦在要編輯的圖層上啦，畫面乾淨更好操作。

（「隱藏」input 2圖層避免被編輯）

在進行畫面編輯時，若需要參考既有圖層的排版或位置，但又不希望誤觸或不小心修改到其他圖層，可以善用「鎖定（Lock）」的功能。這樣就可以讓圖層維持在可見的狀態下，同時避免被選取或編輯，也能避免其他人員進來協作時，編輯到已完成的圖層，有助於提升操作的精準度，讓修改更為精確。

（「鎖定」input 2圖層避免被編輯）

元件 ( Component )

在實際專案中，若客戶希望某些元素（如按鈕、卡片、表單欄位等）風格保持一致，建議可透過 建立元件（Create Component） 的方式，將這些樣式模組化、統一管理，元件會出現在左方功能列的 資產(Assets) 裡 。這樣未來若需要更新樣式，只需修改原始元件，所有元件的分身都會同步套用變更，提升整體維護效率也增加方便性。

（按鈕元件更換背景顏色）
選取要製作成Component的圖層，再到屬性面板按「新增元件 (Create Component)」，這樣就完成了，之後如果要使用該組件，可直接選中元件做拖曳，複製分身到框架容器（Frame）內。

結語

在這篇分享介紹了 Figma 包括 Frame 建立、圖層管理與 Component 製作等實用技巧。
這些功能都是進行設計時，常見的基礎操作，無論是用來製作 Mockup，還是做出具互動性的 Prototype。
接下來會實際製作註冊頁面的 Mockup，敬請期待！🤩

參考資料與延伸閱讀

⑴ Figma學習資源
⑵ 使用工具來源：Figma
⑶ 斷點參考來源：Bootstrap
⑷ 斷點參考來源：Tailwindcss