---
title: "用 Figma 做出《怪奇物語》拖動視差轉場（正常世界 ↔ 顛倒世界）"
slug: stranger-things
url: https://rar.design/posts/stranger-things
published_at: 2026-01-12
modified_at: 2026-01-23
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["figma"]
access: public_access
---

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

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

你有沒有看過那種「畫面一拖就切換成另一個世界」的視差轉場？像《怪奇物語》一樣，左邊是正常世界，右邊是顛倒世界。這篇教你用 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影集、遊戲、活動視覺提案