Figma / V099

Figma Draw

从作品的吸引力进入编辑细节，再回到完整海报。每次功能演示都要让作品发生可见变化。

构图与编排可播放 · 可替换内容

整体编排规则示例

0.00 / 53.04 秒

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Figma Draw · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#161616}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="sequence"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

画面元素矢量轮廓控制点路径文字效果面板海报

MOTION LANGUAGE

动作与构图

局部动作 · 构图规则

先给作品，再露出编辑手段

图形与创作主张开场，接路径文字、效果和纹理等局部操作。每次先保留一个清楚的初始状态，再操作参数，最后给变化结果，避免功能面板一闪而过。

围绕同一个主图连续编辑

围绕同一个主图连续编辑规则示例

0.00 / 14.00 秒

32–46 秒 · 动作示意独立打开 ↗

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Figma Draw · sequence</title><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#161616}canvas{display:block;width:100%;height:100%;object-fit:contain}</style><body data-mode="clip" data-start="32" data-end="46"><canvas width="1000" height="600"></canvas><script src="data.js"></script><script src="common.js"></script><script src="scene.js"></script><script src="bridge.js"></script></body></html>

蝴蝶矢量、控制点、渐变填充和海报共享同一轮廓。选择轮廓时控制点沿边界出现，改变渐变时轮廓稳定；完成后将它带入海报，让局部操作有完整作品作为落点。