🟡 Figma Grid Layout 正式登場：設計排版的新解法 設計師可以學一下，Figma 在 2025 年加入新的 Grid 功能，對於設計師來說是個福音！對於視覺排版，「格致化、系統化排版」能大幅提升執行效率。 官方發表影片：https://youtu.be/j9-d1HskOxs?si=gImuiiGtY0BNM9Wc 🍎 概述 在 Figma Config 2025 上，Figma 推出全新 Grid Layout 系統，作為 Auto Layout 的進化選項，讓設計師得以跳脫「只能水平或垂直排列」的限制。從基本網格設定、跨欄控制、間距調整，到與 CSS 實際相容的結構運算，改變設計方式與工作流程。 🍎 重點摘要 ✏️ Grid Layout 作為 Auto Layout 的新維度 可與原有水平、垂直選項並存，讓設計從單一維度進化為靈活的二維布局。 ✏️ 自由拖放與跨欄調整設計區塊 項目可自由移動、縮放、跨欄排列，調整流暢直覺，完全即時預覽效果。 ✏️ Track Resizing 與手動控制尺寸 支援手動輸入與滑動拉調的 Track 設定方式，讓間距與欄寬更加可控。 ✏️ Multi-edit 與拖曳貼齊快速編排 支援多元素同步編輯、快速貼齊對齊，讓表格、相簿與內容塊統一排版更加輕鬆。 ✏️ Grid 與開發對接更順暢 Dev Mode 中可直接讀取 Grid Layout 為 CSS Grid 語法，大幅簡化開發交接與對齊問題。 ✏️ 與 Auto Layout 無縫搭配使用 支援 Grid 內嵌 Auto Layout、Frame 巢狀操作，靈活度更勝以往。 ✏️ 實際案例與進階技巧展示 從卡片排列、定價表格、跨裝置版型設計，到像素風格繪圖 pixel art，完整展示 Grid 的應用潛力。 ✏️ 設計流程中的協作透明與一致性 透過 Prototype、測量工具（Shift+M、Shift+Y）、快捷鍵與交互細節優化，大幅提升團隊合作效率。 🪴 關鍵字：#figma #figmaconfig2025 #grid #autolayout #webdesign #網格排版 #網站設計 #爾文實驗室 #irvinglab #irving 🪴 編輯者：I️rvinglab 爾文實驗室 - 2025/05/26