🗡️ 設計《鬼滅之刃》柱們集結的網頁
利用 Figma 的 Component Variant 來製作帥氣的滑鼠點擊互動效果動畫🔥
2025年10月26日 下午 1:01
UI/UX 設計打造《鬼滅之刃》風格的互動轉場動畫
單元重點：
- 透過 Figma 打造動畫感網站介面
- 實作角色選單切換與轉場動畫
- 活用 Auto layout、Component Variant 與 Smart animate
相關課程：
操作步驟整理：
✅ 準備素材與輸入角色名稱
匯入背景圖片與去背角色圖
使用文字工具輸入角色名字
設定字體與漸層（上深下淺）
✅ 製作角色縮圖選單
縮圖尺寸設定為 100×100
使用 Frame 包住縮圖並加上 Glass 效果
設定圓角與排版（參考影片數值）
全選加入 Auto layout（Shift + A）橫向排列
設定 Component Variant：選取角色狀態尺寸調整為 125×125，並加上白色描邊
✅ 建立角色切換的動畫結構
背景設為 Frame，角色加入 Auto layout 垂直排列
調整邊框只顯示第一隻角色，開啟 Clip content
名稱同樣使用 Auto layout，只顯示第一個角色名稱
於每個 Frame 放入對應角色圖片與名稱，確保對應角色圖層在最上方
進入 Prototype 模式，將角色按鈕連到對應 Frame
動畫設定為 Smart animate，依序連結全部角色按鈕與頁面
✅ 加入 Logo 與角色選單
將 Logo 靠左下對齊
貼上角色選單並選擇對應的 Component Variant
✅ 最終成果
🎉 完成！你已經成功製作出一個《鬼滅之刃》風格的互動式動畫網站原型！
想看下一個主題嗎？歡迎留言許願 💬
📎 重點筆記與延伸閱讀
| 工具名稱 | 用途說明 |
|---|---|
| Auto layout | 自動排列元素，可調整間距與對齊方式 |
| Component Variant | 建立按鈕的不同狀態（如選取與未選取） |
| Smart animate | 實現畫面轉場與滑順動畫效果 |
| Clip content | 裁切畫面區域，僅顯示特定範圍內容 |
📖 延伸閱讀建議：