---
title: "🗡️ 設計《鬼滅之刃》柱們集結的網頁"
slug: demonslayer
url: https://rar.design/posts/demonslayer
published_at: 2025-10-26
modified_at: 2026-01-23
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["figma"]
access: public_access
---

# 🗡️ 設計《鬼滅之刃》柱們集結的網頁

> 利用 Figma 的 Component Variant 來製作帥氣的滑鼠點擊互動效果動畫🔥

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2025-10-26

打造《鬼滅之刃》風格的互動轉場動畫單元重點：透過 Figma 打造動畫感網站介面實作角色選單切換與轉場動畫活用 Auto layout、Component Variant 與 Smart animate相關課程：100 種 Figma 設計的方法｜UI/UX 線上課程 操作步驟整理：✅ 準備素材與輸入角色名稱匯入背景圖片與去背角色圖使用文字工具輸入角色名字設定字體與漸層（上深下淺） ✅ 製作角色縮圖選單縮圖尺寸設定為 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裁切畫面區域，僅顯示特定範圍內容 📖 延伸閱讀建議：Figma 官方教學：Smart animate 使用方法