Figma功能: Grid Layout (網格佈局) • Figma 教學 (含CC字幕)

這集我們來看Figma新推出的『Grid Layout』的使用方式(Beta. 05/2025)。
我們可以利用Grid Layout，來製作出較複雜一些的排版。

---------------------------------------------------------

【參考資訊】
關用Figma Grid Layout: https://help.figma.com/hc/en-us/articles/31289469907863-Use-the-grid-auto-layout-flow
CSS Grid (Mozilla): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
CSS Grid (CSS-Tricks): https://css-tricks.com/snippets/css/complete-guide-grid/

---------------------------------------------------------

【章節】
00:00 Grid Layout背景前言
01:08 之前的做法
02:46 建立Grid Layout
05:21 加入設計卡片至Grid
09:20 Grid周圍的"Auto"寬度設定
10:50 Grid卡片排版
12:31 Grid卡片內切齊
14:01 Grid 額外設定: Stroke顯現方式
16:37 Grid 加入頁面中間方式
19:54 利用Grid 來製作Table表格
24:57 Breaking the Grid 脫離網格設計
27:46 Grid實際利用範例
29:35 結尾

---------------------------------------------------------

支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign

---------------------------------------------------------

#FigmaGrid #Grid設計 #網格佈局 #網格設計 #Figma網格