Figma Site 教學 (含CC字幕)
3.6K views · 2025-06-20
Interaction & UXUI Design
這集我們來看Figma 新推出的 Site 的教學。
我們可以利用Site，在Figma裡面製作並發佈我們的網站。
Figma Site 是只有在付費的訂閱才可以使用。
---------------------------------------------------------
【參考連結】
探索Figma Site: https://help.figma.com/hc/en-us/articles/31230436657815-Explore-Figma-Sites
學習Figma Site: https://help.figma.com/hc/en-us/sections/31828278189847-Design-a-site
Figma Pricing: https://www.figma.com/pricing/
---------------------------------------------------------
【章節】
00:00 主題前言
00:19 快速預覽總流程
05:10 開新檔案: 介面跟Breakpoints
06:23 大方向概念: Responsive設計
07:43 製作Responsive設計物件
11:40 Site自動調制Responsive物件
14:42 Primary: 板塊順序層級
16:24 Design到Site前端語法不同
20:39 添加設計: 內建範例&自己的Library
24:18 文字斷點設定 (Text Style Breakpoints)
27:36 設計優化
29:02 Canvas Stacking & 響應設計調整
32:16 互動 Interaction
35:45 新增多的網頁分頁 (Webpage)
39:40 網站設定 (Title, Favicon等)
41:10 Accessibility 功能
43:43 額外: 縮短URL (tinyURL)
44:51 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
#FigmaSite #FigmaSite教學 #Figma網站製作 #Figma網站設計
我們可以利用Site，在Figma裡面製作並發佈我們的網站。
Figma Site 是只有在付費的訂閱才可以使用。
---------------------------------------------------------
【參考連結】
探索Figma Site: https://help.figma.com/hc/en-us/articles/31230436657815-Explore-Figma-Sites
學習Figma Site: https://help.figma.com/hc/en-us/sections/31828278189847-Design-a-site
Figma Pricing: https://www.figma.com/pricing/
---------------------------------------------------------
【章節】
00:00 主題前言
00:19 快速預覽總流程
05:10 開新檔案: 介面跟Breakpoints
06:23 大方向概念: Responsive設計
07:43 製作Responsive設計物件
11:40 Site自動調制Responsive物件
14:42 Primary: 板塊順序層級
16:24 Design到Site前端語法不同
20:39 添加設計: 內建範例&自己的Library
24:18 文字斷點設定 (Text Style Breakpoints)
27:36 設計優化
29:02 Canvas Stacking & 響應設計調整
32:16 互動 Interaction
35:45 新增多的網頁分頁 (Webpage)
39:40 網站設定 (Title, Favicon等)
41:10 Accessibility 功能
43:43 額外: 縮短URL (tinyURL)
44:51 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
#FigmaSite #FigmaSite教學 #Figma網站製作 #Figma網站設計