用 Figma 做出《怪奇物語》拖動視差轉場（正常世界 ↔ 顛倒世界）

你有沒有看過那種「畫面一拖就切換成另一個世界」的視差轉場？
像《怪奇物語》一樣，左邊是正常世界，右邊是顛倒世界。
這篇教你用 Figma 的 Prototype + Smart Animate，做出「拖動切換世界」的視差效果。

只要把圖層結構整理好，就能做出非常有戲的互動展示！！

1｜準備素材：兩個世界的物件都要「分層」

先準備好兩套畫面：

正常世界的背景與物件（樹、房子、雲、怪物…）

顛倒世界的背景與物件（同樣的元素，但風格變暗、扭曲、怪異）

你可以用 AI 生成想要的圖，再把物件一個一個去背切出來。

這裡有一個超重要的規則：

所有物件都要命名圖層。

因為你後面要用 Smart Animate，Figma 會靠圖層名稱去「配對」兩個畫面中的同一個物件。
如果沒命名或命名不一致，動畫就會亂跳、卡頓、或直接失效。

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

2｜建立第一張畫布：正常世界（但先把兩個世界疊在一起）

新增一個桌機尺寸畫布（Desktop Frame）

把「正常世界」與「顛倒世界」背景 先重疊放在同一張畫布

先把顛倒世界背景 裁切成一半（例如只露出右半邊）

小技巧：用「樹」當切換中心點

把中間那棵樹鎖定，當作視覺中心，左右就像兩個世界的交界。
這樣觀眾拖動時會很直覺：「從樹這裡跨過去就是另一邊世界」。

把左右兩邊的物件依照排版位置擺好（正常世界的物件放左側、顛倒世界的物件放右側）

全選所有物件 → 群組（Group）

把整組群組移到畫布中間，讓它更像一張完整的「長圖場景」

為什麼要群組？

因為後面切換視角時，你會用 X 軸去平移整個世界，群組起來移動會快很多，也比較不會漏掉物件。

勾選 Frame 右側的 Clip content
這樣可以預覽「畫布外的內容被裁切」的效果。
（注意：被裁切只是看不到，物件仍存在，等下做轉場會用到）

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

3｜複製第二張畫布：顛倒世界（用 X 軸平移視角）

直接複製剛剛的畫布，當作顛倒世界的頁面

在圖層面板選取「整個群組」

到右側面板調整 X 軸位置，把畫面平移到顛倒世界那一側
你會看到畫面視角「滑進」顛倒世界。

微調顛倒世界的背景裁切與物件排版，確保顛倒世界看起來成立

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

4｜做出「視差感」的關鍵：讓每個物件用不同方式出場

接下來是整個效果看起來「扯不扯」的核心。

你要在「正常世界」畫布裡，設計顛倒世界物件的出場方式，例如：

從樹後慢慢滑出來

原地放大縮小（像從另一個維度擠出來）

用裁切讓物件逐漸顯現

讓某些物件移動距離更大，造成更強烈的前後景差

重點只有一句：每個東西動的方式都要不一樣。
這樣拖動時，才會有「層層景深」的視差感。

接著用同樣方法，在「顛倒世界」畫布裡
反過來設計正常世界物件的出場方式。

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

5｜Prototype 設定：On Drag + Smart Animate

進入 Prototype 分頁

把「正常世界」畫布連到「顛倒世界」畫布

觸發方式選：On Drag

動畫效果選：Smart Animate

按預覽（Present）

你就能用滑鼠拖動，讓畫面在兩個世界之間自由穿梭。
而且因為物件錯位與出場方式不同，會有超有戲的視差效果。

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

常見問題與排雷

Q1：為什麼我的 Smart Animate 會抖動？

最常見原因是：

兩張畫布的物件圖層 名字不一樣

物件結構不一致（第一張有群組，第二張沒有；或層級不同）

✅ 解法：確保兩張畫布的圖層結構與命名完全對齊。

Q2：為什麼拖動切換看起來很「平」？

你可能所有物件都用同一種移動方式。
✅ 解法：讓不同物件有不同移動距離、不同出場方向、不同顯示方式，視差才會立體。

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

結語：這招很適合做互動作品集與提案展示

這種「拖動視差切換世界」的技巧，非常適合：

作品集展示（互動轉場直接加分）

產品故事頁 / Landing Page 概念 Demo

影集、遊戲、活動視覺提案