Figma 转 Lottie zimai233/dsh-figma-to-lottie

dsh-figma-to-lottie

为 DeepSeek Harness 打造的 Figma/SVG → Lottie 动画编译器。

将 SVG 路径与关键帧数据编译成自包含的 .lottie.json 文件——直接在 agent 对话中完成，无需任何设计工具。

为什么需要它

DSH 插件生态没有设计工具桥接层（虽然有 Figma MCP，但没有插件能把设计数据编译成动画资产）。本插件填补了这个空白：它把 SVG→Lottie 的编译管道——路径解析、贝塞尔进出切线转换、关键帧缓动——提炼成两个可被 agent 调用的工具。

功能特性

- lottie_compile_shape — 将 SVG 路径 d 字符串解析为 Lottie 形状值 { i, o, v, c }，带正确的贝塞尔切线。编译完整动画前，可先检查任意 SVG 路径的转换结果。
- lottie_compile — 从紧凑的图层规格组装完整的 Lottie 5.7.4 JSON 文档：矩形（支持渐变填充）、路径、图片（base64 内嵌）、文字，每层均支持透明度 / 上滑关键帧动画。
- 零构建步骤——纯 ESM，发布即运行时代码。无需 prepare 脚本，无需构建授权。

安装

从 npm 安装
dsh plugin --profile myprofile add dsh-figma-to-lottie

从 GitHub 安装（建议锁定 commit，供应链更安全）
dsh plugin --profile myprofile add github:zimai233/dsh-figma-to-lottie#

使用

用自然语言告诉 agent：

"编译一个 3 秒的加载动画：345×414 画布，浅灰背景，10 根蓝色柱子在 x=215.5 处以 0.48/0.24/0.4/1.4 的缓动上滑，每根错开 100ms。写入 ./loading.lottie.json"

agent 会调用 lottie_compile，传入类似这样的规格：

{
"frame": { "w": 345, "h": 414, "bg": "#f3f4f6", "name": "loading" },
"fps": 60,
"durationMs": 3000,
"layers": [
{ "type": "rect", "id": "bar-1", "x": 215.5, "y": 112, "w": 57, "h": 13, "r": 6.5,
"gradient": ["#61adf8", "#8fd1fa"], "slideUp": 15, "startMs": 0 },
{ "type": "rect", "id": "bar-2", "x": 215.5, "y": 137, "w": 57, "h": 13, "r": 6.5,
"gradient": ["#61adf8", "#8fd1fa"], "slideUp": 15, "startMs": 100 }
]
}

产出的 Lottie JSON 可直接用于 iOS / Android / Web（LottieWeb、lottie-ios、lottie-android）。

图层规格参考

| 字段 | 类型 | 说明 |
| frame.w / frame.h | number | 画布尺寸（像素，必填） |
| frame.bg | hex 字符串 | 可选背景色 |
| fps | number | 帧率，默认 60 |
| durationMs | number | 动画总时长（必填） |
| bezier | {p1x,p1y,p2x,p2y} | 可选缓动曲线，默认为上滑缓动 |

图层类型

| 类型 | 字段 |
| rect | x、y、w、h、r?、fill?、gradient?: [c1,c2]、slideUp?、opacity?、startMs?、endMs? |
| path | d（SVG 路径）、x?、y?、fill?、opacity? |
| image | path（绝对文件路径，PNG 以 base64 内嵌）、x、y、w、h |
| text | text、x、y、size、color?、font? |

开发

npm install
npm test # 对 buildLottie + svgPathToLottie 运行纯核心测试
npm run pack # 打包预检（相当于 pnpm pack）

许可证

MIT

dsh-figma-to-lottie

为 DeepSeek Harness 打造的 Figma/SVG → Lottie 动画编译器。

将 SVG 路径与关键帧数据编译成自包含的 .lottie.json 文件——直接在 agent 对话中完成，无需任何设计工具。

为什么需要它

DSH 插件生态没有设计工具桥接层（虽然有 Figma MCP，但没有插件能把设计数据编译成动画资产）。本插件填补了这个空白：它把 SVG→Lottie 的编译管道——路径解析、贝塞尔进出切线转换、关键帧缓动——提炼成两个可被 agent 调用的工具。

功能特性
- lottie_compile_shape — 将 SVG 路径 d 字符串解析为 Lottie 形状值 { i, o, v, c }，并带有正确的贝塞尔切线。在编译完整动画之前，先检查任意 SVG 路径的转换结果。
- lottie_compile — 从紧凑的图层规范组装完整的 Lottie 5.7.4 JSON 文档：矩形（带渐变填充）、路径、图像（base64 内嵌）和文本，每个图层都带有逐层不透明度/上滑关键帧动画。
- 零构建步骤 — 纯 ESM，发布的包即为运行时代码。无需 prepare 脚本，无需构建权限。

安装

从 npm 安装
dsh plugin --profile myprofile add dsh-figma-to-lottie

从 GitHub 安装（锁定 commit 以保障供应链安全）
dsh plugin --profile myprofile add github:zimai233/dsh-figma-to-lottie#

用法

用自然语言向 agent 提问：

“编译一个 3 秒的加载动画：345×414 画布，浅灰色背景，10 个蓝色条位于 x=215.5，以 0.48/0.24/0.4/1.4 的缓动上滑，间隔 100ms 错开。将其写入 ./loading.lottie.json”

agent 会使用如下规范调用 lottie_compile：

{
"frame": { "w": 345, "h": 414, "bg": "#f3f4f6", "name": "loading" },
"fps": 60,
"durationMs": 3000,
"layers": [
{ "type": "rect", "id": "bar-1", "x": 215.5, "y": 112, "w": 57, "h": 13, "r": 6.5,
"gradient": ["#61adf8", "#8fd1fa"], "slideUp": 15, "startMs": 0 },
{ "type": "rect", "id": "bar-2", "x": 215.5, "y": 137, "w": 57, "h": 13, "r": 6.5,
"gradient": ["#61adf8", "#8fd1fa"], "slideUp": 15, "startMs": 100 }
]
}

结果是一个可直接播放的 Lottie JSON，适用于 iOS / Android / Web（LottieWeb、lottie-ios、lottie-android）。

图层规范参考

| 字段 | 类型 | 描述 |
| frame.w / frame.h | number | 画布尺寸（单位 px，必填） |
| frame.bg | hex 字符串 | 可选背景填充 |
| fps | number | 每秒帧数，默认 60 |
| durationMs | number | 动画总时长（必填） |
| bezier | {p1x,p1y,p2x,p2y} | 可选缓动曲线，默认为上滑缓动 |

图层类型

| 类型 | 字段 |
| rect | x、y、w、h、r?、fill?、gradient?: [c1,c2]、slideUp?、opacity?、startMs?、endMs? |
| path | d（SVG 路径）、x?、y?、fill?、opacity? |
| image | path（绝对文件路径，PNG 以 base64 内嵌）、x、y、w、h |
| text | text、x、y、size、color?、font? |

开发

npm install
npm test # 针对 buildLottie + svgPathToLottie 运行纯核心测试
npm run pack # 试运行发布（等同于 pnpm pack）

许可证

MIT