デザインワークフロー

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.
上流の README より

デザインにとっての意味

  • ローディングアニメーションを普通の言葉で説明すると、iOS、Android、Web で動く .lottie.json が得られる。
  • ベジェの in/out タンジェントとキーフレームのイージングは、手書きではなくコンパイルされる。
  • ビルドステップゼロの純粋な ESM。公開されているものがそのまま動く。

カバーする内容

  • Why
  • Features
  • Usage
  • Layer Spec Reference
  • Development

インストール方法

dsh-figma-to-lottie

  1. ターミナルでこれを実行する。

    dsh plugin --profile myprofile add dsh-figma-to-lottie
  2. dsh web を再起動して、プラグインを読み込ませる。

  3. あとは作りたいデザインを説明するだけ。ハーネスがプラグインのツールを拾い上げる。

DeepSeek Harness での使い方

  1. npm からプラグインを追加するか、GitHub からコミットを固定して入れる。

  2. モーションを説明する。レイヤー、タイミング、イージング、時間差。

  3. コンパイルされた .lottie.json を LottieWeb、lottie-ios、lottie-android に投入する。

ここに並ぶプラグインはすべて無料でインストールでき、実際の配布元にリンクしています。

DeepSeek Harness リポジトリをもっと見る ↗

次のステップ

セットアップなしで、NEXGERCORE とデザインする

このプラグインを自分で入れてもいいし、NEXGERCORE でキュレーション済みのデザインレイヤーごと DeepSeek Harness の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。

NEXGERCORE デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な NEXGERCORE IDE で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS、Windows、Linux に対応