FAQ 下拉視窗製作 #1 | Figma 教學
這集來看如何製作像常見的 FAQ (常問問題) 的欄位製作.
內容包含了 Responsive 伸縮的設計, Fill container 的填滿, Clip content 的裁切效果, 和些variant跟動態方面的設計.
==========================================
Figma 設計檔下載: https://drive.google.com/drive/folders/1J39jYySFd1tVfBz7B66JUClbFSY1TYp7?usp=sharing
==========================================
參考範例: https://www.apple.com/us-edu/shop/buy-iphone/iphone-14-pro
==========================================
0:00 Intro
0:22 範例參考 (Apple.com)
0:48 開始製作
1:37 Responsive 伸縮設計
2:48 設計製作
6:55 Component 和 Variant 製作
7:40 Clip content 設計裁切
9:10 繼續 Variant 設計製作
11:46 動態製作
13:11 Clip content 對比
14:20 Text Property
16:33 完整優化設計
18:54 設計結果
19:26 結尾
==========================================
我的Behance: https://www.behance.net/alanhdesign
==========================================
#faq設計 #下拉視窗設計 #figma教學 #responsive設計 #clipcontent是什麼 #figmaclipcontent
內容包含了 Responsive 伸縮的設計, Fill container 的填滿, Clip content 的裁切效果, 和些variant跟動態方面的設計.
==========================================
Figma 設計檔下載: https://drive.google.com/drive/folders/1J39jYySFd1tVfBz7B66JUClbFSY1TYp7?usp=sharing
==========================================
參考範例: https://www.apple.com/us-edu/shop/buy-iphone/iphone-14-pro
==========================================
0:00 Intro
0:22 範例參考 (Apple.com)
0:48 開始製作
1:37 Responsive 伸縮設計
2:48 設計製作
6:55 Component 和 Variant 製作
7:40 Clip content 設計裁切
9:10 繼續 Variant 設計製作
11:46 動態製作
13:11 Clip content 對比
14:20 Text Property
16:33 完整優化設計
18:54 設計結果
19:26 結尾
==========================================
我的Behance: https://www.behance.net/alanhdesign
==========================================
#faq設計 #下拉視窗設計 #figma教學 #responsive設計 #clipcontent是什麼 #figmaclipcontent