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

想要像淀治一樣翻轉人生嗎？

那就從做出一個 Chainsaw Man Prototype 開始

用 Figma 揮下第一刀！

只要簽下這份設計契約

你就能學會如何在 Figma 中召喚出鏈鋸人專屬的酷炫網站

Figma 也能做出這種動畫感網站？

今天就帶你一步步做出 Chainsaw Man Prototype

先準備好角色的去背圖片

並且搭配對應的漸層背景

再把它們疊在一起

組成一個 Frame

把畫布的寬度拉開

調整成需要的尺寸

再把展開後的角色圖片

依比例縮放到合適大小

接著完成角色名稱和介紹文字

依照畫面的需要

逐步擺放到合適的位置

把目前展開的畫布全部選取起來

一次把寬度改成收合後的尺寸

記得每個畫布都要開啟 Clip content

在收合狀態下

調整角色人物的位置

並依照比例縮小大小

鏈鋸人收合狀態要換成淀治

背景也換一個顏色

把所有圖層都命名好

名稱一致

這樣在套用Smart animate時就能順利完成切換效果

先把收合狀態和展開狀態

都在畫布旁邊排好準備好

等等就能一次丟到桌機尺寸裡

新增一個桌機尺寸的畫布

把背景顏色調整成黑色

再把 Logo 放上去

接著一個一個

把角色卡片與內容

放進桌機畫布裡

排好位置準備接下來的互動設定

進入 Prototype 模式

把互動設定為 On click

導覽到下一個展開畫面

動畫效果選擇 Smart animate

Curve 設定成 Quick

一個一個把所有畫面的互動都串接起來

最後預覽一下 完成！