Figma Web Design

Figma Grid Layout 正式登場：設計排版的新解法

Figma 全新 Grid Layout 登場，突破傳統 Auto Layout 限制，支援二維網格排版、跨欄控制與 CSS 對接，設計更彈性、開發交接更順暢，全面提升協作效率與排版表現。

Irving 爾文
2025/05/26
5 mins

Figma Grid 2025

設計師可以學一下，Figma 在 2025 年加入新的 Grid 功能，對於設計師來說是個福音！對於視覺排版，「格致化、系統化排版」能大幅提升執行效率。

概述

在 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）、快捷鍵與交互細節優化，大幅提升團隊合作效率。

🚀 預約諮詢：網站設計與建置＋內容 SEO 優化

若你有 Shopify 電商網站或 WordPress 品牌形象、部落格設計與建站的需求，可以前往填寫表單預約諮詢。Irvinglab 爾文實驗室是一家深度經驗的網頁設計公司，專注打造 Shopify 和 WordPress 網站以及提供 SEO 優化與內容規劃的服務。

⚡️ 前往預約諮詢

Irving 爾文

Irvinglab 爾文實驗室創辦人 / Senior Web Designer / SEO Manager 🚀 專精 Shopify 電商網站設計與架站、 WordPress 品牌網站設計和部落格建置、SEO 關鍵字策略分析研究與規劃，工作經歷大小型公司（包含品牌方與代理商）、網頁設計接案公司、數位行銷公司、新創 Saas 軟體公司等，熱衷設計與文字創作、社群分享，專注網頁設計與架站平台、SEO 搜尋引擎優化，深度研究品牌行銷、UX 策略與數位產品、電商經營等領域，學習各式各樣的科技軟體。

文章: 162