UI: Carousel 製作 | Figma 教學
3.3K views · 2023-08-23
UI DesignMotion Design
這集來看一下該如何製作網頁常見的 Carousel, 像幻燈片的圖片展示區域. Carousel 是個挺常見的設計元素. 主題裡, 我們會運用到 "Max-Width" 和 Responsive Design 伸縮的設計方式來建立我們的物件. 我們也會來稍微看一下按鈕的 Target Size 概念.
設計檔: https://drive.google.com/drive/folders/1WJwj9LtW8qct6G1HzqCfRzN4iX5lh2yD?usp=sharing
支持這頻道: https://ko-fi.com/alandesign
---------------------------------------------------------------------------------------------------------
0:00 設計介紹
0:18 設計開始: 按鈕介紹
1:44 按鈕縮放設計
7:47 底圖 Auto Layout 製作方式
10:56 頁面順序提示小點
19:38 Carousel 元件Component 建立
21:58 互動Prototype 設定
22:44 效果展示
23:52 Responsive伸縮展示
25:00 結尾
---------------------------------------------------------------------------------------------------------
#carousel設計 #carousel製作 #幻燈片設計 #figma教學
設計檔: https://drive.google.com/drive/folders/1WJwj9LtW8qct6G1HzqCfRzN4iX5lh2yD?usp=sharing
支持這頻道: https://ko-fi.com/alandesign
---------------------------------------------------------------------------------------------------------
0:00 設計介紹
0:18 設計開始: 按鈕介紹
1:44 按鈕縮放設計
7:47 底圖 Auto Layout 製作方式
10:56 頁面順序提示小點
19:38 Carousel 元件Component 建立
21:58 互動Prototype 設定
22:44 效果展示
23:52 Responsive伸縮展示
25:00 結尾
---------------------------------------------------------------------------------------------------------
#carousel設計 #carousel製作 #幻燈片設計 #figma教學