Framer.js 打造高保真產品原型：從設計稿到互動演示

前言

Framer.js 是基於 CoffeeScript/JavaScript 的原型框架，開源且可深度 Hack。配合 Framer Studio 導出代碼，可快速將靜態設計稿轉為接近 100% 還原度的互動原型。本文以 24PI 專案為例，拆解核心實作邏輯。

環境準備與裝置設定

將 Framer Studio 導出的框架代碼覆蓋至專案目錄，即可自由修改。裝置類型可透過變數動態傳入：

window.Framer.Defaults.DeviceView = {
    deviceScale: -1,
    orientation: 0,
    contentScale: 1,
    deviceType: g_device || "iphone-5s-silver"
};

核心實作：三層背景圖 + 遮罩觸發 + 循環切換

1. 載入三張全尺寸背景圖

layerIndex = new Layer({width:650, height:1100, image:"./images/24piIndex.png"})
layerInnerA = new Layer({width:650, height:1100, image:"./images/24piInnerA.png"})
layerInnerB = new Layer({width:650, height:1100, image:"./images/24piInnerB.png"})

預設顯示首頁，其餘兩層 sendToBack() 隱藏。

2. 球體熱區遮罩觸發進入二級頁面

layerTouch = new Layer({x:0, y:0, width:300, height:300, opacity:0})
layerTouch.center()  // 置中覆蓋球體

layerTouch.on Events.Click, ->
    layerIndex.animate properties: opacity: 0
    layerInnerA.animate properties: opacity: 1, curve: "linear"
    layerTurnA.bringToFront()
    layerTurnB.bringToFront()

點擊透明遮罩層，首頁淡出，二級頁面淡入並置頂。

3. 二級頁面左右按鈕循環切換邏輯

turnA = true
time = 0.25

layerTurnA.on Events.Click, ->
    if turnA is true
        # 切換到 InnerB 邏輯
        turnA = false
    else
        # 切換回 InnerA 邏輯
        turnA = true

布林旗標 turnA 控制兩張二級頁面互換，配合動畫時間 time 保持流暢。

效率對比：Framer.js vs Axure 等傳統工具

• 熟練 JS 開發者：上述原型 < 10 分鐘完成。
• 代碼即設計：版本控制、複用元件、參數化調整、邏輯複用均為原生 JS 能力。
• 還原度極高：動畫曲線、物理引擎、手勢、3D 變換皆可像素級控制。

但工具選擇應以「效率與目標」為準，不必為用工具而用工具。

結語

Framer.js 以代碼驅動設計，將「設計稿」轉為「可運行的產品」，讓設計師、工程師、PM 在同一媒介上溝通。掌握其核心 API（Layer、Animation、Events、States），即可快速產出高保真原型，縮短「想法→驗證」迴路。