📱 Figma 做出會「跟著手機一起晃」的螢幕動態效果

📱 Figma 做出會「跟著手機一起晃」的螢幕動態效果

不用進 3D、不用做動畫

用 Plugin 就能實現 超立體 的視差感！

———✄———✄———✄———✄

🎯 工具：Shapelax Plugin

用它來製作 Gyroscopic 3D 效果

呈現畫面跟著手機角度動起來的感覺

📸 準備三張不同角度的圖

👉 左傾｜中間｜右傾

模擬實際使用者的視角變化

———✄———✄———✄———✄

✏️ 步驟 1：描點製作共用物件

在右傾的圖上用描點工具描出主角物件

像是杯子、果汁、氣泡

複製這組物件，貼到中間畫布

直接調整描點位置，不要重畫！

再貼去左傾的畫面，繼續調整位置

✅ 這樣三張圖才會「結構一致、不抖動」

———✄———✄———✄———✄

📝 步驟 2：文字與橫條的立體感

三張畫布各複製一組文字與橫條

微調位置、加點變形

讓前景元素也有 Gyro 的動感

———✄———✄———✄———✄

🧠 步驟 3：Shapelax 一鍵動起來

開啟 Shapelax → Name Mapping → Embed Code

直接複製連結到手機

你就會看到整個畫面跟著手機角度一起晃！

超、級、扯 🤯

根本像在做互動動畫，但完全沒碰到 After Effects！

———✄———✄———✄———✄

✨ 適合應用：

☑️ 飲料、食品 UI

☑️ 展示 App 介面

☑️ 產品互動展示頁

#設計 ———✄———✄———✄———✄

📱 IG 追蹤 @Designer.riven 學更多設計小技巧

💻 完整設計線上課程在官網 🔗 rar.design

#Design #GraphicDesign #Figma #UI #UIUX #UIDesign