デザインワークフロー
dsh-figma-to-lottie
会話の中から、SVG パスとキーフレームを自己完結した Lottie アニメーションにコンパイルする。
概要
デザインデータをモーションアセットに変える 2 つのツール。lottie_compile_shape は SVG パスを Lottie のシェイプ値に変換し、lottie_compile はコンパクトなレイヤー仕様から完全な Lottie JSON を組み立てる。矩形、グラデーション、パス、埋め込み画像、テキストに対応し、レイヤーごとのキーフレームアニメーションを持つ。
Figma/SVG to Lottie animation compiler for DeepSeek Harness. Turn SVG paths and keyframe data into self-contained .lottie.json files.
デザインにとっての意味
- ローディングアニメーションを普通の言葉で説明すると、iOS、Android、Web で動く .lottie.json が得られる。
- ベジェの in/out タンジェントとキーフレームのイージングは、手書きではなくコンパイルされる。
- ビルドステップゼロの純粋な ESM。公開されているものがそのまま動く。
カバーする内容
- Why
- Features
- Usage
- Layer Spec Reference
- Development
インストール方法
dsh-figma-to-lottie
-
ターミナルでこれを実行する。
dsh plugin --profile myprofile add dsh-figma-to-lottie -
dsh web を再起動して、プラグインを読み込ませる。
-
あとは作りたいデザインを説明するだけ。ハーネスがプラグインのツールを拾い上げる。
DeepSeek Harness での使い方
-
npm からプラグインを追加するか、GitHub からコミットを固定して入れる。
-
モーションを説明する。レイヤー、タイミング、イージング、時間差。
-
コンパイルされた .lottie.json を LottieWeb、lottie-ios、lottie-android に投入する。
ここに並ぶプラグインはすべて無料でインストールでき、実際の配布元にリンクしています。
DeepSeek Harness リポジトリをもっと見る ↗次のステップ
セットアップなしで、NEXGERCORE とデザインする
このプラグインを自分で入れてもいいし、NEXGERCORE でキュレーション済みのデザインレイヤーごと DeepSeek Harness の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。