Figma故事板 → 场景动效设计是做什么的？

故事板是一系列静态的 1920×1080 帧。你的任务是生成一个场景，其时间线在这些帧之间移动。大部分运动已隐含在设计中——请恢复它，而不是凭空创造。

无法运行代码？ 本指南中所有“编写生成器脚本”的地方，请改用 picsart_scene_patch 构建场景，并在每次变更后使用 picsart_scene_query_layout 锁定相同的不变量（参见下方命令）。方法完全一致——仅执行方式不同。

流程

一次性读取树结构——如果用户已通过其 Figma 连接器分享了故事板，请一次性读取页面的框架树：它将返回所有帧、图层、名称和盒子。以下所有步骤都基于此。不要逐帧探索。
规划节拍——在编写代码前写下节拍表（见下）。
从用户分享的设计中将每个元素提取为独立图层：从源测量值构建可编辑的形状几何体，并使用 picsart_scene_import_figma_paint 为现有图层应用 CSS 填充、阴影或渐变。保持文本为实时文本。此处不提供自动形状节点转换。仅对无法处理的材质或确实无法分层处理的源使用图像；参见提取。
从几何体构建场景，并锁定每条规则。 如果可以运行代码，编写生成器脚本（而非手动写 JSON），使每条规则成为 assert；如果不行，通过 picsart_scene_patch 构建，并使用 picsart_scene_query_layout 锁定相同的不变量。几何体来自元数据，绝不靠目测。
数值验证，然后导出。

步骤 3–5 每个场景运行一次，按顺序进行——这个循环就是方法本身。

单一静态帧

当需求是单个帧（静态图、商店图片、卡片）时，不存在故事板。跳过节拍，直接将该帧构建为静态场景：

通过用户分享的 Figma 连接器读取所选帧。 其尺寸为 composition.width 和 height，其填充为 composition.background，短 duration（1）即可。
按绘制顺序每个子层一个图层（树中第一个子层在最底部）。图层的 position 是其盒子在帧中的中心点 [x + width/2, y + height/2]：图层围绕其中心旋转和缩放。与帧对照检查一个嵌套子层：某些组存储的子层坐标是相对于组的（references/figma-extraction.md）。
每个子层放在保持其可编辑性的介质中：编写形状几何体，然后通过 picsart_scene_import_figma_paint 应用其 CSS 绘制，文本保持实时，每个 IMAGE 填充作为媒体图层覆盖在原始位图上——绝不使用节点 export，因为那会将透明度展平成帧的背景——按 scaleMode（FILL→cover，FIT→contain，CROP→cover + crop，TILE→无法表达；表格和裁剪数学见 references/figma-extraction.md 中“图像填充”部分）。首先上传每个图像；Figma 素材 URL 会过期。
一起裁剪或淡出的本地组通常是内联 composition 图层。 仅当其是有意复用的、独立拥有的组件时，才使用场景引用。
用数字验证，然后一张完整图片。 picsart_scene_query_layout 在时间 0：每个 box 与 Figma 盒子相差在一个像素内。没有 crop 的顶层图像携带 drawn：其盒子和 sourceCrop 如设计所示。组内的图像读取 clippedBox，即组留下的可见部分。然后一张 picsart_scene_contact_sheet，使用显式 times 和等于合成尺寸的 resolution：缩略图会丢失 2 像素线和小文本。

图层，而非屏幕

场景是由可移动图层合成的，而非扁平屏幕的蒙太奇。设计以图层形式传入；保持它们可分离，以便每个图层能独立运动——这正是构建场景而非交叉淡出屏幕截图的全部原因。

重建，而非光栅化。 从用户分享的设计构建可编辑的 shape 几何体。使用 picsart_scene_import_figma_paint 将 CSS 绘制应用到现有图层。此处不支持完整的 Figma 设计节点导入。保持角点、路径和位置可编辑，文本实时。将这些展平成 PNG 或 SVG 会阻止其各部分独立动画。
当从用户 Figma 连接器分享的设计中获取素材时，绝不用父帧代替其子层。 子层才是移动的对象。
展平为图像只是备选方案——仅用于确实无法分层的源（光栅化素材，无图层访问权限）。如果使用备选方案，请明确说明。
在 references/figma-extraction.md 中“导出节点以保持外观忠实”的习惯，是关于你已经选择整体引入的一个元素的保真度。不要将其泛化为“光栅化一切”。

逐场景按顺序构建

这一点比以下任何个别规则都更重要。不要先编写整个时间线再展示。也不要先制作故事中间一个引人注目的节拍原型：因为中间设计的运动没有可连接的上下文，最终会被丢弃。

从第一帧开始，逐步向前推进。每个场景：

按语义运动单元拆分，而非仅按可编辑图层。 一个控件、其标签和图标通常共享一个放置所有者。仅在有意的状态变更时添加子层局部运动。静止是层次结构和阅读时间的一部分，而非缺陷。对于编组、面板生长和重新流动，使用链接元素运动（通过 picsart_scene_recipe 获取，名称为 linked-element-motion）。
通过添加到已构建部分来编写其运动——如果可以运行代码，追加到生成器；如果不行，对同一场景进行补丁。绝不重新开始：每个之前节拍的常量和检查都保留，因此新节拍不会静默破坏已确定的节拍。
渲染该节拍并将其作为视频展示，在其自身窗口内。运动无法在静态图或联系表中审查。
接受指导并重新渲染。 预计一个节拍需要多次迭代。指导以性质形式出现，而非数字——“更灵敏”、“分离平铺”、“那个元素有噪音，去掉它”——每个都对应时间、错开或元素清单，而非新设计。
然后将进入下一场景的连接设计为一个单独的显式步骤。 一个场景在看起来正确时并未完成；当它的退出和下一场景的进入都被确认时才算完成。连接是故事板没有包含的部分，因此这是指导最具体（“缩小，然后下一个场景从摄像机方向进入，而非放大状态”）且猜测最浪费的地方。

当授权自主迭代时，使用这些作为内部验证关卡，并展示有意义的里程碑，而不是为每个节拍都请求批准。对于大型时间线，使用大型场景组装（通过 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:

Figma故事板 → 场景动效设计