Figma 故事板 → 場景動態設計

Figma 故事板 → 場景動態設計 是做什麼的？

故事板是一系列靜態的 1920×1080 影格。你的任務是產生一個場景，其時間軸在它們之間移動。大多數的運動已經存在於設計中——將其還原，而不是發明它。

無法執行程式碼？ 每當此指南提到「編寫生成器腳本」時，改為透過 picsart_scene_patch 建構場景，並在每次變更後使用 picsart_scene_query_layout 鎖定相同的不變量（請參閱下方的「命令」）。方法完全相同——只有執行介面不同。

流程

1. 讀取樹一次——如果使用者已透過他們的 Figma 連接器分享故事板，請讀取頁面的影格樹一次：它會回傳每個影格、圖層、名稱和方框。以下所有內容都由此衍生。不要逐影格瀏覽整個板子來探索。
2. 規劃節拍——在編寫之前，先寫下節拍表（如下）。
3. 從使用者分享的設計中將每個元素萃取為其自己的圖層：根據其來源測量值建構可編輯的形狀幾何，並對現有圖層使用 picsart_scene_import_figma_paint 來處理 CSS 填色、陰影或漸層繪畫。保持文字為動態。此處不公開自動形狀節點轉換。僅對不支援的處理方式或真正無法分層的來源使用影像；請參閱萃取。
4. 從幾何形狀建構場景，並鎖定每個規則。 在可以執行程式碼的地方，編寫一個生成器腳本（非手寫的 JSON），以便每個規則都變成一個 assert；在不能執行程式碼的地方，透過 picsart_scene_patch 建構它，並使用 picsart_scene_query_layout 鎖定相同的不變量。幾何形狀來自元數據，絕不來自目測。
5. 以數值方式驗證，然後導出。

步驟 3–5 每個場景執行一次，按順序——該迴圈就是此方法。

單一靜態影格

當要求是單一影格（靜態圖片、商店圖片、卡片）時，沒有故事板。跳過節拍，將該影格建構為靜態場景：

1. 透過使用者分享的 Figma 連接器讀取選取的影格。 其大小為 composition.width 和 height，其填色為 composition.background，一個簡短的 duration（1）就足夠了。
2. 每個子項為一個圖層，按繪製順序（樹中的第一個子項在最底部）。圖層的 position 是其方框在影格中的中心點 [x + width/2, y + height/2]：圖層繞其中心點旋轉和縮放。交叉檢查一個巢狀子項與影格：有些群組會將子項儲存在相對於群組的位置（references/figma-extraction.md）。
3. 每個子項應使用能保持其可編輯性的媒介：編寫形狀幾何，然後透過 picsart_scene_import_figma_paint 套用其 CSS 繪畫，文字作為動態文字，每個 IMAGE 填色作為媒體圖層放在其原始點陣圖上——永遠不要使用節點 export，因為它會將透明度扁平化到影格的背景上——根據其 scaleMode（FILL→cover，FIT→contain，CROP→cover + crop，TILE→無法表達；表格和裁切計算在 references/figma-extraction.md 的「影像填色」部分）。首先上傳每個影像；Figma 資產 URL 會過期。
4. 一個會一起裁剪或淡出的本地群組，通常是一個內聯的 composition 圖層。 當它是一個有意可重複使用、獨立擁有的元件時，才使用場景參考。
5. 先用數字驗證，再用一張完整圖片。 picsart_scene_query_layout 在時間 0：每個 box 都應在其 Figma 方框的一個像素範圍內。一個沒有 crop 的頂層影像會攜帶 drawn：其方框和 sourceCrop 與設計顯示的一樣。一個在群組內的影像會讀取 clippedBox，這是其群組保留顯示的部分。然後使用帶有明確 times 和等於構圖尺寸的 resolution 的 picsart_scene_contact_sheet：縮圖會掉落 2 像素的線條和小文字。

圖層，而非畫面

場景是可移動圖層的組合，絕非扁平畫面的蒙太奇。設計是以圖層形式進入的；保持它們可分離，以便每個圖層可以獨立移動——這正是建構場景而非交叉淡出螢幕截圖的全部原因。

• 重建，而非光柵化。 從使用者分享的設計中建構可編輯的 shape 幾何。使用 picsart_scene_import_figma_paint 將 CSS 繪畫套用到現有圖層。此處不支援完整的 Figma 設計節點匯入。保持角落、路徑和位置可編輯，文字為動態。將這些扁平化為 PNG 或 SVG 會阻止其部件的獨立動畫。
• 當你從使用者 Figma 連接器分享的設計中獲取資產時，永遠不要拿父影格來代替其子項。 子項才是會移動的東西。
• 只有當你遇到真正無法分層的來源（光柵化資產、無法存取圖層）時，才能將扁平化為影像作為最後手段。 當你使用此手段時，請明確說明。
• 在 references/figma-extraction.md 中「匯出節點以獲得忠實外觀」的習慣，是關於你已選擇整體引入的一個元素的保真度。不要將其概括為「光柵化所有東西」。

逐場景、按順序建構

這比下面任何單一規則都重要。不要編寫完整時間軸然後再展示。也不要先建立一個引人注目的中間節拍：在中間設計的運動沒有東西可以連接，因此會被丟棄。

從第一個影格開始，向前推進。每個場景：

1. 按語義運動單元拆分，而不僅僅是按可編輯圖層。 一個控制項、其標籤及其圖示通常共享一個位置擁有者。僅為有意的狀態變更添加子項本地運動。靜止是實用的層級結構和閱讀時間，而不是缺陷。對於群組、面板增長和重新排列，請使用連結元素運動（使用 picsart_scene_recipe 取得，名稱 linked-element-motion）。
2. 透過添加到已建構的內容來編寫其運動——在可以執行程式碼的地方附加到生成器，在不能執行程式碼的地方修補同一個場景。永遠不要從頭開始：每個早期節拍的常數和檢查都保留，因此新節拍不能默默地破壞已確定的節拍。
3. 渲染該節拍並在其自身的時間視窗內以影片形式展示。 運動無法在靜態圖片或聯絡表中審查。
4. 接受指導並重新渲染。 預期一個節拍需要多次迭代。指導以品質描述而非數值的形式出現——「更乾脆」、「解耦這些圖塊」、「那個元素製造噪音，移除它」——並且每個都對應到時間、錯開或元素清單，而不是新的設計。
5. 然後，將連接到下一個場景的轉場設計為其自身的明確步驟。 一個場景在看起來正確時並未完成；它在出口和下一個場景的入口都獲得同意時才算完成。轉場是故事板不包含的部分，因此它是指導最具體的地方（「縮小，然後下一個場景從相機方向到達，而不是放大進入」），也是猜測最浪費時間的地方。

當獲得自主迭代授權時，將這些用作內部驗證關卡，並展示有意義的里程碑，而不是為每個節拍請求批准。對於大型時間軸，請使用大場景組裝（使用 picsart_scene_recipe 取得，名稱 large-scene-assembly）來保持元件可獨立編輯。

然後才繼續前進。隨進度更新節拍表——它是已達成共識的記錄，並且在建構完成之前，時間軸是很長的。

讀取故事板

• 畫布 X 軸順序是時間順序。 影格從左到右排列；按 x 排序，而不是按名稱。
• 影格名稱會誤導；順序不會。 重複名稱很常見（設計師複製影格後忘記重新編號）。先對照編號統計影格數量，再下結論說缺少一個。
• 名稱重複的影格通常是一個節拍的 A→B 姿勢。 比對其圖層集：相同的子項，不同的變換意味著設計師將運動編碼為差值。該運動是可測量的，而不是你需要做的設計決定。
• 當設計透過使用者的 Figma 連接器傳入時，一次捕獲一個影格：一次捕獲整個板子會導致影像遠寬於高，並縮小成一條細縫。

真正由你設計的是：停留時間、緩動以及不成對影格之間的連接。

對於每個不成對的連接，請使用運動場景連續性（使用 picsart_scene_recipe 取得，名稱 motion-scene-continuity）來命名語義關係，並在編寫機制之前選擇持久圖層、目錄轉場、硬切、交叉淡出或自訂轉場。此故事板工作流程仍然擁有還原配對設計影格所暗示的運動的責任；連續性僅擁有在其邊界處的關係和表示。

解算變換，而非選擇它們

一個關於未知樞紐 C 的均勻縮放 s 將 p → C + s(p − C) 映射。因此，一個對應的座標對就足以鎖定樞紐：

C = (p2 − s·p1) / (1 − s)

從兩個影格之間任何元素的大小比例取得 s，解算 C，然後根據第二個獨立的元素進行檢查。如果符合到一個像素的分數，則表示你找到了設計師的實際變換；如果不符合，則表示該元素自行移動，需要其自己的處理方式。

寫下節拍表——測量的差值、解算出的樞紐、時間分配。九個帶有數字的編排節拍在捲動後將無法保留，你會希望將其與渲染結果進行比對。

運動規則

完整細節和實際數值：references/motion-rules.md。決定節拍是否正確讀取的規則：

• 剛性 vs. 獨立。 僅對真正獨立的物體（網格圖塊、貼紙）錯開位置/縮放。一張卡片、一個鎖定組合或任何具有部件的物體必須共享一個幾何時鐘，否則其部件會在運動中漂移失去對齊。將錯開放在淡出上。
• 淡出必須與其運動同時結束，才能被解讀為一個手勢。如果淡出在移動結束前完成，眼睛會看到兩個事件。也要匹配緩動曲線。
• 在平面影格渲染上，推近是安全的；平移則不是。 放大永遠不會暴露邊緣；平移則會暴露影像自身的拖尾邊緣。
• 尺寸入場行走，使領先部分剛好在畫布外開始——行走距離 ≥ canvas − leftmost_x。太少則它會在螢幕上開始；太多則是死時間。
• 退場應加速（ease_in）。為兩個物體提供不同的跨度以實現差異加速度。
• 選取框是互斥的——永遠不會同時有兩個選取框，並且它不能超過其節拍的壽命。如果元素步驟重疊其跨度，則元素會在其操作過程中失去選取。

影響編寫的渲染事實

• 不透明度在线性光中合成。 它不會縮放編碼的 sRGB 值。要達到測量的亮度，需透過伽瑪轉換：opacity = linear(target) / linear(source)。
• 不透明度在黑色背景上僅是亮度控制。 在淺色背景上，它會使深色主體變亮，因為背景會穿透出來。要在那裡實現真正的變暗，需要在主體上方加上一個深色遮罩，而不是在主體上使用不透明度。
• anchor 給出非中心樞紐（圖層本地像素，從圖層的左上角開始計算）。將其用於角落樞紐縮放——例如，圍繞選取框的左上角進行縮放，使其看起來像是拖動右下角手柄。不要使用位置關鍵幀來偽造樞紐。
• 逐字元文字動畫是內建的。 文字圖層的 content.animations[] 是一個 After Effects 動畫器 + 範圍選擇器：basedOn: "character"，加上 randomizeOrder/randomizeSeed 用於閃爍效果。堆疊使用不同種子的條目，使其不會同步跳動。有效跨度為 [start + offset, end + offset]：一個狹窄的視窗將其遠端停在文字結尾處的 offset: 1 − end，或在 offset: 1 − start 處清除所有字形（1 − w / 1 僅在 start 為 0 時使用——否則不要使用它們）。一個 FULL 視窗（start:0,end:1）配合斜坡形狀，則是一個正好與文字等寬的斜坡：將 offset 從 -1 → 1 掃描，每個字形在掃描的一半時間內緩慢過渡，透過位置交錯而不是同時切換——請參閱 picsart_scene_capabilities 中的 textAnimationAuthoring.rawSelector 以取得實際數值。
• 內聯 SVG 必須使用 URL 編碼，其中 # 須進行百分比編碼。 原始的 # 會開始一個 URI 片段，並在其第一個十六進制顏色處截斷 SVG。
• 測量緩動，不要相信預設名稱。 在關鍵幀視窗的 25%/75% 處取樣數值，並確認曲線符合你的意圖。

以數值方式驗證

目測縮小的聯絡表會產生誤報——它通常會報告位置錯誤，而測量結果會反駁。在全解析度下比較影格，或進行測量。

• picsart_scene_validate 僅檢查結構。對於圖層渲染不出任何東西的場景，它也會通過。
• picsart_scene_query_layout 在不渲染的情況下解析方框——在花費渲染時間之前，用它來確認幾何形狀與 Figma 數字相符。它僅基於幾何：一個解析出的方塊不表示內容是否解碼成功。
• 要找出畫布上沒有東西的間隙，請使用 picsart_scene_contact_sheet 來查看可疑時間，使用 times: [t1, t2, ...] 並將 resolution 設定為場景的 composition.width 和 composition.height。一個只包含一個小標誌的影格，乍看之下可能顯得空蕩——在稱其為間隙之前先檢查它。
• 在可以執行程式碼的地方，將不變量放在生成器中作為斷言（解算的樞紐一致、行走距離足夠、一次只有一個選取、邊界合理）。它們能捕捉到靜態影格無法發現的迴歸。

命令

在可以執行程式碼的地方，維護相同的生成器和自我檢查。否則，使用有範圍限制的 picsart_scene_patch 編輯。使用 picsart_scene_validate 驗證，使用 picsart_scene_query_layout 查詢事件幾何形狀，並使用 picsart_scene_contact_sheet（每次呼叫最多 8 個 times）並將 resolution 設定為場景的 composition.width 和 composition.height 來檢查全解析度靜態圖片。檢查連續導出的影片以確認運動主張。

沒有生成器...