---
title: "📱 Figma 做出會「跟著手機一起晃」的螢幕動態效果"
slug: orangejuice
url: https://rar.design/posts/orangejuice
published_at: 2025-11-23
modified_at: 2025-11-23
author: "設計師 Riven"
category: "UI/UX 設計"
access: public_access
---

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

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

📱 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