HyperFrames Figma Motion转GSAP实战把设计稿动画变成可Seek时间轴【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是一个「写 HTML、渲染视频」的开源视频引擎它的 Figma 集成可以把Figma Motion 时间轴自动翻译成 GSAP 动画生成可逐帧 Seek 的确定性时间轴——设计师在 Figma 里做好的关键帧、缓动和循环无需手抄数值直接变成可渲染、可预览、可微调的真实动画。为什么设计稿动画要变成「可 Seek」的时间轴传统工作流里Figma Motion 只是「播放给你看」你在设计工具里欣赏完动画数值就锁在工具内部了。要落到视频渲染引擎只能靠人肉抄关键帧——抄错一个时长整段节奏全乱。HyperFrames 的渲染器是逐帧 Seek的它不连续播放而是把播放头直接跳到第 N 帧去截图。这就要求动画必须满足三个条件时间轴是有限时长的不能无限循环初始状态是确定的用fromTo()显式声明起点缓动曲线是可复现的贝塞尔值原样保留而不是靠「看起来差不多」满足这三点无论渲染器跳到哪一帧画面都和你设计时看到的一模一样。转换管线三步走Connector → MotionDoc → GSAP整个转换由 HyperFrames 的/figma技能驱动核心逻辑封装在 packages/core/src/figma/ 模块中。第 1 步拉取 Motion 上下文Figma 的 REST API 不提供动效数据所以这一步需要一个兼容的 Figma Connector一次 OAuth 授权即可。Agent 会对父级 Frame 发起一次递归请求拿到整棵树的动效上下文原始 JSON 缓存在.media/figma-cache/之后重跑转换不再消耗配额。第 2 步规范化为 MotionDoc这是管线里最关键的一环由 motionContextToDocs.ts 机械执行规则经过大量实测校准解析 motion.dev 片段的编码CSS 片段会拉伸时长、不可靠直接忽略剔除「循环回卷」尾部关键帧——0.9999→1 的亚毫秒段是循环瞬间重置不是真实动画循环次数由repeat字段表达贝塞尔缓动原样保留由 motionEase.ts 映射表处理映射不到的命名缓动降级为 linear 并明确告知你第 3 步生成 GSAP 时间轴并注册motionToGsap.ts 把每条轨道编译成 GSAP tweenemitTimelineScript.ts 输出成一段script注入到页面里。生成的时间轴长这样const timeline gsap.timeline({ paused: true }); // 关键帧由 MotionDoc 机械编译位置显式、起点确定 window.__timelines[figma-xxx] timeline;注意paused: true和window.__timelines注册——这是 HyperFrames 识别时间轴的契约注册键必须与页面上data-composition-id完全一致。转完怎么验证用「运动能量差」做客观质检最坑的失败模式是「看起来对其实错」——浏览器里连续播放正常逐帧 Seek 就穿帮。HyperFrames 内置了一个客观质检脚本 verify-motion.mjsnode skills/figma/scripts/verify-motion.mjs \ --reference figma-export.mp4 --render out.mp4 --crop 800x6006080它的思路很巧妙对 Figma 官方导出视频和 HyperFrames 渲染视频分别做相邻帧差分PSNR静态画面的字体、边缘差异会在差分中相互抵消剩下的分数纯粹反映编排质量——轨迹、时长、缓动是否一致。实测校准数据忠实转换得分约 20dB走样的转换只有 5dB 左右所以默认阈值设为15dB低于它就必须回头检查翻译而不是调阈值。四个高频坑位清单 坑位现象正确做法Shader 轨道Figma 导出路径会把 shader 压平成本色看起来「导出成功了」其实内容丢了让用户在 Figma 里原生导出 MP4再作为video嵌入不可翻译的轨道复杂遮罩、不支持的属性导出为视频片段嵌入Agent 会明确告知走了哪条路、为什么无限循环时间轴写成repeat: -1渲染必须有限时长循环次数会被钳制为单次播放组合里残留 Figma 链接渲染时偷偷回源 Figma结果不可复现一切导入都先「冻结」为本地文件渲染只看本地另外转换完成后跑一遍npx hyperframes check再验收——这一步在技能流程里是强制的。关键文件位置速查 想深入源码或文档以下是本次转换链路上的核心入口Figma 集成总览docs/guides/figma.mdx设计稿入项目的方法论图片归图片、HTML 归 HTMLdocs/guides/design-tools.mdxGSAP 时间轴的完整契约与规则docs/guides/gsap-animation.mdx/figma技能说明书含 Motion 四阶段流程skills/figma/SKILL.md动效类型定义packages/core/src/figma/types.ts时间轴校验脚本skills/figma/scripts/verify-motion.mjs上手只需两步把仓库克隆到本地需要 clone 时仓库地址是 https://gitcode.com/GitHub_Trending/hy/hyperframes配置好 Figma Token把你的 Figma 链接和诉求丢给 Agent「把这个 Frame 的 Motion 时间轴转成 GSAP」。之后所有脏活——拉取、规范化、编译、质检——都由管线机械完成。你只需要看两样东西Agent 报告的走哪条翻译路径以及verify-motion的分数是否过线。设计稿动画从此不再是「截图级的演示」而是一条真正属于你、可 Seek、可渲染的 GSAP 时间轴。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames Figma Motion转GSAP实战把设计稿动画变成可Seek时间轴【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是一个「写 HTML、渲染视频」的开源视频引擎它的 Figma 集成可以把Figma Motion 时间轴自动翻译成 GSAP 动画生成可逐帧 Seek 的确定性时间轴——设计师在 Figma 里做好的关键帧、缓动和循环无需手抄数值直接变成可渲染、可预览、可微调的真实动画。为什么设计稿动画要变成「可 Seek」的时间轴传统工作流里Figma Motion 只是「播放给你看」你在设计工具里欣赏完动画数值就锁在工具内部了。要落到视频渲染引擎只能靠人肉抄关键帧——抄错一个时长整段节奏全乱。HyperFrames 的渲染器是逐帧 Seek的它不连续播放而是把播放头直接跳到第 N 帧去截图。这就要求动画必须满足三个条件时间轴是有限时长的不能无限循环初始状态是确定的用fromTo()显式声明起点缓动曲线是可复现的贝塞尔值原样保留而不是靠「看起来差不多」满足这三点无论渲染器跳到哪一帧画面都和你设计时看到的一模一样。转换管线三步走Connector → MotionDoc → GSAP整个转换由 HyperFrames 的/figma技能驱动核心逻辑封装在 packages/core/src/figma/ 模块中。第 1 步拉取 Motion 上下文Figma 的 REST API 不提供动效数据所以这一步需要一个兼容的 Figma Connector一次 OAuth 授权即可。Agent 会对父级 Frame 发起一次递归请求拿到整棵树的动效上下文原始 JSON 缓存在.media/figma-cache/之后重跑转换不再消耗配额。第 2 步规范化为 MotionDoc这是管线里最关键的一环由 motionContextToDocs.ts 机械执行规则经过大量实测校准解析 motion.dev 片段的编码CSS 片段会拉伸时长、不可靠直接忽略剔除「循环回卷」尾部关键帧——0.9999→1 的亚毫秒段是循环瞬间重置不是真实动画循环次数由repeat字段表达贝塞尔缓动原样保留由 motionEase.ts 映射表处理映射不到的命名缓动降级为 linear 并明确告知你第 3 步生成 GSAP 时间轴并注册motionToGsap.ts 把每条轨道编译成 GSAP tweenemitTimelineScript.ts 输出成一段script注入到页面里。生成的时间轴长这样const timeline gsap.timeline({ paused: true }); // 关键帧由 MotionDoc 机械编译位置显式、起点确定 window.__timelines[figma-xxx] timeline;注意paused: true和window.__timelines注册——这是 HyperFrames 识别时间轴的契约注册键必须与页面上data-composition-id完全一致。转完怎么验证用「运动能量差」做客观质检最坑的失败模式是「看起来对其实错」——浏览器里连续播放正常逐帧 Seek 就穿帮。HyperFrames 内置了一个客观质检脚本 verify-motion.mjsnode skills/figma/scripts/verify-motion.mjs \ --reference figma-export.mp4 --render out.mp4 --crop 800x6006080它的思路很巧妙对 Figma 官方导出视频和 HyperFrames 渲染视频分别做相邻帧差分PSNR静态画面的字体、边缘差异会在差分中相互抵消剩下的分数纯粹反映编排质量——轨迹、时长、缓动是否一致。实测校准数据忠实转换得分约 20dB走样的转换只有 5dB 左右所以默认阈值设为15dB低于它就必须回头检查翻译而不是调阈值。四个高频坑位清单 坑位现象正确做法Shader 轨道Figma 导出路径会把 shader 压平成本色看起来「导出成功了」其实内容丢了让用户在 Figma 里原生导出 MP4再作为video嵌入不可翻译的轨道复杂遮罩、不支持的属性导出为视频片段嵌入Agent 会明确告知走了哪条路、为什么无限循环时间轴写成repeat: -1渲染必须有限时长循环次数会被钳制为单次播放组合里残留 Figma 链接渲染时偷偷回源 Figma结果不可复现一切导入都先「冻结」为本地文件渲染只看本地另外转换完成后跑一遍npx hyperframes check再验收——这一步在技能流程里是强制的。关键文件位置速查 想深入源码或文档以下是本次转换链路上的核心入口Figma 集成总览docs/guides/figma.mdx设计稿入项目的方法论图片归图片、HTML 归 HTMLdocs/guides/design-tools.mdxGSAP 时间轴的完整契约与规则docs/guides/gsap-animation.mdx/figma技能说明书含 Motion 四阶段流程skills/figma/SKILL.md动效类型定义packages/core/src/figma/types.ts时间轴校验脚本skills/figma/scripts/verify-motion.mjs上手只需两步把仓库克隆到本地需要 clone 时仓库地址是 https://gitcode.com/GitHub_Trending/hy/hyperframes配置好 Figma Token把你的 Figma 链接和诉求丢给 Agent「把这个 Frame 的 Motion 时间轴转成 GSAP」。之后所有脏活——拉取、规范化、编译、质检——都由管线机械完成。你只需要看两样东西Agent 报告的走哪条翻译路径以及verify-motion的分数是否过线。设计稿动画从此不再是「截图级的演示」而是一条真正属于你、可 Seek、可渲染的 GSAP 时间轴。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考