---
title: "💣 當蕾潔拿著炸彈追著你趕設計稿（完整設計過程）"
slug: chainsawman
url: https://rar.design/posts/chainsawman
published_at: 2026-01-19
modified_at: 2026-01-23
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["figma"]
access: public_access
---

# 💣 當蕾潔拿著炸彈追著你趕設計稿（完整設計過程）

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-01-19

想要像淀治一樣翻轉人生嗎？那就從做出一個 Chainsaw Man Prototype 開始用 Figma 揮下第一刀！只要簽下這份設計契約你就能學會如何在 Figma 中召喚出鏈鋸人專屬的酷炫網站 Figma 也能做出這種動畫感網站？今天就帶你一步步做出 Chainsaw Man Prototype 先準備好角色的去背圖片並且搭配對應的漸層背景再把它們疊在一起組成一個 Frame 把畫布的寬度拉開調整成需要的尺寸再把展開後的角色圖片依比例縮放到合適大小 接著完成角色名稱和介紹文字依照畫面的需要逐步擺放到合適的位置 把目前展開的畫布全部選取起來一次把寬度改成收合後的尺寸記得每個畫布都要開啟 Clip content 在收合狀態下調整角色人物的位置並依照比例縮小大小鏈鋸人收合狀態要換成淀治背景也換一個顏色 把所有圖層都命名好名稱一致這樣在套用Smart animate時就能順利完成切換效果 先把收合狀態和展開狀態都在畫布旁邊排好準備好等等就能一次丟到桌機尺寸裡 新增一個桌機尺寸的畫布把背景顏色調整成黑色再把 Logo 放上去 接著一個一個把角色卡片與內容放進桌機畫布裡排好位置準備接下來的互動設定 進入 Prototype 模式把互動設定為 On click導覽到下一個展開畫面動畫效果選擇 Smart animateCurve 設定成 Quick一個一個把所有畫面的互動都串接起來最後預覽一下 完成！