Figma / V277

Figma Specs

把需求、设计、规则与讨论整理成可交接的实现规格。内容从散布材料逐渐变得有结构，最后交给代理使用。

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

整体编排规则示例

0.00 / 40.75 秒

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Figma Specs · 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 / 13.00 秒

15–28 秒 · 动作示意独立打开 ↗

查看 HTML 源码

<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Figma Specs · 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="15" data-end="28"><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>

评论之后进行内容重排，再把设计帧与说明并置。重排时保留主要标题，使观众知道内容仍然是同一份需求；设计与相应说明靠近，减少跨画面寻找。